Scroll depth GTM - Gatsby

You can change your page view tracking from gtm.historyChange to manual data layer pushes of gtm.load, which is one of the three event types which resets the GTM scroll depth trigger.

If you installed gatsby-plugin-google-tagmanager it will fire an event with each route change: gatsby-route-change.

You need to fire gtm.load on every gatsby-route-change which will reset the scroll depth. (thanks @Andi for the hint)

Create a new trigger:

• GTM > Triggers > New >
• Give it a name, for example, Gatsby Route Change
• Trigger Type: Custom Event
• Event name: gatsby-route-change
• This trigger fires on: All Custom Events
• Then Save

Create a new tag:

• GTM > Tags > New
• Give it a name, for example, Fire GTM Load on Gatsby Route Change
• Tag Type: Custom HTML
• HTML:

<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'gtm.load' });</script>

• Firing Triggers: Select the newly created trigger: Gatsby Route Change
• Then save

When you preview the changes, when going from one page to another, you will see that

• Gatsby Route Change is being fired
• Window Loaded is being fired
• Scroll depth is now reset after each route change