Next.js for GoogleAnalytics
Next.jsにGoogleAnalyticsを導入したやり方
プロパティ作成→管理/データストリーム/クリックして測定IDを入れます。
Google アナリティクス 4 じゃなかったら普通にトラッキングIDの方で大丈夫です。
ローカルの環境変数は.env.localなどに記述します。
開発環境のlocalhost:3000でもこの設定でGoogle Analyticsに発火されます。
1NEXT_PUBLIC_GA_ID=ここに入れるサーバーの環境変数にも追加します。
Vercelの場合Environment VariablesからNAMEとVALUEを記述してADD
gtagの型定義をプロジェクトにインストールします。
1npm install @types/gtag.jslibs/gtag.ts
1export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID || "";
2export const pageview = (url: string): void => {
3 if (!GA_TRACKING_ID) return;
4 window.gtag("config", GA_TRACKING_ID, {
5 page_path: url,
6 });
7};_app.tsx
1import { GA_TRACKING_ID, pageview } from "../libs/gtag";
2import { useEffect } from "react";
3import { AppProps } from "next/app";
4
5const MyApp = ({ Component, pageProps, router }: AppProps): JSX.Element => {
6 useEffect(() => {
7 if (!GA_TRACKING_ID) return;
8 const handleRouteChange = (url: string) => {
9 pageview(url);
10 };
11 router.events.on("routeChangeComplete", handleRouteChange);
12 return () => {
13 router.events.off("routeChangeComplete", handleRouteChange);
14 };
15 }, [router.events]);
16
17 return (
18
19 export default MyApp;_document.tsx(Headタグの中にスクリプト埋め込みます)
1import { GA_TRACKING_ID } from "../libs/gtag";
2import Document, { Html, Head, Main, NextScript } from "next/document";
3
4class MyDocument extends Document {
5 render() {
6 return (
7 <Html lang="JA">
8 <Head>
9 {GA_TRACKING_ID && (
10 <>
11 <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
12 <script
13 dangerouslySetInnerHTML={{
14 __html: `
15 window.dataLayer = window.dataLayer || [];
16 function gtag(){dataLayer.push(arguments);}
17 gtag('js', new Date());
18 gtag('config', '${GA_TRACKING_ID}', {
19 page_path: window.location.pathname,
20 });
21 `,
22 }}
23 />
24 </>
25 )}
26 </Head>
27 <body>
28 <Main />
29 <NextScript />
30 </body>
31 </Html>
32 );
33 }
34}
35
36export default MyDocument;流れとしては.env.localやサーバーに入れたNEXTPUBLICGA_IDをgtag.tsでGA_TRACKING_IDにしてエクスポート、
それらを読み込みつつ発火の仕組みを_app.tsx内で行い、Google Analyticsのスクリプトを_document.tsxに記述します。
間違ってるサイト多いのでdocumentにスクリプトを書いてください。appの方にはスクリプトは書きません。
意外と導入しちゃえば二度と触ることないんで難易度低いしどのサイトにも入れられるし簡単だし、やってみて欲しいです！！