【Next.js】Next.jsにGoogleアナリティクスを設定する
通常のWebサイトでは、Googleアナリティクスを設定する場合、<head>タグ内にトラッキングコードをペーストするだけでよいです。しかし、Next.jsで作成したサイトでは、通常の方法とは異なる部分があるため、まとめてみました。
Googleアナリティクス4導入
Googleアナリティクス公式ページへアクセスして「測定を開始」を選択
アカウント名を入力（任意）
データ共有オプションはデフォルトのままにして、「次へ」を選択
計測するサイトのプロパティ名を入力（任意）
日本の場合は、レポートのタイムゾーンを日本にする
日本の場合は、通貨を日本円（JPY）
「次へ」を選択
該当するものを選択して作成を選択
日本の場合プルダウンメニューから日本を選択後、規約に同意して同意するを選択
自分のメール配信画面が表示された場合は、デフォルトのまま保存を選択
データストリームの設定
「ウェブ」を選択
計測をしたいウェブサイトのURLを入力
ストリーム名を入力（任意）
「ストリームを作成」を選択
詳細画面が表示されるので、内容確認後に閉じてください。
データストリームの作成が完了しました。
トラッキングコードを設置する
作成したデータストリームを選択
タグの実装手順を表示するを選択
「手動でインストールする」を選択するとトラッキングコードが表示されます。
_app.jsにコードを設置する
lib/gtag.jsを作成する
GA_MEASUREMENT_IDを環境変数を使用して管理していく。
環境変数はクライアント側(ブラウザ側)で利用したいため、接頭辞NEXT_PUBLIC_をつけてNEXT_PUBLIC_GA_IDとする。
+ export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID;
.envを作成
xxxxxxxxxxxxxxxxxxxxの部分は、GAタグのidです。(画像の赤で塗りつぶしをしている部分)
+ NEXT_PUBLIC_GA_ID=xxxxxxxxxxxxxxxxxxxx
next/scriptによる<Script>コンポーネントを使用して、ページがインタラクティブになった直後に実行されるように、strategy="afterInteractive"を指定する。
インラインスクリプトは、dangerouslySetInnerHTMLを使用して記述していきます。
+ 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アナリティクスにデータが送ることができる。
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を使用して、イベントリスナーへの登録と削除を行う。
+ 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分間のユーザーがカウントされていれば計測ができています。
参考文献
Discussion