Easy way to implement scroll depth?

Support
1

Hi Pirsch team,

As a non-developer I want to track the scroll depth of my pages in order to get a better understanding of my user’s behaviour on my pages and and be able to improve upon.

Of course I searched this forum, read the related blog-article: How to Track the Reading Time of Blog Articles and Registrations and also had a look at github with its samples.

I really like the article about scroll depth and I personally can’t handle it. Since I’m not a programmer it’s really hard for me to abstract the scenario with Hugo and adapt it to my case.

What would be perfect is if there was a way to simply add 1 or 2 JS-snippets to my pages in order to track scroll depth (considering of the math with min and max reading time) on my dashboard. The variables about “page title” and “word count” I could easily set by hand since I don’t have such an amount of different pages.

So my question is if someone is able to provide a “non generic” JS-snippet which I can past in my pages?

Highly appreceate any help.
Best

Marius

1 Like
2

Hi, and welcome to the Forum :slight_smile:

I think we could provide a simple script that can be added to your website. Could you manually call it to pass in the word count? Something like this:

pirschReadingTime({words: 506, other_options: ...});
3

@WevalcuGmbH Did you see my reply?

4

Hi Marvin,

thanks for your quick reply. Our websitebuilder tool allows us to set html- and JS-script-tags in header and footer. That’s how we implemented the pirsch-tracking-snippet.

I’m not sure how we should call your scrolldepth-script. Could you explain in more detail, please? Of course we can count the articel words by ourselves and write them somewhere.

Thanks for your reply.

5

I see. In that case, I think we can provide a snippet configured via attributes, just like our main script :slight_smile:

Here is an example:

<script src=”…” data-words=”500” data-author=”…” …></script>

Would that work?

6

Hi Marvin,

yes, absolutley. Great thanks.

7

Alright, I’ve created the script! You can find it in our demo repository on GitHub. Direct link:

https://raw.githubusercontent.com/pirsch-analytics/demo/refs/heads/master/web/static/pirsch-scroll-depth.js

To use it, please save it and host it somewhere on your server. Next, you can add the snippet like this:

<script src="/path/to/pirsch-scroll-depth.js"
            id="pascrode"
            data-steps="10"
            data-words="500"
            data-title="Home"></script>

Of course, you need to adjust the src attribute to match your upload path. The “id” needs to be pascrode. data-steps will round the scroll depth (10 = 10%, 20%, …), while any other data-* attribute is tracked as is. You can use this for the word count or title. data-event-name will change the event name (“Scroll Depth” by default).

Let me know if you have any questions :slight_smile: