🌱

Next.jsにGoogleアナリティクスを設定する

2022/10/09に公開約4,900字

通常のWebサイトはGoogleアナリティクスを設定する場合、<head>タグ内にトラッキングコードをペーストなどするだけでよいですが、Next.jsで作成したサイトの場合、通常の方法と違う部分がありましたので、まとめてみました。

Googleアナリティクス4導入

Googleアナリティクス公式ページへアクセスして「測定を開始」を選択

アカウント名を入力(任意)

データ共有オプションはデフォルトのままにして、「次へ」を選択

計測するサイトのプロパティ名を入力(任意)

日本の場合は、レポートのタイムゾーンを日本にする

日本の場合は、通貨を日本円(JPY)

「次へ」を選択

該当するものを選択して作成を選択

日本の場合プルダウンメニューから日本を選択後、規約に同意して同意するを選択

自分のメール配信画面が表示された場合は、デフォルトのまま保存を選択

データストリームの設定

「ウェブ」を選択

計測をしたいウェブサイトのURLを入力

ストリーム名を入力(任意)

「ストリームを作成」を選択

詳細画面が表示されるので、内容確認後に閉じてください。

データストリームの作成が完了しました。

トラッキングコードを設置する

作成したデータストリームを選択

タグの実装手順を表示するを選択

「手動でインストールする」を選択するとトラッキングコードが表示されます。

_app.jsにコードを設置する

lib/gtag.jsを作成する

GA_MEASUREMENT_IDを環境変数を使用して管理していく。
環境変数はクライアント側(ブラウザ側)で利用したいため、接頭辞NEXT_PUBLIC_をつけてNEXT_PUBLIC_GA_IDとする。

lib/gtag.js
+ export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID;

.envを作成

xxxxxxxxxxxxxxxxxxxxの部分は、GAタグのidです。(画像の赤で塗りつぶしをしている部分)

.env
+ NEXT_PUBLIC_GA_ID=xxxxxxxxxxxxxxxxxxxx

next/scriptによる<Script>コンポーネントを使用して、ページがインタラクティブになった直後に実行されるように、strategy="afterInteractive"を指定する。
インラインスクリプトは、dangerouslySetInnerHTMLを使用して記述していきます。

pages/_app.js
+ import Script from "next/script";
+ import * as gtag from "src/lib/gtag";

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <>
+       <Script
+         strategy="afterInteractive"
+         src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_MEASUREMENT_ID}`}
+       />
+       <Script
+         id="gtag-init"
+         strategy="afterInteractive"
+         dangerouslySetInnerHTML={{
+           __html: `
+           window.dataLayer = window.dataLayer || [];
+           function gtag(){dataLayer.push(arguments);}
+           gtag('js', new Date());
+ 
+           gtag('config', '${gtag.GA_MEASUREMENT_ID}');
+           `,
+         }}
+       />
        <Component {...pageProps} />
    </>
  );
}

export default MyApp;

タグの設置は完了ですが、現段階ではNext.jsのページ遷移が認識されない状態。
理由は<Component />が変わっているだけのため。

ページ遷移を認識させる

pageviewという関数をgtag.jsに用意します。
この関数をページ遷移に応じて実行することによって、Googleアナリティクスにデータが送ることができる。

lib/js
export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID;

+ export const pageview = (url) => {
+   window.gtag("config", GA_MEASUREMENT_ID, {
+     page_path: url,
+   });
};

next/routerを使用して、Router内のイベントで用意されている、ページ遷移が終了した際に発火するrouteChangeCompleteのイベントリスナーとして先ほど作成をした関数、pageviewを登録します。
urlが渡されるタイミングはイベントが発生したとき。

useEffectを使用して、イベントリスナーへの登録と削除を行う。

pages/_app.js
+ import { useRouter } from "next/router";
+ import { useEffect } from "react";

function MyApp({ Component, pageProps }: AppProps) {

+   const router = useRouter();
+   useEffect(() => {
+     const handleRouterChange = (url: any) => {
+       gtag.pageview(url);
+     };
+     router.events.on("routeChangeComplete", handleRouterChange);
+     return () => {
+       router.events.off("routeChangeComplete", handleRouterChange);
+     };
+   }, [router.events]);

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_MEASUREMENT_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '${gtag.GA_MEASUREMENT_ID}');
          `,
        }}
      />
        <Component {...pageProps} />
    </>
  );
}

export default MyApp;

計測を確認してみる

Webサイトにアクセス後、レポートリアルタイムを選択して過去30分間のユーザーがカウントされていれば計測ができています。

参考文献

https://ebisu.com/next-react-website/
https://www.conoha.jp/lets-wp/how-to-use-googleanalytics/#section02-03

Discussion

ログインするとコメントできます