How to track element viewability

This example demonstrates the element tracking utility. Tracking works on any element, not just ADK containers. In this example we are tracking a plain old div.

adk.init(publisherId)

const handleEvent = (e) => {
    const classes = e.elem.classList
    if (e.kind === 'viewable') {
        classes.add('viewable')
    } else if (e.kind === 'inscreen') {
        e.value ? classes.add('inscreen') : classes.remove('inscreen')
    }
}

const elem = document.querySelector('.any-element')

const cleanupTracker = adk.util.track(elem, handleEvent, {
    areaPercent: 50,
    timeMs: 2000,
    inscreenEvents: true,
    accumulate: true,
})

elem.onclick = cleanupTracker

Try scrolling the element in and out of the viewport. The tracker will notify our event listener which will set the element green or red depending on the inscreen state. When the viewability condition has been met, the handler adds a dashed line around the element.

The onlick handler is set to the cleanup method, so when the element is clicked the tracking stops.

Note. Window focus is required for ADK to consider an element to be inscreen. If you are using dev tools, make sure that the focus is in the main window when testing.