在开发中使用 gatsby-plugin-google-tag manager

Question

我的 gatsby-config.ts 中有一个 gatsby 项目设置和 gatsby-plugin-google-tagmanager 设置，使用以下配置：

    ...
    {
        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",
        }
    },
    ...

在开发模式下工作时，dataLayer 脚本被注入 <head> 和 <body> 但推送到数据层似乎没有效果并且 routeChange 事件设置在插件配置中未发出。

我试过使用 tagassistant.google.com 网站、dataSlayer 和 tag assistant legacy chrome 插件，但它们都好像数据层未激活一样或初始化。当站点在我们的开发服务器上运行时，事件将被触发并正常运行。

Answer 1

看来我也是这个问题的一部分。看起来尽管禁用了我的广告拦截器等，但某些 chrome 功能（或我这边的 getsby 错误配置）仍然阻止在开发模式下注入脚本初始化 dataLayer （一切正常生产中很好）。

在 chrome 上使用隐身模式允许对前者进行初始化并将点击发送到 gtm 确实回答了问题，但仍然测试很不切实际。

另请注意，我未能使 devmode 在 firefox 上运行（即使在禁用跟踪保护的私有 window 中）。我将在 gatsby github 回购上填写一个问题并更新此回复 if/whenever 我收到了关于此事的回复。

在开发中使用 gatsby-plugin-google-tag manager

Using gatsby-plugin-google-tagmanager in developement

reactjs

gatsby

google-tag-manager

gatsby-plugin