Google 跟踪代码管理器无法使用“react-gtm-module”在 Next.js 中进行页面更改

Question

我正在开发 Next.js 应用程序，并使用react-gtm-module 包集成了 Google 跟踪代码管理器 (GTM)。在调试模式下首次加载应用程序时，无论从哪个页面启动，一切都可以正常运行。但是，当我导航到应用程序中的不同页面时，标签停止工作。 Google Tags 确实检测到页面更改，但它在标签/事件上显示删除线，且未提供其他信息。

我在 GTM 中设置了触发器来检测所有页面更改。下面是我用来初始化 GTM 和触发事件的代码结构：

import GTM from 'react-gtm-module';

useEffect(() => {
  const tagManagerArgs = {
    gtmId: 'GTM-NTFG983',
    // Other optional GTM parameters
  };
  GTM.initialize(tagManagerArgs);
}, []);

export function gtmEvent(event: string) {
  if (!window.dataLayer) return;
  window.dataLayer.push({ event });
}

我已通过日志确认代码在适当的时间被触发。此外，我已确保按照react-gtm-module 的文档将 script 和 noscript 标记正确添加到我的代码中。使用网络检查器，我通过 200 状态响应验证了数据层的初始化和添加是否成功完成。尽管进行了这些验证，标签在页面更改时仍无法按预期运行。

我正在寻求有关如何解决此问题的指导，或有关为什么会发生这种情况以及如何纠正它的任何见解。 Next.js、react-gtm-module 或 GTM 是否有任何特定内容可能导致此行为？任何帮助或建议将不胜感激。

Answer 1

您的设置听起来与我们的 React 和 Next.js 类似。不久前我们也遇到过类似的问题。对于我们来说，我们的网站表现为单页面应用程序，因此第一个页面视图会触发，因为它是常规页面加载；后续的页面浏览量不会触发，因为即使 URL 发生变化，它也不是真正的页面浏览量，至少不是标签管理器理解的那种意义上的。

我们的解决方案是设置额外的触发器以根据历史记录更改再次触发脚本。我们为

push

创建了这两个触发器，它在单击页面上的按钮或链接后触发： 和

pop

跟踪后退和前进按钮点击。

并将它们添加到我们需要在每个页面视图上触发的所有标签中：

我不确定这是否是最好的解决方案，但它对我们有用。