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

小编典典

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

reactjs

请注意，我仍在学习使用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>

我在这里想念什么吗，请帮忙

阅读 343

2020-07-22

共1个答案

小编典典

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

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

2020-07-22