如何使用 gatsby 的 Google 標簽管理器插件？

Question

請注意，我仍在學習使用 Gatsby 和 React。

我一直在嘗試弄清楚如何正確使用 Gatsbyjs 的 Google 標簽管理器插件將跟蹤代碼插入我的應用程序。

插件的官方文檔並沒有提供很多見解和例子，所以我不確定我是否完全理解它。

我想要做的是在我的應用程序中插入兩個 GTM 跟蹤代碼，一個在<head>中，一個在<body>中。 使用 static 站點方法，我可以將 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

如果您打算使用問題中提到的插件，那么您只需將該插件插入到插件屬性中的gatsby-config.js文件中即可。

但是，如果您只想插入 GTM 為您提供的<script>標簽，那么您必須稍微自定義html.js文件。 基本上，它可以讓您在任何其他 html 文件中放入任何您喜歡的內容。

Answer 2

我也為同樣的問題而苦苦掙扎。 我找到了反應頭盔的解決方案。 以下是步驟：

npm 安裝 gatsby-plugin-react-helmet react-helmet
將插件添加到 gatsby-config.js -> plugins: [ 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 標簽管理器插件？

問題描述

2 個解決方案

解決方案1
3 已采納 2018-10-18 23:29:13

解決方案2
0 2022-04-01 08:49:51

如何使用 gatsby 的 Google 標簽管理器插件？

問題描述

2 個解決方案

解決方案1 3 已采納 2018-10-18 23:29:13

解決方案2 0 2022-04-01 08:49:51

解決方案1
3 已采納 2018-10-18 23:29:13

解決方案2
0 2022-04-01 08:49:51