Question

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

我一直在尝试找出如何正确使用Gatsbyjs的Google跟踪代码管理器插件在我的应用中插入跟踪代码。

该插件的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>

我在这里缺少什么，请帮助

Answer 1

如果您要使用问题中提到的插件，则只需将该插件插入plugin property内的gatsby-config.js文件中即可。

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

如何为gatsby使用Google跟踪代码管理器插件？

1 个答案: