IT技术 - 如何使用 gatsby 的 Google Tag Manager 插件？ - 吾爱随笔录

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

我一直在尝试弄清楚如何正确使用 Gatsbyjs 的 Google 标签管理器插件将跟踪代码插入到我的应用程序中。

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

我想要做的是在我的应用程序中插入两个 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>

我在这里遗漏了什么，请帮忙