Search code examples
reactjsgatsbygoogle-tag-managergatsby-plugin

Using gatsby-plugin-google-tagmanager in developement

I have a gatsby project setup and the gatsby-plugin-google-tagmanager setup in my gatsby-config.ts using the following configuration:

    ...
    {
        resolve: 'gatsby-plugin-google-tagmanager',
        // @see https://www.gatsbyjs.com/plugins/gatsby-plugin-google-tagmanager/
        options: {
            id: gtm.id,
            includeInDevelopment: true,
            defaultDataLayer: function () {
                return {
                    env: gtm.env
                }
            },
            routeChangeEventName: "page_vue",
        }
    },
    ...

When working in developpement mode, the dataLayer script is injected in the <head> and the <body> but the pushes to the datalayer seems to have no effect and the routeChange event setup in the plugin configuration is not emitted.

I've tried using the tagassistant.google.com website, the dataSlayer and tag assistant legacy chrome plugins but both of them are acting as if the datalayer wasn't active or initialized. The events are fired and functional when the site is running on our developpement servers.

Solution

  • So it seems I'm part of the problem on this one. It looks like despite having disabled my adblockers and such, some chrome feature (or a getsby misconfiguration on my side) is still preventing the initialisation of the dataLayer by the injected script while in developement mode (everything works fine in production).

    Using the incognito mode on chrome allows the former to be initialized and to send the hits to gtm witch does answer the question but still makes the testing quite unpractical.

    Also note that I didn't manage to make the devmode work on firefox (even in private window with the tracking protection disabled). I'll fill an issue on the gatsby github repo and update this response if/whenever I recieve a response on the matter.