Scroll depth GTM - Gatsby

Question

I have a problem with running of gatsby based pages with GTM scroll depth. The problem is that the gtm scroll depth isn't compatible with SPA and doesn't reset when moving to the next page. Does someone use any other script, to measure scroll depth, that is easy and fast to integrate with gatsby and gtm/ga?

Femoral

I'm running into this issue as well. I'd rather not fire a custom onScroll event from my gatsby site. Did you ever find a solution? – Marylynnmarylynne

Unfortunately no.. – Capetian

Same issue here. Did you find a solution? – Restaurant

Answer 1

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.

Goodyear

Answer 2

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

Juryman