Detecting whether or not an ad is in view is paramount to estimating what advertising networks are measuring when deciding what to pay out. Most networks use the standard IAB 50% for 1 continuous second as the measurement of a viewable impression:
- Pixel requirement: greater than or equal to 50% of the pixels in the advertisement were on an in-focus browser tab on the viewable space of the browser page
- Time requirement: the time the pixel requirement is met was greater than
- or equal to one continuous second, post ad render.
A Intersection Observer is an instance that watches an element for any occurring intersections between it and another element. By default this other element is the browser viewport, so we can leave that as it is. The target element will be the outer frame of our ad – the container.
I’ve gone ahead and created a demo which illustrates how an IntersectionObserver is designed to work, and how it can be used to calculate IAB standard viewability with ease:
See the Pen Intersection Observer demo by Perry Mitchell (@perry-mitchell) on CodePen.
The interesting piece of functionality is the
onViewability function: It is essentially a nice wrapper for the IntersectionObserver functionality that you can consume when tracking an ad container. All you need to manage is the 1-second detection of the element remaining in view, which is included at the end of the demo.