Add an option called fireGtmOnFirstPageLoad in gtm package for fixing the "Duplicate tracking of the first page" when GA4 and GTM both tracks the page analytics

[som-matrix]

Hello folks, wanted to start a discussion on how we can prevent the duplicate tracking of the first page view when we are using both GA4 and GTM for our application analytics.

Goal : First page view should be tracked either by GA4 or GTM , so in our case we can control GTM package to stop sending the first page view when gatsby detects that it is the first page i.e (prevLocation === null)

Reference : In here -> https://www.bounteous.com/insights/2018/03/30/single-page-applications-google-analytics , please check the Duplicate Tracking of the First Page section.

How to achieve this feature

• So first we will go to packages/gatsby-plugin-google-tagmanager and in gatsby-node.js we will add a option called
  fireGtmOnFirstPageLoad which will be true by default.

• then in we need to used this option in onRouteUpdate method in gatsby-browser.js.

  // gatsby-node.js
   fireGtmOnFirstPageLoad: Joi.boolean()
      .default(true)
      .description(
        `Option for not sending page view on first page load to Google Tag Manager`
      ),
      
  // gatsby-browser.js
    export function onRouteUpdate({ prevLocation }, pluginOptions) {
    if (
       process.env.NODE_ENV === `production` ||
        pluginOptions.includeInDevelopment
    ) {
       // so when gatsby detects that this is the first page load and this option is false
       // then do not fire the gtm event.
       // Note: In every other case it should fire.
       const isFirstPage = prevLocation === null;
      let fireGtm = true;
       if (isFirstPage && !pluginOptions.fireGtmOnFirstPageLoad) {
        fireGtm = false;
      }
      if (fireGtm) {
        // wrap inside a timeout to ensure the title has properly been changed
         setTimeout(() => {
          const data = pluginOptions.dataLayerName
          ? window[pluginOptions.dataLayerName]
          : window.dataLayer;
          const eventName = pluginOptions.routeChangeEventName
          ? pluginOptions.routeChangeEventName
          : `gatsby-route-change`;
        data.push({ event: eventName });
        }, 50);
      }
    }
  

• Let's discuss the above logic with some metrics
  for eg: condition = isFirstPage && !pluginOptions.fireGtmOnFirstPageLoad
  // fireGtmOnFirstPageLoad = true
  // User visit gatsbyjs.com: (prevLocation will be blank): condition = false , so fireGtm = true
  // User goes to /support : (prevLocation will not be null): condition = false, so fireGtm = true

  // fireGtmOnFirstPageLoad = false
  // User visit gatsbyjs.com: (prevLocation will be blank): condition = true, fireGtm = false
  // User clicks on /support: (prevLocation will not be null): condition = false , fireGtm = true

[som-matrix]

@LekoArts please check the above discussion