如何在gatsby中使用Google Tag Manager插件？

Question

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

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

插件的官方文档没有提供很多见解和示例，所以我不确定我是否完全理解了它。

我想要做的是将两个GTM跟踪代码插入到我的应用程序中，一个在中，另一个在中。采用静态站点方法，我可以将GTM跟踪代码复制并粘贴到我的HTML文档中，但是，对于Gatsby和React，情况并非如此。

例如，我想将以下代码插入中：

<!-- 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>

我在这里漏掉了什么东西吗，请帮忙

- York Wang

Answer 1

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

然而，如果你只想插入GTM提供的<script>标签，那么你需要对gatsby的html.js文件进行一些自定义。基本上，它会让你像任何其他html文件一样随意放置任何东西。

- shriek

---

谢谢回复。我的问题是如何正确配置插件，以便我可以实现我想要的结果。我遵循了官方示例并替换了GTM ID，但问题是生成的脚本与Google生成的脚本不匹配。 - York Wang

好的，我刚在我的电脑上测试了一下。如果您没有使用“可选 GTM 环境细节”，那么请继续将它们删除。此外，请不要忘记检查您的广告拦截器设置。较严格的广告拦截器将阻止 GTM。最后，如果在“gatsby develop”中未显示，则请尝试使用“gatsby build”。 - shriek

关于这个问题，我想知道是否有人知道使用插件与直接通过html.js插入相同内容之间的区别？ - Karan Shah

我的问题与他类似，我正在使用gatsby-plugin-google-tagmanager插件，但现在我想根据某些路由条件添加一个更多的GTM标签，我认为我不能在gatsby-config中实现这一点（如果我错了，请纠正我）。请建议我是否可以在某些条件下传递2个gtm标签到插件或任何其他解决方案？ - Yash Vekaria

Answer 2

我也曾经遇到过同样的问题。我通过使用react-helmet找到了解决方案。以下是步骤：

1. npm install gatsby-plugin-react-helmet react-helmet
2. 将插件添加到gatsby-config.js中 -> plugins: [gatsby-plugin-react-helmet]
3. 在Seo.js文件中按照以下方式添加您的head标签：

import React from 'react'
import {Helmet} from "react-helmet"

const Seo = () => {

  return (
    <Helmet 
    title="Your title"
    description="Your description"
    meta={[
        {name:'google-site-verification', content:'copy your code from the Google Meta Tag'}
    ]}>  
    </Helmet>
  )
}

export default Seo

- Maks