Reactjs 如何为盖茨比使用谷歌标签管理器插件？

请注意，我仍在学习使用盖茨比&React

我一直在试图找出如何正确使用谷歌标签管理器插件为盖茨比JS插入跟踪代码到我的应用程序

插件的设计没有提供太多的见解和例子，所以我不确定我是否完全理解它

我想做的是在我的应用程序中插入两个GTM跟踪代码，一个在

中，另一个在

中。使用静态站点方法，我可以将GTM跟踪代码复制并粘贴到我的HTML文档中，但是，使用Gatsby&React，它不能以这种方式工作

例如，我想在

看起来我唯一需要做的就是用我自己的GTM-ID替换“你的谷歌管理者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>

---

如果我在这里遗漏了什么，请帮助

如果您要使用问题中提到的插件，那么您可以将该插件插入

gatsby config.js

文件中

---

但是，如果您只想使用GTM提供的

标记，那么您必须稍微定制一下盖茨比的文件。基本上，它可以让您在任何其他html文件中放入任何您喜欢的内容。

谢谢您的回复。我的问题是如何正确配置插件，这样我就可以实现我想要的结果。我按照官方示例替换了GTM ID，但问题是生成的脚本与google生成的脚本不匹配。好的，我只是在我的机器上测试了它。如果您没有使用

可选GTM环境详细信息

，请继续并删除它们。另外，别忘了检查你的adblocker设置。更严格的AdBlocker将阻止GTM。最后，如果它没有出现在

gatsby develope

上，那么请尝试使用

gatsby build

。在此基础上，我想知道是否有人知道使用插件v/s直接通过html.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",
    },
  },
]

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