Page scroll depth

[metmarkosaric]

"Show how far down people scroll on a page as a percentage."

Update: Scroll depth tracking is now live https://plausible.io/docs/scroll-depth

[jkettmann]

Would be great to get this feature. Especially for blog pages. Any updates?

[calicojack]

This is a big one for me, as we use it for a quality measure of the content and engagement.

[Totalus]

That would be a very nice feature to add, and such an easy one to implement I believe.

Here's a scrolling depth tracking script as reference:

var scrollDepth = 0;
window.addEventListener("scroll", function (event) {
  var scrollPosition = this.scrollY;
  var maxScrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

  if(maxScrollHeight == 0) {
    return; // Page too short to scroll
  }

  var scrollPercentage = Math.round(scrollPosition / maxScrollHeight * 100);
  console.log("Scroll position:", scrollPercentage, "%");
  
  if(scrollDepth < scrollPercentage) {
    scrollDepth = scrollPercentage;
    console.log("Scroll depth (max):", scrollDepth);
    
    // TODO : notify Plausible that the user has scrolled deeper
  }
});

You could add a debounce mechanism if you want to optimize the number of events sent to the server (ex: send the new depth after the user has sit still for 2 seconds).

On the backend side we simply need to create a new entry in the database for this value and display it in the Top pages detailed table.

What do you think ?

[foligo]

Hey there, this is a great request. Are there any updates on that? @metmarkosaric thx a lot in advance.

[metmarkosaric]

thanks! there are no short term plans for this. we are a small team with limited development resources so need to focus on most frequently requested features first. currently the focus is on introducing a google analytics stats import. when there's an update on page scroll depth, we'll post it here. thanks for understanding!

[Totalus]

How much time would that take to implement ? Seems like an easy to add, yet good value feature.

[metmarkosaric]

for every new feature there are many things to think about including how does it affect the size of our script, where to place it in the UI in order to keep having a simple interface, make it look good on all devices, include it in the export and the api etc. we have a small team so need to take things one at a time. at the moment, we're focused on more highly requested features

[NiklasBr]

there are no short term plans for this

@metmarkosaric has there been any change to this over the past years?

[MickL]

Two years later, any update on this? :)

[alexcombessie]

Hi,

Would love to have "scroll" as a goal event, regardless of scroll depth. It is native in google analytics, I am looking for a similar native feature.

Is it possible today with a bit of custom code? Is it on your roadmap?

Many thanks,

Alex

[Totalus]

You probably can if you only notify plausible when the user exits the page instead of when the depth changes, something like :

window.addEventListener('unload', notifyPlausible, false);

function notifyPlausible() {
     plausible("Scrolldown", {
         props: {
             path:window.location.pathname,
             depth: scrollDepth,
             tag: window.location.pathname + " " + scrollDepth.toString() + "%"
         },
     })
}

This might not work 100% of the time however. You'd have to test, but I think if the user exits the page by closing the tab or exiting the browser, the request won't be made.

[abett]

I think that would be too much of a constraint for me to rely on it..
But it'd be a perfect application for navigator.sendBeacon, wouldn't it?
How's the roadmap for plausible/plausible-tracker#16?

[metmarkosaric]

you can see the current status in this PR #1679

[jkettmann]

I wrote a similar script that attaches an intersection observer to all h2 and h3 headings and sends an event once a heading becomes visible. Here's my React code in case anyone is interested:

useEffect(() => {
    const callback = (headings, observer) => {
      const activeHeading = headings.find((h) => h.isIntersecting);
      if (activeHeading) {
        observer.unobserve(activeHeading.target);
        plausible("Read progress", {
          props: {
            section: `${activeHeading.target.tagName} ${activeHeading.target.textContent}`,
          },
        });
      }
    };

    const observer = new IntersectionObserver(callback, {
      rootMargin: "0px 0px -40% 0px",
    });

    const headingElements = Array.from(document.querySelectorAll("h2, h3"));
    headingElements.forEach((element) => observer.observe(element));

    return () => observer.disconnect();
  });

The resulting goal could be really valuable, but unfortunately it's not easy to read because of the wrong order of headings.

Edit: With a bit of patience and more data the order of headings becomes clearer. It's now quite easy to see how far the users read.

[dgp1130]

I implemented mine with a similar approach to #121 (reply in thread) (dgp1130/blog@4659e35 and dgp1130/blog@53f7826 if you're interested). This works well enough for a small blog, but I'm not totally satisfied with the approach since Plausible's dashboard doesn't give a means of breaking down this data. I'd want to filter for a specific page and view how far users scrolled down it, but there is no way to do that in the custom events dashboard. Instead we have to make a tag property which contains both the path and the scroll depth of the event, which intermixes pages and can get quite unwieldy. Ideally I would be able to:

1. Filter to scroll-depth.path == "/some/page".
2. View the scroll-depth.depth property.
3. Sort the result ascending.

The simplest workaround would be to view the tag property and then just add a filter which limits to tag values that contain /some/page, but I don't think even that's possible right now. That would probably be the easiest way to support this feature, though some more powerful dashboard views would do a more complete job.

[johannbuscail]

Any update on this ?

[nelsonic]

We are suuper keen on this feature too. Happy to contribute code for it. 🙏
We are current paying customers of Plausible and planning to propose using the product to a large corporate client that needs privacy.
But this is a feature they they need and thus we are either going to fork the analytics project and add it to the fork
or we'd be very happy to contribute it up-stream and have it in the core product.

[metmarkosaric]

Update: Scroll depth tracking is now live https://plausible.io/docs/scroll-depth

[NiklasBr]

As in a custom property you've set up to manually track scroll depth?

Yes exactly.

[metmarkosaric]

@MickL thanks, glad to hear that! scroll depth tracking works out of the box with our default JavaScript snippet and is tracked with a new kind of special event which requires a pretty complex setup. we plan to work on a new version of the tracker to support this but i cannot say any details nor promise any timelines on this. sorry about that!

[MickL]

Ok, unfortunately most projects, including nuxt-plausible use barbapapazes/plausible-tracker which is an own implementation. To support scrolldepth tracking it would require barbapapazes/plausible-tracker to rewrite this "complex setup". Issue: Barbapapazes/plausible-tracker#20

Would you be willing to show how to make this setup and document the needed api event?

Btw if you ever want to start workinh on plausible-tracker againg, maybe it would make sense to fork Barbapapazes/plausible-tracker instead and use it as a new base?

[Swamp2k9]

I've implemented the WordPress plug-in on my sites, but I'm unable to see the scroll percentage values on my Plausible dashboard.

However, I can view these values on the Plausible test sites. Could someone help me resolve this issue?

[metmarkosaric]

hi @Swamp2k9! please do contact our customer support with details and someone will take a look. see https://plausible.io/contact. thanks!