Google 跟踪代码管理器中断 Next.js Link

Question

我在 Next.js 网站上使用 GTM 进行分析，我发现 GTM 破坏了 Next.js <Link> 功能。

具体来说，单击 <Link href={...}><a>text</a></Link> 将刷新整个页面。我怀疑 GTM 正在对 <a> 标签做一些事情以跟踪用户 activity.

我在这里重现了这个问题：https://codesandbox.io/s/q88owlwn7q

为了检查 Next.js 动态导航何时工作，我在 ./src/navigation.js 中添加了一些 Router.events.on 回调，这些回调调用 console.log 并触发了事件。
无论是否包含 GTM，add/remove <GtagScript/> 当前在 ./pages/document.js

注意以下几点：

排除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 link 中找到）

Answer 1

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

要在客户端加载，请在 _app.js 文件中插入 <script ... 标签。
要在第一次渲染后加载它，加载依赖于在组件安装（并渲染一次）时更新的状态变量。因此，在您的 componentDidMount 或 useEffect 挂钩中。

例如

{loaded && <script ...}

Answer 2

为了让你自己更简单一些，有一个名为 react-gtm-module 的插件可以减轻配置的痛苦

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

Google 跟踪代码管理器中断 Next.js Link

Google Tag Manager breaks Next.js Link

next.js