Next.js 谷歌分析与 ReactGA

Question

您好，我正在使用 ReactGA4 在 Next 应用程序中跟踪我的分析。我面临的问题是，在用户重新加载页面之前，我无法看到用户所在的路径。这是我的代码。

ReactGA.initialize("UA-xxxxxxx");
ReactGA.send("pageview");

Answer 1

订阅Routerevents，使用GApageview接口。

请记住使用routeChangeComplete，它将通过 ReactGA 方法发送页面视图

修改nextjs例子

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

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

  useEffect(() => {
    const handleRouteChange = (url, { shallow }) => {
      // REACTGA
      // Send pageview with a custom path
      ReactGA.send({ hitType: "pageview", page: "/my-path" });
      console.log(`App is changing to ${url} ${shallow ? "with" : "without"} shallow routing`);
    };

    router.events.on("routeChangeComplete", handleRouteChange);

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method:
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, []);

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