🏷️

Next.js(App Router) GTMを設置してGA4を導入する

2023/12/16に公開

Google Analytics

Next.jsのアプリケーション（App Routerを使用）にGTM（Googleタグマネージャ）を設置し、GA4でのトラッキングを有効にするステップをざっくり紹介。

主な手順

GTMのアカウントとコンテナを作成
GTMをNext.jsに設置
GA4のアカウントを作成
GTMでGA4のタグを作成

GTMのアカウント作成

GTMのページにアクセスして、GTMアカウントとコンテナを作成する。

GTMをNext.jsに設置

作成したGTMコンテナに入り、上タブにある「GTM-⚫︎⚫︎⚫︎⚫︎」をクリックし、コンテナのコードを確認できる状態にしておく。

GTM-IDを環境変数に設定

GTM-⚫︎⚫︎⚫︎⚫︎を環境変数に設定します。

NEXT_PUBLIC_GTM_ID=GTM-⚫︎⚫︎⚫︎⚫︎

ページビューイベントを追跡する関数を作成

utils/gtm.tsファイルを作成し、以下のコードを追加します。

export const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;

interface CustomWindow extends Window {
  dataLayer: Array<any>;
}

export const pageView = (url: string) => {
  if (process.env.NODE_ENV !== "production") {
    return;
  }
  const customWindow = (window as unknown) as CustomWindow;
  customWindow.dataLayer.push({
    event: "pageView",
    page: url,
  });
};

今回は本番環境でのみGTMを動かしたいため、デプロイ先の環境変数process.env.NODE_ENVにproductionを設定します。

dataLayer.push()メソッドを使用して、ページビューイベントをデータレイヤーに送信します。これにより、ページの閲覧情報がGTMに渡され、トラッキングが可能になります。
dataLayerとは、GTMに情報を渡すためのオブジェクトです。

GTMスクリプトの統合

src/app/components/Analytics.tsxファイルに次のコードを追加します。
このコードは、GTMのスクリプトをウェブページに追加し、ページビューを追跡します。

"use client";

import { useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { GTM_ID, pageView } from "../../../utils/gtm";

const Analytics = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    if (pathname) {
      pageView(pathname);
    }
  }, [pathname, searchParams]);

  if (process.env.NODE_ENV !== "production") {
    return null;
  }

  return (
    <>
      <noscript>
        <iframe
          src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
          height="0"
          width="0"
          style={{ display: "none", visibility: "hidden" }}
        />
      </noscript>
      <Script
        id="gtm-script"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer', '${GTM_ID}');
  `,
        }}
      />
    </>
  );
};

export default Analytics;

useEffectで、現在のURLや検索パラメータが変更されるたびに、pageView関数を呼び出すようにします。
これにより、GTMのdataLayerにページビューイベントがプッシュされます。

Next.jsのScriptコンポーネントでGTMスクリプトを設定します。　　
基本的にはGTMコンテナ管理画面で確認できるスクリプトと同じ内容になります。
strategy="afterInteractive"を指定することで、ページがブラウザで開かれた後にのみ実行されます。

dangerouslySetInnerHTMLで、スクリプトタグ内に直接GTMのスクリプトを挿入しています。

Layoutにコンポーネントを追加

src/app/layout.tsxに、今作成したAnalyticsコンポーネントを追加します。

import Analytics from './components/Analytics';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Analytics />
        {children}
      </body>
    </html>
  );
}

環境変数が問題なければ、GTMコンテナ内でウェブアプリのURLをテストすると、GTMの埋め込みが確認されます。

GA4のアカウントを作成

https://analytics.google.com にアクセスします。
「管理」画面からアカウントの作成を選択します。
アカウントを作成後、プロパティを作成します。

GTMでGA4のタグを作成

GA4のアカウント、プロパティの作成が完了したら、「管理」から「データストリーム」を開きます。
「データストリーム」の「測定 ID」をコピーします。
GTMのコンテナを開き、「タグ」で新規タグを作成します。
「タグの設定」で「Googleアナリティクス > Googleタグ」を選択します。
「タグID」に「測定 ID」を貼り付けます。
トリガーに「Initialization - All Pages（初期化）」を選択します。
コンテナの変更を「公開」します。

これでGA４が埋め込まれたサイトにアクセスし、GA4「リアルタイム」を確認するとデフォルトで設定されているイベントが追跡されているはずです。