Google Tag ManagerでGoogle広告の拡張コンバージョンを設定する
Google Tag Managerを使ってGoogle Adsの拡張コンバージョンを設定する方法が公式ドキュメントにはCSSプロパティを使う方法しか載っていなかったのでメモっておきます。
前提として今回はフォーム送信後のサンクスページにはユーザーの情報が表示されていない。フォーム送信時しかデータを持っていないことを想定しています。
（ECサイトのサンクスページのようなユーザーの情報が表示されている場合はGTMでもう少し楽に設定できると思います）
GTMとは
GTM(Google Tag Manager)でユーザ行動分析の土台を整える
上記の記事が分かりやすいです。
GTMの役割としては「トリガー が起きたとき タグ を埋め込む。」という動作が基本になります。
例えば「 あるページ を見たとき GA4のイベントとして登録する 」のようになります。
エンジニア視点だとトリガーがイベントハンドラでタグが実行内容です。
「タグ」という名前なので混乱しやすいですが、ほとんどがユーザーのブラウザで実行されるJavaScriptです。
Google広告の拡張コンバージョン
ヘルプページを見てもGoogle広告に慣れてないと正直何を言ってるのか分かりづらかったです。
欧州のGDPRのようにCookieがプライバシー保護の観点でユーザートラッキングに使えなくなっている流れの中で、従来のコンバージョン計測だと広告を踏んで、一度離れてからまた別の導線でコンバージョンした場合だと取れない課題があります。
そこで、Google側でログイン情報とCV計測サイト(LPやECサイト、アプリなど)からの拡張コンバージョンとしてユーザーのメールアドレスや電話番号を取ることで照会してCV計測の精度を上げるものとなっています。（ざっくりです）
設定方法
Google広告での設定方法
Google広告でコンバージョンアクションの一番下の 拡張コンバージョンをオンにします にチェックを入れてGTMで設定できるようにする。
Google広告側はこれで完了です。
GTMでの設定方法
データレイヤー変数の送信（要コーディング）
if (window.dataLayer) {
window.dataLayer.push({
event: 'CompleteRegistration',
email: email,
phone: phone,
})
}
dataLayer.push メソッドでデータレイヤー変数にイベントと拡張コンバージョン用のユーザーデータを追加します。
このコードスニペットをコンバージョンが発生するフォームやボタンのイベントハンドラとして登録すれば、コンバージョン発生時にデータがGoogleに送信されます。
今回はメールアドレスと電話番号です。TypeScriptの場合は window オブジェクトの型で怒られるので以下のような型定義を追加してあげましょう。
declare const window: Window['window'] & {
dataLayer: object[];
};
イベントと変数を作成
前段で追加したコードでデータレイヤー変数からカスタムイベントとして イベント名: CompleteRegistration のデータが送信されているはずです。
正しく送信されているかはGTMの右上の「プレビュー」からローカルなりステージングのURLを接続して確認できます。
ユーザーデータは左ペインの「変数」から画像のようにdataLayerのプロパティをマッピングしてあげます。（スクショではemailですが、phoneも同様に追加しましょう）
さらに「ユーザー提供データ」変数を拡張コンバージョン用に登録します。
Manual configuration を選んで先程設定したメアドや電話番号の変数をいれます。
これで送信されたユーザーデータがGTMで扱えるようになりました。
トリガーとタグを設定
次にトリガーを設定します。
トリガータイプを「カスタムイベント」にしてイベント名に dataLayer.push メソッドで送信したイベント名を入力します。（今回は CompleteRegistration です）
最後にタグの設定です。
今回はすでにGoogle広告のコンバージョントラッキングが設定してあったので（ゼロから設定する場合はググってください）
「自社のウェブサイトでユーザーから提供されたデータを含める」にチェックを入れて、先程作成したユーザー提供データの変数を設定します。
配信トリガーはカスタムイベントで設定したトリガーです。
Discussion