GTMのカスタムイベントトリガーとdataLayer.pushの使い方｜未経験から100日後にGTMのプロになる話【Day 11】

クリックやフォーム送信のような標準トリガーだけでは、動画再生数やログイン回数、カート追加のような「サイト独自のアクション」は拾えません。ここで登場するのが、GTMの「カスタムイベントトリガー」とdataLayer.push()です。

dataLayer.pushの基本

dataLayerは、サイトとGTMの間でデータをやり取りするための、ただのJavaScript配列です。サイト側で次のようなコードを実行すると、GTMにイベントを通知できます。

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'video_play',
  'video_title': 'GTMの基礎講座',
  'video_duration': 120
});

eventキーの値（ここではvideo_play）がカスタムイベント名になり、それ以外のキー（video_title、video_duration）はGTM側でデータレイヤー変数として拾える追加情報になります。

ここで1つ、開発者に依頼するときに必ず伝えてほしいことがあります。イベント名と、そのイベントで使いたいデータは、同じpush呼び出しの中に1つのオブジェクトとしてまとめて入れるということです。「まずデータをpushして、次にイベント名だけを別にpushする」という実装をされることがありますが、これだとトリガーが発火した瞬間にはまだデータが揃っていない、というタイミング事故が起きえます。1回のpushで完結させるのが安全です。

GTM側でカスタムイベントトリガーを作る

1. 「トリガー」→「新規」→種類は「カスタムイベント」
2. 「イベント名」に、pushされるeventの値と完全一致する文字列を入力（例：video_play）
3. トリガー名を分かりやすく付けて保存（例：「カスタムイベント - 動画再生」）

イベント名は前方一致や正規表現でのマッチも選べますが、最初のうちは完全一致にしておくのが無難です。緩い条件にすると、似た名前の別イベントまで拾ってしまうことがあります。

データレイヤー変数を用意してGA4に送る

pushしたデータ（video_titleやvideo_duration）をタグで使うには、GTM側で「データレイヤーの変数」を作成し、変数名にpushしたキー名を指定します。あとは通常のGA4イベントタグと同じ要領で、イベント名とイベントパラメータを設定し、作成したカスタムイベントトリガーに紐付ければ完了です。

プレビューモードでの確認ポイント

プレビューモードのデバッグ画面には「データレイヤー」というタブがあります。ここで、対象のアクションを実行した瞬間にどんなオブジェクトがpushされているか、実際の中身を確認できます。「タグが発火しない」という相談を受けたとき、まずここを見て、①イベント名の綴りがトリガー設定と一致しているか、②必要なデータが同じpushの中に含まれているか、の2点を確認するのが定石です。

今日のまとめ

カスタムイベントの本質は「サイト側で起きたことをdataLayer経由でGTMに伝える」というシンプルな仕組みです。イベント名の一致とデータの同時投入さえ押さえておけば、動画再生・ログイン・カート追加など、標準トリガーではカバーしきれない行動も自由に計測できます。次回は、このデータレイヤー変数をもう少し深掘りします。