Best way to detect scroll level in interactive essay?

I think you are looking for user behavior insights as opposed to tracking inbound traffic.
Seems like a super fast setup to me. Just add some scroll position code on your page:
https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
Have a tracking script (not GA) such as:
https://mixpanel.com/
https://heap.io/
https://amplitude.com/
Just send the custom event you wish to track (i.e. fired off at y position).
If you want to get super specific (i.e. scroll positioning is getting different results on mobile, for example) you can use JS code to determine if a div is in viewport:
document.querySelector('div').getBoundingClientRect().top; // 750

You should be able to do this with JavaScript. I remember I built something like that a few years ago in a previous job and I used JS only.
I would get what's visible on the screen and it's content to compare to the full document. Then it's easy to calculate the percentage.

Have you looked at Hotjar?

Hi josh,

I am working on an app that does exactly this, more specifically it generates mouse movement and scroll heatmaps to see where users are looking. userTrack is a premium self-hosted analytics platform, so you need to have a server with PHP+MySQL to host it.

Currently I am working on v3 of usertrack.net which will have a lot more analytics features and a new UI.

Let me know if you have any specific questions about your use case!

PS: I am really excited about almost releasing v3, I think it will be something big. 🎉

yeah came here to say pretty much what @peterj1994 said

one other metric you could work with is time spent on the page. I wouldn't recommend firing off an event every second but maybe you could set thresholds like 5, 15, 30, 60, 120+ seconds, etc.

You shouldn't need any backend to track scroll position, although you may need one to save it.

You can simply track the scroll event, and then fire off whatever you want at that point. It's easy enough to get the current offset and then compare that to total height if you want. Or, you could attach metadata (like special ids used only for this purpose) to your content and fire off events as they become visible/invisible.

At this point you can save that data however you want. Querying some sort of backend and sticking it into a DB is probably easiest. You may be able to get this into GA with some sort of custom event, but I'm not an expert here so that's just a guess.

When I was working for an employer we used an on-premise version of Piwik to gather user behavior, and it included metrics for impressions and interactions. So when something scrolled into view it recorded an impression, and when they tapped/clicked on something it recorded an interaction. All we had to do was add a data-track-content attribute to the HTML elements we wanted impression metrics for, and configure the client Javascript library to send them to the server. See https://matomo.org/docs/content-tracking/#tracking-content info.

If you marked each section (or marked subsections within each section) with data-track-content you would know how much the user saw.

There was also a feature where you as the Piwik account owner could bring up your own web page and see how many impressions/interactions there were for each section directly in your web page, so no need to do any analysis/visualization to figure out what's being viewed and what isn't.

Piwik was renamed to Matomo a couple years ago, and now I think they have a SaaS version so you wouldn't have to host it (although it looks like they still have an on-premise version if you need that).