Next.js(App Router)で Google Analytics を利用する手順についてまとめていきます。
1. env.production に環境変数を設定する
NEXT_PUBLIC_GA_ID = "G-<測定ID>";2. GoogleAnalytics.tsx を作成する
import Script from "next/script";
export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID || "";
export function GoogleAnalytics() {
if (!GA_MEASUREMENT_ID) {
return <></>;
}
return (
<>
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
></Script>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_MEASUREMENT_ID}');
`}
</Script>
</>
);
}
export default GoogleAnalytics;strategy="afterInteractive" は、next/script の機能で、afterInteractive は、ページの読み込みが完了した後に実行されるようになります。
Optimizing: Scripts | Next.js
Optimize 3rd party scripts with the built-in Script component.3. layout.tsx に GoogleAnalytics コンポーネントを追加する
import GoogleAnalytics from "@/components/GoogleAnalytics";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<GoogleAnalytics />
</head>
<body>{children}</body>
</html>
);
}