如何在NextJS13中添加Google Tag Manager并解决页面跳转重复检测问题

问题根源 #

Next.js 13 App Router的客户端导航会触发history.pushState，若依赖GTM默认的History Change触发器，会因路由监听逻辑与框架特性冲突，导致页面跳转时重复捕获历史变更事件，进而重复统计页面访问。

解决方案 #

1. 确保GTM脚本仅加载一次 #

在根布局app/layout.js中注入GTM脚本，使用Next.js的Script组件控制加载时机，避免重复注入：

import Script from 'next/script';
import './globals.css';

export default function RootLayout({ children }) {
  const GTM_ID = 'GTM-XXXXXXX'; // 替换为你的GTM容器ID

  return (
    <html lang="zh-CN">
      <head>
        {/* GTM noscript 备用标签 */}
        <noscript>
          <iframe
            src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
            height="0"
            width="0"
            style={{ display: 'none', visibility: 'hidden' }}
          />
        </noscript>
        {/* GTM 核心脚本 */}
        <Script
          id="gtm-main-script"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
              })(window,document,'script','dataLayer','${GTM_ID}');
            `,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

2. 手动监听路由变化，发送自定义页面视图事件 #

创建客户端组件app/components/GTMPageView.js，通过Next.js的路由钩子监听路径变化，仅在实际路由变更时向GTM发送事件：

'use client';

import { useEffect, useState } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

export default function GTMPageView() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [prevFullPath, setPrevFullPath] = useState('');

  useEffect(() => {
    // 拼接完整路径（含查询参数）
    const currentFullPath = `${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
    
    // 避免路径未变化时重复发送事件
    if (currentFullPath !== prevFullPath) {
      window.dataLayer?.push({
        event: 'custom_page_view',
        page_path: currentFullPath,
        page_title: document.title,
      });
      setPrevFullPath(currentFullPath);
    }
  }, [pathname, searchParams]);

  return null;
}

将该组件引入根布局，确保全局生效：

// app/layout.js中添加
import GTMPageView from './components/GTMPageView';

export default function RootLayout({ children }) {
  // ... 原有代码
  return (
    <html lang="zh-CN">
      {/* ... head部分 */}
      <body>
        <GTMPageView />
        {children}
      </body>
    </html>
  );
}

3. 配置GTM后台触发器 #

• 禁用原有的History Change触发器（若已启用）
• 创建新的自定义事件触发器，触发条件设为event等于custom_page_view
• 将页面统计类标签（如GA4页面视图标签）绑定到该自定义触发器

额外检查 #

确认项目中没有其他子布局/组件重复注入GTM脚本，避免dataLayer被多次初始化引发重复事件。

内容的提问来源于stack exchange，提问作者Ali Khiti