如何在 Gatsby.js 中为 Google Analytics 添加多个跟踪 ID？答案

【问题标题】：How to Add multiple Tracking ID for Google Analytics in Gatsby.js?如何在 Gatsby.js 中为 Google Analytics 添加多个跟踪 ID？
【发布时间】：2022-01-21 13:58:47
【问题描述】：

我早些时候在我的 gatsby 项目中使用 gatsby-plugin-google-gtag 添加 2 个 Google Analytics 跟踪 ID，它运行良好，但不幸的是，我的项目已经有 gatsby-plugin-google-analytics，它不支持多个跟踪 ID，就像文档中显示的 gtag 插件一样.所以我找到了一篇文章，他们说要把它放在 html.js 文件中，所以在Customizing-html.js 的文档中，我使用cp .cache/default-html.js src/html.js 将我的文件复制到了 src/ 现在我想知道将我得到的脚本放在哪里来自谷歌分析......另外，我已经安装了 react-helmet.. 那么使用哪种方式放置脚本？

手动在头部？像这样 -

import React from "react";
import PropTypes from "prop-types";

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}

        <script
          async
          src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-1"
        />
        <script
          dangerouslySetInnerHTML={{
            __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', 'UA-123456789-1');
          `,
          }}
        />
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  );
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
};

OR tbh Idk 我必须在 html.js 中的什么地方插入这个.. 可能？

<Helmet>
      {/* other stuff... */}

      {/* Global site tag (gtag.js) - Google Analytics  */}
      <script async src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}></script>
      <script>
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', "${googleAnalyticsId}");
        `}
      </script>
</Helmet>

不胜感激任何帮助或文章链接可供阅读，因为我对谷歌分析非常陌生。我的 gatsby.config.js 文件中已经有一个跟踪代码，就像 { resolve: "gatsby-plugin-google-analytics", options: { trackingId: "UA-123456789-3", head: true, anonymize: true }, }, 只需要帮助放置第二个跟踪代码。

【问题讨论】：

标签： reactjs google-analytics gatsby react-helmet gatsby-plugin

【解决方案1】：

Google Analytics 脚本应添加到<head> 标记内。理想情况下，这是由插件自动处理的。事实上，这正是 {props.headComponents}、{props.preBodyComponents} 和 {props.postBodyComponents} 所做的，它们操纵 Gatsby's SSR API onRenderBody 将您添加的脚本放置在 gatsby-config.js 中或手动放置在 gatsby-ssr.js 中。

如果您无法添加多个 gatsby-plugin-google-analytics 实例或使用 Google 跟踪代码管理器添加多个跟踪标识符，您可以照常使用 html.js。在这种情况下，您应该执行以下操作：

import React from "react";
import PropTypes from "prop-types";

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}

        <script
          async
          src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-1"
        />
      <script async src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}></script>
      <script>
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', "${googleAnalyticsId1}");
        `}
      </script>
      <script>
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', "${googleAnalyticsId2}");
        `}
      </script>
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  );
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
};

因为您已经可以直接访问<head> 标记，所以没有理由使用Helmet 组件，其目的是在<head> 标记内公开和添加任何组件中包含的任何内容。在这种情况下，您可以直接访问它，因此只需将其添加到此处即可。

完成后，由于您是手动添加跟踪标识符，因此您可以摆脱 gatsby-plugin-google-analytics 和相关未使用的插件。

【讨论】：

好吧，我与处理 GA 面板的人核实过，他说只有我脑海中的跟踪 ID 正在跟踪头中的代码，而不是我的配置文件中的代码。太感谢了。我会像上面显示的那样添加第二个跟踪器！即两者都在头部。