Custom Events for % of Page Read

[bendrick92]

I recently re-built my blog and have been leveraging Plausible pretty heavily to help me determine which content is most popular, and what areas my site is performing best. Specifically, figuring out what percentage of my posts readers are actually consuming.

After poking around the docs, I was messing around with custom properties on custom events last night and had some good success! I created a few invisible <div> "markers" and positioned them absolutely at 1%, 50%, and 100% vertically in my blog post bodies, like this:

let halfwayMarker = document.createElement('div');
halfwayMarker.dataset.progress = '50%'
halfwayMarker.className = 'invisible absolute top-1/2';
article.prepend(halfwayMarker);

Then, I created an IntersectionObserver to monitor these markers and trigger a Plausible Custom Event like so:

plausible('Post Read Progress', { props: { page: window.location.pathname, progress: entry.target.dataset.progress } })

In testing, this appears to be working great! The only downside is how the custom properties are organized on the Plausible dashboard; I can see the individual pages that trigger the events (the page prop) OR the % of progress that triggered the event (the progress prop):

The progress property is useful enough, as I can see that so far a majority of people seem to be bouncing away from the page before consuming 50% of the content. But I can't determine which pages are performing better than others.

Does anyone have any ideas on how I could better leverage customer properties for this?