如何在 Gatsby.js 中为 Google 分析添加多个跟踪 ID?
How to Add multiple Tracking ID for Google Analytics in Gatsby.js?
我使用 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 }, },
只需要帮助输入第二个跟踪代码。
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-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 }, },
只需要帮助输入第二个跟踪代码。
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
和相关的未使用插件。