GTM 不会在页面导航上重置 dataLayer答案

【问题标题】：GTM does not reset dataLayer on page navigationGTM 不会在页面导航上重置 dataLayer
【发布时间】：2021-02-12 13:18:16
【问题描述】：

我正在尝试将 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]);

谢谢。

【问题讨论】：

您找到解决方案了吗？ Nuxt.js 应用程序也存在同样的问题，即 dataLayer 变量在每个页面视图中不断增长。
@Eljas 不，我们没有找到解决方案，我们保持原样。

标签： next.js single-page-application google-tag-manager

【解决方案1】：

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

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

【讨论】：