TODOInstead of relying on page view events, you may wish to know if the visitor has actually consumed the page content. Browsers are not yet smart enough to know when the visitor has read the content, but an interim step might be to record an event when the visitor at least scrolls to the bottom of the page or other element.
| Code Block |
|---|
|
<!-- A very large chunk of content that requires scrolling to see it all. -->
<div id="large_content">
<p>Lorem ipsum...</p>
...
<p>Lorem ipsum...</p>
</div> |
| Code Block |
|---|
|
isScrolledToBottom = false;
window.addEventListener('scroll', (event) => {
// The scroll event occurs a lot, but we only want this once per page load.
if (isScrolledToBottom) return;
// Get the bounding client rectangle of our content <div>.
const rect = document.getElementById('large_content').getBoundingClientRect();
// Check to see if the bottom of it is visible within the viewport.
if (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
// Record a custom event.
send2crm.analytics?.setCustomEvent('PAGE_SCROLLED', { href: location.href });
isScrolledToBottom = true;
}
}); |