我把Google Analytics整合到了Next。js -说,我遵循这些指南:
- https://frontend-digest.com/using-nextjs-with-google-analytics-and-typescript-620ba2359dea
- https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics
这工作得很好,现在的问题是我需要允许加载谷歌分析只有在cookie同意后,我存储我的cookie同意在localStorage目前简单的格式:
checkboxValues = {
necessary: true,
statistics: false,
marketing: false,
};
现在我需要检查localStorage.getItem('acceptCookies');
并确保google analytics只在statistics: true
时加载。
import Document, { Html, Head, Main, NextScript } from "next/document";
import { GA_TRACKING_ID } from "../utils/gtag";
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
{/* Global Site Tag (gtag.js) - Google Analytics */}
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
对于我来说,在render()
之前检查localStorage是不可能的,因为localStorage只在componentDidMount
之后可用。被这个卡住了,有方向吗?
2条答案
按热度按时间cl25kdpy1#
有内置的同意功能:https://developers.google.com/gtagjs/devguide/consent
所以在你的例子中
所以它看起来像这样:
或者,您可以将“config”行 Package 在类似的同意行中,尽管这可能不是一个“完整”的解决方案,因为它只会停止页面浏览:
cx6n0qe32#
根据this blog post,您可以创建一个Cookie横幅组件,用于更新Google Analytics同意:
当用户接受cookie同意时,只需调用
onClick={() => setCookieConsent(true)}
。更新:storageHelper看起来像这样: