如何使用 gatsby 的 Google 标签管理器插件？

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 文件并将以下内容粘贴到 plugins

下

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

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

但是，如果您只想使用 GTM 为您提供的 <script> 标签，那么您必须稍微自定义 gatsby 的 html.js 文件。基本上，它可以让你把任何你喜欢的东西放在你的任何其他 html 文件中。

Answer 2

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

npm 安装 gatsby-plugin-react-helmet react-helmet
将插件添加到 gatsby-config.js -> 插件：[gatsby-plugin-react-helmet]
在Seo.js文件中添加你的头部标签如下：

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

如何使用 gatsby 的 Google 标签管理器插件？

how to use the Google Tag Manager plugin for gatsby?

google-tag-manager

reactjs

gatsby