文章/答案/技术大牛

发布

社区首页 >问答首页 >GTM与NextJs

问GTM与NextJs
EN

Stack Overflow用户

提问于 2020-02-12 17:11:23

回答 2查看 4.7K关注 0票数 2

在NextJs (已启用SSR)应用程序上注册路由更改事件有困难。我正在使用历史记录更改事件触发器。

使用react-gtm-module初始化。

事件发生在山上，路线如：www.site.com/product/123，但是当从page /product/123/ i导航到/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中，正确的方法是什么？

reactjs

next.js

回答 2

Stack Overflow用户

发布于 2020-02-13 11:16:42

您必须在每个页面上插入标记管理器脚本。由于_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>

票数 5

Stack Overflow用户

发布于 2021-08-11 09:18:19

这些链接不一定对上面提到的包有帮助，但是对于其他稍后到达这里的用户来说，如果他们想要一个没有额外包的解决方案：：

下面是一个演示如何实现GTM的示例repo。

将侦听器附加到使用next/router 路由更改，并调用更新处理程序：

const router = useRouter()

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

组件，其API旨在简化内联脚本的使用。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60193714

复制

相似问题

问GTM与NextJs
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GTM与NextJsEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GTM与NextJs
EN