如何在 Gatsby.js 中为 Google 分析添加多个跟踪 ID？

Question

我使用 gatsby-plugin-google-gtag earlier in my gatsby project to add 2 Google Analytics tracking ID and it was working fine but unfortunately, my project already has gatsby-plugin-google-analytics which doesn't support multiple tracking ID like the gtag plugin shows in docs. So I found an article where they say to put it inside the html.js file so in the docs here of Customizing-html.js 我使用 cp .cache/default-html.js src/html.js 将我的文件复制到 src/ 现在我想知道我从 google analytics 获得的脚本放在哪里...另外，我已经安装了 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,
};

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

感谢任何帮助或文章链接可供阅读，因为我是 google 分析的新手。我的 gatsby.config.js 文件中已经有一个跟踪代码，就像这样 { resolve: "gatsby-plugin-google-analytics", options: { trackingId: "UA-123456789-3", head: true, anonymize: true }, }, 只需要帮助输入第二个跟踪代码。

Answer 1

Google 分析脚本应添加到 <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 和相关的未使用插件。

如何在 Gatsby.js 中为 Google 分析添加多个跟踪 ID？

How to Add multiple Tracking ID for Google Analytics in Gatsby.js?

google-analytics

reactjs

gatsby

react-helmet

gatsby-plugin