Next.js监听路由变化对接Matomo/PIWIK的代码放置位置咨询

嘿，这个问题问得很关键——要捕获所有路由变化，得根据你用的是Next.js的Pages Router还是App Router来选合适的位置，我给你分别捋清楚：

最稳妥的位置是**_app.js（或.tsx）**里的自定义App组件中，因为这个组件是所有页面的全局入口，每次路由切换都会经过这里，能确保不会漏掉任何客户端路由变化。

具体实现代码如下：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // 定义路由变化的处理函数
    const trackRouteChange = (url) => {
      // 这里替换成你的Matomo跟踪逻辑
      _paq.push(['setCustomUrl', url]);
      _paq.push(['trackPageView']);
      console.log('记录路由导航:', url);
    };

    // 监听routeChangeStart事件
    router.events.on('routeChangeStart', trackRouteChange);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      router.events.off('routeChangeStart', trackRouteChange);
    };
  }, [router]);

  return <Component {...pageProps} />;
}

export default MyApp;

敲黑板：这里用useRouter钩子比直接导入Router对象更稳妥，因为它和组件生命周期绑定，能自动适配Next.js的SSR/SSG场景。

App Router里没有next/router的routeChangeStart事件了，我们可以通过监听路径变化来实现同样的效果，最全局的位置是**app/layout.js（或.tsx）**的根布局中——因为所有页面都会嵌套在这个根布局里，能覆盖所有路由变化。

注意：根布局需要加上'use client'指令，因为要使用客户端钩子：

'use client';
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';

export default function RootLayout({ children }) {
  const pathname = usePathname();

  useEffect(() => {
    // 每次pathname变化时，触发Matomo跟踪
    _paq.push(['setCustomUrl', pathname]);
    _paq.push(['trackPageView']);
    console.log('记录当前路由:', pathname);

    // 如果需要监听浏览器前进后退的popstate事件，可以额外添加
    const handlePopState = () => {
      console.log('浏览器前进后退触发路由变化');
      _paq.push(['setCustomUrl', window.location.pathname]);
      _paq.push(['trackPageView']);
    };
    window.addEventListener('popstate', handlePopState);

    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, [pathname]);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

• 确保Matomo的初始化脚本已经全局加载：比如在Pages Router的_document.js或App Router的根布局<head>中，引入Matomo的官方跟踪脚本，保证_paq对象能正常访问。
• 如果需要跟踪路由变化的完整生命周期（比如开始、完成、失败），Pages Router还可以监听routeChangeComplete、routeChangeError等事件，按需扩展即可。

内容的提问来源于stack exchange，提问作者rap-2-h