CODEWITHSUNDEEP
reactjsgoogle-analyticssingle-page-applicationgoogle-tag-managergatsby
Michał Styś
Michał Styś

Reputation: 1822

Scroll depth GTM - Gatsby

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?

Upvotes: 9

Views: 1760

Answers (2)

Ahmed Elazazy
Ahmed Elazazy

Reputation: 484

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

Upvotes: 2

Andi
Andi

Reputation: 307

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.

Upvotes: 3

Related Questions