Skip to content
Extend FullStory to understand when and how often individual page elements have been viewed.
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
Readme.md
extension.js
index.html
package-lock.json
package.json

Readme.md

Find out when and how often individual page elements have been viewed using FullStory

Replay

IntersectionObserver2

Search

IntersectionObserver4 You can also filter by the number of views: https://github.com/patrick-fs/IntersectionObserver/issues/3

How to use

  1. Place <script src="extension.js"></script> ahead of the FullStory snippet
  2. Add this callback to the snippet
window['_fs_ready'] = function () {
    initExtension();
};
  1. Add the data-fs-view attribute on any element you want to track
<div id="pink" class="box" data-fs-view="Pink Box">Pink Box</div>
<div id="blue" class="box" data-fs-view="Blue Box">Blue Box</div>
  1. (Optional) add the data-fs-view-threshold attribute to the element to change how long the element must be in view before being tracked
<div id="pink" class="box" data-fs-view="Pink Box">Pink Box</div>
<!-- data-fs-view-threshold is in milliseconds -->
<div id="blue" class="box" data-fs-view="Blue Box" data-fs-view-threshold="2000">Blue Box</div>

How does this work?

The FullStory Custom Event API is integrated with the IntersectionObserver browser API. See the extension.js file in this repository for details.

How to run the demo

npm install
npm run serve

Additonal FAQ

  1. What data are being sent to FullStory? The value of the data-fs-view attribute as well as the number of times the element was viewed while the user was on the page.

  2. What is the behavior when the targeted element or an ancestor of the targeted element is blocked? No impact on behavior: a blocked element (or the child of a blocked element) will be tracked as "Viewed" but he actual content of the blocked element will not be sent to FullStory's servers. Read more about privacy controls here: https://help.fullstory.com/spp/138664.

  3. Does this stay within FullStory's API quotas? Yes, likely. It uses the Custom Event API which limits event names to 250 characters and API requests to 30 calls per minute (burst to 10 per second). More information about API limits are here: https://help.fullstory.com/develop-js/367098-fs-recording-client-api-requirements.

You can’t perform that action at this time.