GoogleTagManagerのカスタムイベントで整数の値を配信する
はじめに
GoogleTagManagerのカスタムイベントで整数の値を配信する方法を投稿します。筆者はサイコロを使ったパズルゲームを開発して、ゲーム終了時に獲得した点数を配信するようにしました。最終的にGoogleAnalyticsで、何点が何回発生したかを見ることができるのが目的となります。
以下が筆者のGoogleAnalyticsの画面です。データ数が少ないので、偏った結果ではありますが、4点が15回、8点が7回、42点が6回配信されていることが確認できます。
筆者の開発環境
筆者はNext.jsを使って開発を行っています。しかし、Next.jsを使っていない方も、GoogleAnalyticsとGoogleTagManagerの設定部分は参考になると思います。
- フレームワーク: Next.js
- GoogleTagManagerのイベント配信: @next/third-parties
- アプリのデプロイ: Vercel
1. GoogleAnalyticsで測定IDを取得する
まずはGoogleAnalyticsの設定 > 作成 > プロパティから、プロパティを作成し、データストリームの設定をして、測定IDを取得します。
設定 > プロパティ設定 > データの収集と修正 > データストリーム > ストリームの詳細から、測定IDを確認することができます。
2. GoogleTagManagerに整数の値を配信するための変数、トリガー、タグを設定する。
次はGoogleTagManagerに移って作業を行います。
GoogleAnalyticsの公式ドキュメントには推奨イベントが定義されています。
ゲームでスコアを送信する場合の推奨イベントはpost_score
、パラメータ名はscore
となっており、筆者のイベント名とパラメータ名はこちらの定義に合わせて実装しています。
2.1. GoogleTagManagerに変数を設定する。
まずは、変数 > ユーザー定義変数 > 新規から、変数を作成します。
筆者の場合、得点を指定する変数であるため名前はscore
としています。
変数のタイプはデータレイヤーの変数
、データレイヤーの変数名はscore
、データレイヤーのバージョンはデフォルトのバージョン2
としています。保存を押して完了です。
2.2. GoogleTagManagerにトリガーを設定する。
次に、トリガー > 新規から、トリガーを作成します。
筆者の場合、名前はScoreTrigger
としています。
トリガータイプはカスタムイベント
、イベント名はpost_score
、子のトリガーの発生場所はすべてのカスタムイベント
としています。保存を押して完了です。
2.3. GoogleTagManagerにタグを設定する。
最後に、タグ > 新規から、タグを作成します。
筆者の場合、名前はScoreTag
としています。
タグの設定のタグの種類はGoogleアナリティクス: GA4イベント
、測定IDはGoogleAnalyticsで取得したG-
から始まる測定ID、イベント名はpost_score
、イベントパラメータはscore
、値は{{score}}
としています。
トリガーの配信トリガーに2.2.章で作成したScoreTrigger
を設定して、保存を押して完了です。
GoogleTagManagerでここまで設定ができたら、公開ボタンからコンテナの公開をしてください。
3. Next.jsプロジェクトにイベント配信の実装をする
次はNext.jsプロジェクトにイベント配信の実装をしていきます。
参考に、筆者のNext.jsプロジェクトのディレクトリ構成の抜粋は以下の通りです。
Project/
├─ app/
│ ├─ layout.tsx
│ └─ page.tsx
├─ .env
├─ package.json
└─ README.md
3.1. Next.jsのプロジェクトに@next/third-partiesを追加する。
まずは、今回イベント配信の実装に使う@next/third-partiesを追加します。
Next.jsの公式のドキュメントは以下です。
以下のコマンドを実行して@next/third-partiesをインストールします。
> npm i @next/third-parties
package.jsonに依存関係が追加されます。
"dependencies": {
"@next/third-parties": "^15.1.0",
"next": "15.0.4",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
3.2. app/layout.tsxでGoogleTagManagerのロードを行う
次に、ルートのlayout.tsxでGoogleTagManagerのロードを行います。
<GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID!} />
の一行を追加します。
process.env.NEXT_PUBLIC_GTM_ID
にはGoogleTagManagerのGTM-
で始まるコンテナIDを指定します。
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID!} />
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}
3.3 イベント配信の実装をする
最後にイベントの配信を実装します。@next/third-partiesを使うことで、sendGTMEvent({ event: "post_score", score });
でイベントの配信をすることができます。score
にはuseState
で定義したゲームの得点を指定しています。
以下は実装の抜粋です。
ここまでの手順を行うことでイベントの配信が可能になります。
import { sendGTMEvent } from "@next/third-parties/google";
export default function Home() {
const [score, setScore] = useState<number>(0);
const handleGameOver = () => {
sendGTMEvent({ event: "post_score", score });
}
return (
<>
<div>{score}</div>
<button onClick={handleGameOver}>x</button>
</>
);
}
4. GoogleAnalyticsの探索で配信結果を確認する。
最後に、再びGoogleAnalyticsに戻って、配信結果を確認します。
データは配信した翌日以降に確認ができるため、データ配信を行った初日の場合には、確認できるデータが無いため、翌日以降に確認を行ってください。
4.1. カスタムディメンションを設定する。
まずは、探索で整数の値、筆者の場合はscore
を指定するために、カスタムディメンションの設定を行います。
設定 > データの表示 > カスタム定義 からカスタムディメンションを作成します。
ディメンション名はscore
、スコープはイベント
、説明はスコア
、イベントパラメータはscore
としています。
4.2. 探索を設定する。
最後に、探索で値の可視化を行います。
探索 > 自由形式でビジュアリゼーションを棒グラフ
にします。
ディメンションに先ほど設定したカスタムディメンションのscore
を追加して、内訳にscore
を指定します。
指標にイベントを追加して値にイベント数
を指定します。
お疲れ様でした。ここまで設定すると、以下のようにscoreの値ごとのイベント配信数の棒グラフを確認することができます。
GoogleAnalyticsでは、棒グラフの棒の数が最大で10本しかないため、筆者のような1000点を超えるような数値の発生頻度を1点間隔で可視化するのには向いていないようです。そのため、筆者はデータを100点刻みにまとめるか、別のツールを使って可視化をすることを検討しています。
GoogleAnalyticsでの可視化が難しい場合にはデータをエクスポートすることで、GoogleAnalyticsの外でデータを扱うことも可能です。
筆者のWebアプリ
記事を読んでいただいてありがとうございました。今回はGoogleTagManagerのカスタムイベントで整数の値を配信する方法を紹介しました。この記事の方法で得点の配信を行っている筆者のアプリは以下です。
以下のリンクから遊べますので、是非1000点超えを目指してみてください!
Discussion