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

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中的数据层并将“虚拟网页浏览”事件推送到数据层以跟踪这些“网页浏览量”。指导，我很乐意提供屏幕截图。