Track User Scroll with IntersectionObserver

A tutorial on firing a callback function when an element enters the viewport

The problem

Our website has a new and shiny landing page. We are getting lots of visits, so the marketing team has asked us to track how many of those visitors scroll down to the Call To Action section.

How can we do that?

A solution

Use window.IntersectionObserver to:

1. Detect when the section enters the viewport.
2. Fire a callback that will log that event on our analytics software e.g. Fathom, Matomo, Google Analytics.
3. Disconnect the observer to avoid logging the event more than once.

// Feature detection, avoid breaking IE11
if (IntersectionObserver) {
  document.querySelectorAll(".call-to-action").forEach((node) => {
    // Create the observer and pass the callback
    const observer = new IntersectionObserver(function (entries) {
      if (entries[0].isIntersecting) {
        // entries[0] is the element that entered into view
        alert(entries[0].target.textContent.trim() + ` scrolled into view!`);
        // Disconnect to avoid logging more than once
        this.disconnect();
      }
    });

    // Make the observer watch for the node entering on viewport
    observer.observe(node);
  });
}

Here’s a demo of window.IntersectionObserver to log user scroll to a certain section.

Get notified of new blog posts?

RSS is the correct choice, btw.