Question

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

具体而言，单击<Link href={...}><a>text</a></Link>将刷新整个页面。我怀疑GTM在对<a>标签进行了某些操作，以便跟踪用户活动。

我已在此处复制了该问题：https://codesandbox.io/s/q88owlwn7q

要检查Next.js动态导航何时正常工作，我在Router.events.on中添加了一些./src/navigation.js回调，这些回调调用了已触发的事件console.log。
要包含或不包含GTM，请从<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链接中找到完整示例）

Answer 1

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

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

例如

{loaded && <script ...}

Answer 2

为了让自己更简单一些，有一个名为 react-gtm-module 的好插件，它消除了配置的痛苦

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

Google跟踪代码管理器破坏了Next.js链接

2 个答案: