Page scroll custom event

Instead 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.

<!-- 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>

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;
  }
});