【Next.js】Google Tag Manager 経由で Analytics を導入する [Techblog#27]
Next.js 環境では @next/third-parties という便利なモジュールが存在するので、これを使って GTM と GA4 を導入します
動作確認環境
Next.js 14.2.8 (App router)
最近になって、ボタンのクリック数を計測したいなあと思い Google Tag Manager を導入することにしました (やっと)
@next/third-parties が便利そうだったのでこれを使うことに
注意
いまのところ特に問題等は感じませんが、一応このライブラリは Experimental(実験的) としてマークされているので、大事な製品等に組み込む場合は、少し気を遣ってあげてください
Web アプリケーションの下準備
いつもの如く以下のようにすれば導入できます (yarn add は適当に読み替えてください)
yarn add @next/third-party-analyticsGoogle Tag Manager の設定
まず、GTM (Google Tag Manager) のページで、コンテナを作成します
作成すると、トップページに GTM-XXXXXXX といったコンテナ ID が表示されていると思うので、控えます
控えたら Web アプリケーションの layout.tsx 等に <GoogleTagManager /> を以下のように設定します
import { GoogleTagManager } from '@next/third-parties/google'import { Suspense } from 'react'const Layout = ({ children }: { children?: React.ReactNode }) => {return (<html lang='ja'><head><Suspense><GoogleTagManager gtmId='GTM-XXXXXXX' /></Suspense></head><body>{children}</body></html>)}export default Layout
これで設置完了です。一旦 Web アプリケーションのデプロイと、GTM の「公開」を行い、導通を確認してみましょう
Google Analytics との連携
GA4 (Google Analytics) は GTM で連携設定するだけで、Web アプリケーションに変更を加えることなく計測できます
⚠️ これまでに GA4 の設定をしている場合は、二重計測されてしまうようなので削除しておきましょう
まず GA4 でアカウントとアプリを作成しましょう
作成後に、左のサイドバーの「⚙️ 管理」から「データの収集と修正」>「データストリーム」から該当のストリームを選択し、測定 ID (G-XXXXXXXXXX) を控えます
GTM のページに戻り、タグを作成します
一覧からGoogle タグを選択し、以下のように設定します
チェックリスト
保存が終わったら、公開して変更を反映します
(おまけ) GTM を経由せず GA4 だけ埋め込む
最後に GA4 で記録が取れているかを確認したら完了です 🎉
おわりに
Git 等で管理していて id を直埋め込みしたくない場合は、環境変数を使って読み込むようにすると良いです 🐶
関連記事