时间戳

首页 > 解决方案 > GTM 不会在页面导航上重置 dataLayer

next.js - GTM 不会在页面导航上重置 dataLayer

问题描述

我正在尝试将 GTM 集成到我的单页 NextJS 应用程序中。我按照建议将我的脚本注入到 _document.js 中：

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            dangerouslySetInnerHTML={{
              __html: `window.dataLayer = window.dataLayer || [];`
            }} />
          <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','${getGtmTrackingId()}');`,
        }} />
        </Head>
        <body>
            <noscript
              dangerouslySetInnerHTML={{
              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${getGtmTrackingId()}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
            }}
        />
        <Main />
        </body>
    </Html>

我的问题是：每次我浏览页面时，我都会看到 dataLayer 仍然包含在前几页上触发的事件。我需要在每次 url 更改时重置我的 dataLayer 吗？如果我没有在 url 更改时重置我的 dataLayer 或者是否可以包含所有触发的事件，我是否会达到 GTM 的限制？

我尝试像这样重置 dataLayer，但如果我这样做，gtm 会停止发送事件。

在我的 _app.js 文件中：

useEffect(() => {
    router.events.on('routeChangeStart',() => {window.dataLayer = []});
}, [router.events]);

谢谢。

标签： next.jssingle-page-applicationgoogle-tag-manager

解决方案

在推送页面查看事件之前尝试一下：

window.dataLayer.push(() => {
  window.google_tag_manager["your_container_id"].dataLayer.reset()
})

推荐阅读