在 NextJs（启用 SSR）应用程序上注册路由更改事件时遇到问题。我在 GTM 中使用历史更改事件触发器。
使用react-gtm-module初始化 Google 标签管理器。
问题：事件在装载时触发，路线例如。www.site.com/product/123 但是当我从页面 /product/123/ 导航到像 /product/124/ 这样的页面时，事件不会触发。
产品页面：
return (
<div>
<div>{props.title}</div>
<Link href="/product/[pid]" as={`/product/124`}>
<a>Another product (should trigger event here, but doesn't)</a>
</Link>
</div>
)
我曾尝试将此添加到 _app.js (componentDidMount)
import Router from 'next/router';
...
componentDidMount () {
...
if (process.browser) {
Router.onRouteChangeComplete = url => {
window.history.pushState({}, document.title, url);
};
}
在 NextJs 中这样做的正确方法是什么？
您必须在每个页面上注入您的标签管理器脚本。由于 _document.js 是每个页面的包装器，因此您应该将 GTM 脚本添加到 _document.js 的 head 部分，如下所示：
<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>
| 归档时间： |
|
| 查看次数： |
3351 次 |
| 最近记录： |