Google Tag Manager breaks Next.js Link

Question

我正在使用gtm进行next.js网站上的分析，我发现gtm break next.js <Link>功能。

具体来说，单击<Link href={...}><a>text</a></Link>将进行整页刷新。我怀疑GTM正在对<a>标签做某事以跟踪用户活动。

我已经在此处重现了该问题：https：//codesandbox.io/s/q888888wn7q

• 要检查Next.js动态导航何时工作，我在./src/navigation.js中添加了一些Router.events.on回调，该回调与已触发的事件一起调用console.log。
• 要么包含GTM或不包含GTM，请从./pages/document.js中的位置添加/删除<GtagScript/>

注意以下内容：

• 当GTM排除在外时，Next.js正常工作。

• 当包括GTM时，动态导航将被打破（完全刷新了）。

用于快速参考GTM包括以下内容：

<script async
        src={`https://www.googletagmanager.com/gtm.js?id=${GA_TRACKING_ID}`}
    />
<script
        dangerouslySetInnerHTML={{
            __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${GA_TRACKING_ID}');
        `}}
</script>

（codesandbox链接中可用的完整示例）

Answer 1

要防止这种情况发生，我必须让 https://www.googletagmanager.com/gtm.js?id=...加载到客户端，然后在组件安装后。

1. 要加载客户端，请在_app.js文件中插入<script ...标签。

2. 在第一个渲染后加载它，加载取决于组件已安装（并渲染一次）后更新的状态变量。因此，在您的componentDidMount或useEffect钩中。

，例如

{loaded && <script ...}

Answer 2

为了使自己更简单一些，有一个名为react-gtm模块的插件，它使config的痛苦脱离了此

https://www.npmjs.com/package/reeact-gtm-module