如何在 next.js 项目中跟踪初始页面浏览量？

如何解决如何在 next.js 项目中跟踪初始页面浏览量？

我浏览了 next.js example projects，特别是如何集成 google analytics 和 facebook pixel。

两种集成都使用 routeChangeComplete 事件 here 和 here。它在用户更改路线时触发，然后将页面查看事件发送到分析工具。

routeChangeComplete 事件不会在初始渲染（第一次用户访问）时触发。它仅在用户更改路线（进入另一条路线）时触发。我认为 Google Analytics 和 Facebook Pixel 页面查看事件也应该在第一次用户访问时发送。如何在 next.js 项目中正确地做到这一点？

解决方法

您可以通过创建一个 custom _app.jsx 文件来实现。在那里你可以通过添加一个带有空依赖数组的 useEffect 钩子来跟踪初始访问，这样函数只会在初始渲染时触发：

export default function MyApp({ Component,pageProps }) {
  React.useEffect(() => {
    // Track the initial view
  },[]);

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