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.
Viewability calculations are performed by using JavaScript to detect where the ad’s frame occurs on a page, and whether or not the user can see it (by seeing if the frame is visible in the browser’s viewport). This can be tricky depending on the nesting of the ad and a variety of other factors (secure iframes, scrolling etc.). IntersectionObserver is a great new tool that we can use to detect whether or not a frame is in-view, and it even supports being used within iframes.
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.
