Page scroll depth #121

metmarkosaric · 2020-06-19T10:34:26Z

metmarkosaric
Jun 19, 2020
Maintainer

"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 · 2021-08-20T05:06:19Z

jkettmann
Aug 20, 2021

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

1 reply

calicojack Mar 23, 2023

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

8000

Totalus · 2021-08-22T20:04:37Z

Totalus
Aug 22, 2021

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 ?

0 replies

foligo · 2022-01-16T21:37:02Z

foligo
Jan 16, 2022

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

0 replies

metmarkosaric · 2022-01-17T10:24:40Z

metmarkosaric
Jan 17, 2022
Maintainer Author

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!

4 replies

Totalus Jan 23, 2022

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

metmarkosaric Jan 24, 2022
Maintainer Author

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 Jan 17, 2024

there are no short term plans for this

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

MickL Sep 1, 2024

Two years later, any update on this? :)

alexcombessie · 2022-02-17T15:59:35Z

alexcombessie
Feb 17, 2022

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

10 replies

Totalus Feb 18, 2022

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 Feb 18, 2022

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 Feb 18, 2022
Maintainer Author

you can see the current status in this PR #1679

~~jkettmann Feb 18, 2022~~

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.

Comment options

dgp1130 Feb 20, 2022

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:

Filter to scroll-depth.path == "/some/page".

View the scroll-depth.depth property.

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 · 2024-01-09T12:15:26Z

johannbuscail
Jan 9, 2024

Any update on this ?

0 replies

nelsonic · 2024-06-20T10:52:02Z

nelsonic
Jun 20, 2024

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.

0 replies

metmarkosaric · 2025-03-10T12:04:22Z

metmarkosaric
Mar 10, 2025
Maintainer Author

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

9 replies

metmarkosaric Mar 10, 2025
Maintainer Author

@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 Mar 10, 2025

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 Mar 12, 2025

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 Mar 12, 2025
Maintainer Author

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

MickL May 4, 2025

@metmarkosaric Could you please provide information on how to do the scroll tracking, maybe in this issue Barbapapazes/plausible-tracker#20 ?

ksully-execute · 2025-08-15T14:55:05Z

ksully-execute
Aug 15, 2025

I know we don't track users (Privacy-first), and am wondering if this feature could be used for rewarding authors (depending on scroll length + time on page = payment to authors....is this something of interest to anyone or is this unacceptable use?
For my situation, I am only talking about authenticated users, so a cookie would be there from authentication with an opaque one-time value that could be used for correlation....?

0 replies

Uh oh!

Page scroll depth #121

Uh oh!

Uh oh!

metmarkosaric Jun 19, 2020 Maintainer

Replies: 9 comments · 24 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metmarkosaric Jan 17, 2022 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

metmarkosaric Jan 24, 2022 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metmarkosaric Feb 18, 2022 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metmarkosaric Mar 10, 2025 Maintainer Author

Uh oh!

metmarkosaric Mar 10, 2025 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

metmarkosaric Mar 12, 2025 Maintainer Author

Uh oh!

Uh oh!

metmarkosaric
Jun 19, 2020
Maintainer

Replies: 9 comments 24 replies

metmarkosaric
Jan 17, 2022
Maintainer Author

metmarkosaric Jan 24, 2022
Maintainer Author

metmarkosaric Feb 18, 2022
Maintainer Author

metmarkosaric
Mar 10, 2025
Maintainer Author

metmarkosaric Mar 10, 2025
Maintainer Author

metmarkosaric Mar 12, 2025
Maintainer Author