logo标签列表

使用NextJs实现GTM

reactjsnext.js
3

在启用SSR的NextJs应用程序中注册路由更改事件时遇到了麻烦。

我正在使用GTM中的历史更改事件触发器。

使用react-gtm-module来初始化Google Tag Manager。

问题：当我从页面/product/123/导航到像/product/124/这样的页面时，事件不会触发，但是当挂载时，事件会随着路由（例如www.site.com/product/123）而触发。

产品页面：

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中，正确的做法是什么？
1
对于我来说，我使用了react-gtm-module，将其包含在_app.js中，然后设置GTM以在“页面”和“历史记录”更改时触发。因为这取决于您的应用程序设置方式，所以它可能是其中之一。但是这对我来说是必需的，并且在每次视图更改时都会触发。 - Richard
2个回答
5
您需要在每个页面上注入标签管理器脚本。由于_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>
但是它是通过react-gtm-module npm包注入的，我进行了初始化。否则，我在第一次渲染时将不会收到任何事件。 - Alex
3
这些链接不一定有助于上述提到的软件包，但是对于后来到达此处并想要解决方案而不需要额外软件包的其他用户：

这里有一个Next的示例存储库，展示了如何实现GTM。

使用next/router附加监听器以响应路由更改，并调用您的GTM更新处理程序：

const router = useRouter()

  useEffect(() => {
    router.events.on('routeChangeComplete', gtm.pageview)
    return () => {
      router.events.off('routeChangeComplete', gtm.pageview)
    }
  }, [router.events])

此外，自 Next 11 版本以来新增了 next/script 组件，其 API 旨在简化内联脚本的使用。

对我来说工作吧。改进可提高20点。 - Aommy Indy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接