Next.js集成Google Tag Manager无容器请求问题排查

核心问题分析 #

你当前的代码存在几个关键错误，导致GTM无法正常发送请求：

1. 错误使用了Google Analytics的gtag.js脚本
   你加载的是gtag/js（这是GA的初始化脚本），但GTM需要的是容器专属的gtm.js脚本。同时，你用了gtag('config')的初始化方式，这是GA的配置逻辑，不适用于GTM。

2. 脚本加载时序不匹配
   两个脚本都用lazyOnload策略，会等到页面完全加载后才执行，可能导致初始化逻辑在GTM容器脚本加载完成前运行——即使dataLayer存在，GTM也还没准备好捕获事件。

3. 单页应用路由切换未做页面追踪
   Next.js是SPA，首次加载后的路由切换不会触发GTM的默认页面视图，需要手动监听路由变化并推送事件。

修正后的代码示例 #

import '../styles/global.css';
import type { AppProps } from 'next/app';
import Script from 'next/script';
import NextNProgress from 'nextjs-progressbar';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { PageLayout } from '@/layouts';

const MyApp = ({ Component, pageProps }: AppProps) => {
  const router = useRouter();

  // 监听路由变化，推送pageview事件到dataLayer
  useEffect(() => {
    const trackPageView = (url: string) => {
      window.dataLayer.push({
        event: 'pageview',
        page_path: url,
      });
    };

    // 首次加载触发一次页面追踪
    trackPageView(window.location.pathname);
    // 监听路由切换完成事件
    router.events.on('routeChangeComplete', trackPageView);

    return () => {
      router.events.off('routeChangeComplete', trackPageView);
    };
  }, [router]);

  return (
    <>
      {/* 加载GTM容器脚本，用afterInteractive确保尽早初始化 */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX`}
      />

      {/* GTM初始化逻辑 */}
      <Script id="gtm-init" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtmPush() { dataLayer.push(arguments); }
          gtmPush('js', new Date());
          gtmPush('config', 'GTM-XXXXXXX');
        `}
      </Script>

      <PageLayout>
        <NextNProgress color="#E80371" />
        <Component {...pageProps} />
      </PageLayout>
    </>
  );
};

export default MyApp;

验证步骤 #

• 核对GTM容器ID，确保GTM-XXXXXXX和你控制台的ID完全一致
• 打开浏览器开发者工具的Network标签，检查是否有gtm.js的请求成功加载
• 启用GTM的预览模式，刷新页面并切换路由，查看控制台是否捕获到pageview事件

内容的提问来源于stack exchange，提问作者Nordic Guy