如何在盖茨比.js中为谷歌分析添加多个跟踪ID?

我之前在我的盖茨比项目中使用了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/，现在我想知道在哪里放置我从谷歌分析获得的脚本......另外，我已经安装了反应头盔。那么用哪种方式来放置脚本呢？

手动在脑海中？像这样——

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>

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

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

如果您无法使用 Google 跟踪代码管理器添加多个gatsby-plugin-google-analytics实例或添加多个跟踪标识符，则可以像现在一样使用该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和相关未使用的插件。

相关内容

最新更新

热门标签：