我早些時候在我的 gatsby 專案中使用gatsby-plugin-google-gtag添加 2 個 Google Analytics 跟蹤 ID，它作業正常，但不幸的是，我的專案已經有gatsby-plugin-google-analytics，它不支持多個跟蹤 ID，如gtag 插件顯示在檔案中。所以我找到了一篇文章，他們說要把它放在 html.js 檔案中，所以在Customizing-html.js的檔案中，我現在使用將我的檔案復制到 src/cp .cache/default-html.js src/html.js我想知道將我得到的腳本放在哪里谷歌分析......另外，我已經安裝了 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>非常感謝任何幫助或文章鏈接，因為我對谷歌分析非常陌生。我的 gatsby.config.js 檔案中已經有一個跟蹤代碼，所以 { resolve: "gatsby-plugin-google-analytics", options: { trackingId: "UA-123456789-3", head: true, anonymize: true }, },只需要幫助將第二個跟蹤代碼放入。
uj5u.com熱心網友回復：
應在<head>標簽內添加 Google Analytics 腳本。理想情況下，這是由插件自動處理的。事實上，這正是 {props.headComponents}、{props.preBodyComponents} 和 {props.postBodyComponents} 所做的，它們操縱Gatsby 的 SSR APIonRenderBody將您添加的腳本放置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相關未使用的插件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/417653.html
標籤：