In previous articles I have written about how to track elements when they enter or leave the browsers viewport. The reason why you might want to track this is when you are doing a test on an element that is outside the viewport on page initialisation, you don’t want to count this as a visitor immediately but only when the element is scrolled into view.
If the (changed) element is seen by the visitor, you fire an event, not before. In the past I accomplished this by using something called notify enter viewport. This worked just fine but it came with a lot of caveats.
For instance, notify enter viewport only accepts elements that are already loaded in the DOM. Second, a lot of calculations have to be done inside the function before we know an elements position. It’s complicated.
Modern browsers come with an API that can help us accomplish basically the same in a much simpler way, the Intersection Observer.
Here’s a code example of how I use it in my own AB testing framework.
const observeIntersections = function (config) {
// loop through all entries in config array
config.forEach(function (options) {
document.querySelectorAll(options.element).forEach(function (element) {
const observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
sendDimension({
event: 'trackEventNI',
eventCategory: abtest.testid + ": " + abtest.testName,
eventAction: 'Viewport hit for element [' + element + ']',
eventLabel: abtest.variation,
eventNonInteraction: true
});
}
});
}, {
root: null, // use document viewport as container
rootMargin: "0px",
threshold: 1 // fire callback as each of these thresholds is reached
});
observer.observe(element);
});
})
};
observeIntersections([{
element: 'h4', // the element or elements we want to observe
tag: 'H4 Element',
threshold: 1,
root: null,
rootMargin: "0px"
}, {
element: 'h2#Intersection_observer_concepts_and_usage',
tag: 'H2 title element',
threshold: 1,
root: null,
rootMargin: "0px"
}, {
element: 'iframe.live-sample-frame.sample-code-frame',
tag: 'IFRAME ELEMENT',
threshold: [0, 0.5, 1],
root: null,
rootMargin: "0px"
}
]);