GA4 や GTM の設定は、マーケティング施策やプロダクト改善のために必要になることが多いです。
ただ、エンジニア視点だと「あとでやろう」と後回しになりがちなタスクでもあります。
実際、以前 GA4 を設定したときは、素の JavaScript を直接埋め込む必要がありました。
- script の読み込み位置を考える
- hydration を壊さないようにする
- イベント送信関数を自前で作る
- dataLayer を意識する
など、地味に面倒だった記憶があります。
ところが、Next.js の @next/third-parties を使ったところ、かなり簡単に設定できて驚きました。
検証込みでも数時間ほどで実装できたので、備忘録としてまとめます。
1. GTMでタグを発行する
まずは Google Tag Manager でコンテナを作成します。
作成後、GTM 用のタグが発行されるので、GTM-XXXXXXX の ID を控えておきます。
2. @next/third-parties をインストールする
Next.js 公式が、Google 系サービス向けのラッパーコンポーネントを提供しています。
これを使うことで、公式ドキュメントにある複雑な script タグを自前で書かなくて済みます。
インストールは以下だけです。
npm install @next/third-parties
3. layoutにGTMタグを設置する
GTM 用コンポーネントを作成します。
import { GoogleTagManager } from "@next/third-parties/google";
export function GtmTag() {
if (process.env.NEXT_PUBLIC_ENV !== "prod") return null;
return (
<GoogleTagManager
gtmId={process.env.NEXT_PUBLIC_GTM_ID!}
/>
);
}
あとは layout.tsx に配置するだけです。
<body>
<GtmTag />
{children}
</body>
これだけで GTM の script 読み込みが完了します。
以前のように、
- script の読み込み順
dangerouslySetInnerHTMLnoscript
などを意識しなくていいのがかなり楽でした。
4. イベント送信関数を作る
イベント送信も @next/third-parties 側で用意されています。
import { sendGTMEvent } from "@next/third-parties/google";
export function sendGtmEvent(event: string, params?: object) {
sendGTMEvent({
event,
...params,
});
}
ボタンクリック時に呼ぶだけです。
<Button
onClick={() =>
sendGtmEvent("cta_click", {
location: "hero",
})
}
>
無料登録
</Button>
dataLayer を直接触る必要もなく、かなりシンプルでした。
5. GTM側でイベント登録する
Next.js 側から送信したイベントは、そのままでは GA4 に保存されません。
まず GTM 側でカスタムイベントとして登録し、そのイベントをトリガーにして GA4 へ送信する設定を行います。
今回は CTA ボタンのクリックや会員登録完了を計測したかったため、
cta_click
signup_submit
などのイベントを送信しました。
イベント名を統一しておくと、後から分析やダッシュボード作成もしやすくなります。
6. GA4のプレビューで検証する
最後にタグマネージャーのプレビュー機能で動作確認します。
https://tagmanager.google.com/
イベントが飛んでいることを確認できれば完了です。
ここまで含めても、かなり短時間で導入できました。
まとめ
正直、以前の GA4 導入体験を知っているとかなり感動しました。
特に良かったのは、
- Next.js 公式がラップしてくれている
- script 周りを意識しなくていい
- イベント送信も簡潔
- App Router でも自然に導入できる
このあたりです。
マーケティング施策や PDCA を回すうえで、GA4 は避けて通れないことが多いですが、以前よりかなり敷居は下がったと感じました。
こういう「かゆいところに手が届く」ライブラリが増えているのも、Next.js の普及率の高さを感じます。