gpt4 book ai didi

google-tag-manager - 如何通过 Google Tag Manager for Next-Js 设置 Google Analytics?

转载 作者:行者123 更新时间:2023-12-02 19:42:54 26 4
gpt4 key购买 nike

以前我使用react-ga npm 模块在我的下一个js 应用程序中插入谷歌分析。就是这样:

import ReactGA from 'react-ga'

export const initGA = () => {
ReactGA.initialize('UA-*******-*', {
titleCase: false
})
}

export const logPageView = () => {
if (window.location.href.split('?')[1]) {
ReactGA.set({page: window.location.pathname + '?' + window.location.href.split('?')[1]})
ReactGA.pageview(window.location.pathname + '?' + window.location.href.split('?')[1])
} else {
ReactGA.set({page: window.location.pathname})
ReactGA.pageview(window.location.pathname)
}
}

然后我在标题中调用 logPageView 函数(该函数已插入到我的应用程序的每个页面中),如下所示:

  componentDidMount () {
if (!window.GA_INITIALIZED) {
initGA()
window.GA_INITIALIZED = true
}
logPageView()
}
componentWillReceiveProps () {
if (!window.GA_INITIALIZED) {
initGA()
window.GA_INITIALIZED = true
}
logPageView()
}

现在我想使用 Google 跟踪代码管理器来处理 Analytics 页面 View 。我怎样才能做到这一点?

最佳答案

为了使用 Google 跟踪代码管理器,您应该在每个页面上注入(inject)跟踪代码管理器脚本。由于 _document.js 是每个页面的包装器,因此您应该将 GTM 脚本添加到 head 部分的 _document.js 中,如下所示:

<Head>
<script dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-*****');`,
}}>
</script>
...
</Head>

现在您已准备好在 next-js 应用中使用 Google 跟踪代码管理器。您应该只继续从 GTM 仪表板处理页面浏览量和其他与分析相关的内容。

要为单页应用程序(例如nextjs)设置Google Analytics pageview,您可以按照these步骤。

关于google-tag-manager - 如何通过 Google Tag Manager for Next-Js 设置 Google Analytics?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45848142/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com