如何为 gatsby 使用 Google Tag Manager 插件？答案

【问题标题】：how to use the Google Tag Manager plugin for gatsby?如何为 gatsby 使用 Google Tag Manager 插件？
【发布时间】：2019-03-23 20:07:35
【问题描述】：

请注意，我仍在学习使用 Gatsby 和 React。

我一直在尝试弄清楚如何正确使用 Google Tag Manager Plugin for Gatsbyjs 将跟踪代码插入我的应用程序。

插件的official documentation并没有提供很多见解和例子，所以我不确定我是否完全理解。

我想做的是在我的应用程序中插入两个 GTM 跟踪代码，一个在 <head> 中，一个在 <body> 中。使用静态站点方法，我可以将 GTM 跟踪代码复制并粘贴到我的 HTML 文档中，但是，使用 Gatsby 和 React，它就不能这样工作。

比如我想在<head>中插入如下代码

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

我打开 gatsby-config.js 文件并将以下内容粘贴到插件下

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-google-tagmanager`,
    options: {
      id: "YOUR_GOOGLE_TAGMANAGER_ID",

      // Include GTM in development.
      // Defaults to false meaning GTM will only be loaded in production.
      includeInDevelopment: false,

      // Specify optional GTM environment details.
      gtmAuth: "YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_AUTH_STRING",
      gtmPreview: "YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_PREVIEW_NAME",
    },
  },
]

看来我在这里唯一需要做的就是用我自己的 GTM-ID 替换“YOUR_GOOGLE_TAGMANAGER_ID”。但是，在我完成此操作并在构建后检查源代码后，它会显示

<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX;gtm_auth=YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_AUTH_STRING&amp;gtm_preview=YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_PREVIEW_NAME&amp;gtm_cookies_win=x"></script>

我这里有什么遗漏吗，请帮忙

【问题讨论】：

标签： reactjs google-tag-manager gatsby

【解决方案1】：

如果您要使用问题中提到的插件，那么您可以将该插件插入到 gatsby-config.js 文件中的 plugin property 中。

但是，如果您只想添加 GTM 为您提供的 <script> 标签，那么您必须稍微自定义 gatsby 的 html.js 文件。基本上，它可以让您在任何其他 html 文件中放入您想要的任何内容。

【讨论】：

感谢您的回复。我的问题是如何正确配置插件，以便达到我想要的结果。我按照官方的例子，替换了GTM ID，但是问题是生成的脚本和google生成的脚本不匹配。
好的，我刚刚在我的机器上测试过了。如果您不使用optional GTM environmental details，请继续删除它们。另外，不要忘记检查您的广告拦截器设置。更严格的广告拦截器将阻止 GTM。最后，如果它没有出现在 gatsby develop 上，请尝试使用 gatsby build。
对此，我很想知道是否有人知道使用插件与直接通过html.js插入相同的插件有什么区别？
我的问题和他类似，我正在使用 gatsby-plugin-google-tagmanager 插件，但现在我想根据某些路由条件再添加一个 GTM 标签，我认为，我不能在 gatsby-config 中执行（如果我错了，请纠正我）。请建议我是否可以在某些条件或任何其他解决方案下将 2 个 gtm 标签传递给插件？