Question

我有一个与Next.js框架的工作方式有关的问题。（但这类似于任何具有动态内容加载功能的React应用）

加载GTM脚本时，它将事件绑定到DOM元素。

该GTM脚本应该可以运行一次，并且对动态DOM加载不友好，因为它不会将事件绑定到新添加的DOM元素上。

例如，如果从页面A导航到页面B，则保留公共元素（页眉，页脚等）的事件，但是主要内容已更改，并且没有GTM事件绑定到这些元素。

为了防止这种情况，我入侵了GTM，并使其相信它尚未初始化。因此，在每个客户端导航中，它会再次绑定所有事件。

Router.onRouteChangeComplete = () => {
  if (isBrowser() && typeof window.gtag !== undefined) {
    ga_pageview();

    // XXX Destroy all data of GTM, which will make it refresh all bindings (events) the next time GTM.initialize is called
    // This is a hack to make GTM works with SPA, because otherwise events don't trigger because DOM events are removed when Next.js load dynamic parts of the DOM
    delete window.google_tag_manager;
  }
};

由于这次黑客攻击，我的活动被触发了。但是，现在，GTM将这些事件绑定到没有多次更改的部分，并最终为同一点击触发3个相同的事件。

我试图找出防止它的方法，但是我看不到任何好的或简单的解决方案。

Answer 1

您需要做的是利用GTM中的内置历史记录触发器并从SPA中推送历史记录更改，或者利用GTM中的数据层并将“虚拟综合浏览量”事件推送到数据层以跟踪这些“综合浏览量”。您需要更多指导，我们很乐意提供屏幕截图。

避免多次触发事件Google标记管理器-Next.js

1 个答案: