How to Track Custom Scroll Depth in GA4 (When 90% Isn't Enough)
GA4 tracks scrolling automatically, but it only gives you credit if the reader hits the very bottom of the page. If you are writing detailed digital marketing case studies, you need to know if people are reading 25%, 50%, or 75% of your content. Here is how to take control of your scroll data in 5 minutes.
The "Prompt-to-Practice" Secret: Don't get stuck searching for outdated GA4 tutorials. Here is the exact prompt I used to generate the tracking code for this setup:
"Write a simple, lightweight JavaScript snippet that calculates page scroll depth. When the user reaches 50% of the page, fire a standard GA4
gtagevent named 'custom_scroll' with a parameter for the percentage. Ensure it only fires once per page load."
The Real-World Example: I recently published a detailed Omnichannel Visibility Strategy. I wanted to know if readers were actually making it past the introduction to the core framework. By implementing a 50% scroll tracker, I could see exactly where my audience was dropping off and improve my writing layout.
[toc]
The Blueprint to Schema Markup: Dominating SEO & AEO
Tracking scroll depth is just the beginning. Learn how to translate your content into a machine-readable format to dominate Google AI Overviews and traditional search results.
Read the Full Blueprint →The 3-Step Implementation
Step 1: Copy the Custom Script.
Add this lightweight JavaScript directly into your Blogspot theme, ideally right above the closing </body> tag.
The Blogger / Blogspot Code (Prevents XML Errors)
If you are pasting this into a Blogger/Blogspot theme, you cannot use standard JavaScript. Blogger's strict XML parser will crash when it sees standard math symbols. You must use this version, which includes a special CDATA wrapper to hide the code from the parser and prevent errors.
<div id="ga4-custom-scroll-tracker">
<script type="text/javascript">
//<![CDATA[
let scroll50Fired = false;
window.addEventListener('scroll', function() {
let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrollPercentage = (window.scrollY / scrollHeight) * 100;
// The CDATA wrapper allows us to use standard JavaScript math symbols (>= and &&)
if (scrollPercentage >= 50 && !scroll50Fired) {
gtag('event', 'custom_scroll', {
'percent_scrolled': '50',
'content_type': 'blog_post'
});
scroll50Fired = true;
}
});
//]]>
</script>
</div>The Universal Code (For WordPress, Shopify & Custom Sites)
If you are using a standard website platform like WordPress, Wix, or a custom HTML site, you do not need any special wrappers. You can paste this raw JavaScript directly into your site's footer (right before the closing </body> tag).
<script>
let scroll50Fired = false;
window.addEventListener('scroll', function() {
let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrollPercentage = (window.scrollY / scrollHeight) * 100;
// Use standard JavaScript math symbols (>= and &&)
if (scrollPercentage >= 50 && !scroll50Fired) {
gtag('event', 'custom_scroll', {
'percent_scrolled': '50',
'content_type': 'blog_post'
});
scroll50Fired = true;
}
});
</script>Save your theme with this new block.
Then, open your blog post, press F12 to open the developer console, and scroll down. You should immediately see the "SUCCESS" message in your browser console, followed by the event popping into your GA4 DebugView!
Step 2: Register the Custom Parameter in GA4 Sending the data from your blog is only half the battle; GA4 needs to know how to catch it.
Go to your GA4 Admin panel.
Click Custom definitions > Custom dimensions.
Click Create custom dimension.
Name it
Percent Scrolled, set the Scope toEvent, and typepercent_scrolledexactly as it appears in the code for the Event parameter.
Step 3: Verify the Data in DebugView Never assume your code works until you see it in GA4.
Open GA4 Admin > DebugView.
Open your blog in a new tab and scroll exactly halfway down the page.
Flip back to GA4. Within seconds, you will see a blue icon pop up on the timeline labeled
custom_scroll. Click it to verify your50parameter passed through successfully!
Final Thoughts: Taking Control of Your Data
Relying on default GA4 settings means you are only getting half the story. By taking five minutes to implement this custom 50% scroll tracker, you have successfully taken control of your analytics. You now have the exact data you need to see if your content is actually capturing attention, or if readers are dropping off before your main call-to-action.
Once you master this basic custom event structure, you can use the exact same framework to track file downloads, video plays, or specific button clicks.
What is the next custom event you want to set up on your site? Drop a comment below, and I might write the exact code snippet for you in my next guide!
Frequently Asked Questions
Why does GA4 only track scroll depth at 90%? By default, Google Analytics 4 includes an "enhanced measurement" scroll event, but it is strictly hardcoded to trigger only when a user reaches the 90% mark of a page. If a reader consumes 75% of your article and clicks a link, GA4 will not record them as having scrolled at all. To track 25%, 50%, or 75% scroll depths, you must implement a custom JavaScript event.
How do I track 50% scroll depth in GA4?
You can track a 50% scroll depth by adding a lightweight JavaScript listener to your website that calculates the page height. When the user's scroll percentage crosses the 50 mark, the script fires a standard gtag custom event. You then register the percent_scrolled parameter as a Custom Dimension in your GA4 Admin panel to view the data in your reports based on your exact specifications.
Why does my tracking code cause an XML error in Blogger?
Blogger uses a very strict XML parser for its themes. When you paste standard JavaScript that includes math symbols like the Greater Than sign or the logical AND (&&), the parser crashes. To fix this, you must wrap your JavaScript inside a CDATA tag, which acts as an invisibility cloak and hides the raw symbols from the Blogger theme editor.
Why isn't my custom GA4 event showing up in DebugView?
If your custom event is not appearing in DebugView, it usually means your browser is not sending the required debug signal to Google. Standard website traffic is filtered out of DebugView to keep the timeline clean. To fix this, use the Google Tag Assistant to connect to your site, or append ?_dbg=1 to your URL to force the debug mode to activate.
Want More Traffic & Leads?
Get a custom SEO & AI growth strategy for your business. No guesswork, just real results.
Get Your Free Strategy
Comments
Post a Comment