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

Question

我经历了next.jsexample projects, especially how to integrate google analytics and facebook pixel.

两个集成都使用 routeChangeComplete 事件 here and here。它在用户更改路线时触发，然后页面视图事件被发送到分析工具。

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

Answer 1

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

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

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

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

How to track initial page views in next.js projects?

google-analytics

next.js