GTMのDOM操作によるコンバージョンタグ設定

WEBマーケター大西
2023年08月02日

今回は Google Tag Manger の DOM 要素変数を使って、コンバージョン計測タグを設定する方法をご紹介します。

コンバージョン計測タグの設定方法

コンバージョン計測タグの設定で一般的な方法は、「ページ（フォームの完了ページURL）を指定する」方法かと思いますが、「DOM 要素変数」を使うことで、より柔軟なタグ設定が可能になります。

なお、本事例は以下のような条件を想定しています。

完了ページのURLが同じで、入力ページのURLが異なる
コンバージョンの内容によって、個別に計測をしたい

1は、不動産物件サイトやECサイトのフォームでよく見られる構成ではないでしょうか。
入力ページでは、物件や商品のIDなどパラメーターが含まれることにより、個別のURLになりますが、完了ページでは thanks といった共通のURLに遷移するというような構成です。

	入力ページ	完了ページ
構成例	https://xxxxx/input?id=xx	https://xxxxx/thanks

確認ページのURLは割愛しています。

2は、単に問い合わせや申し込みのアクションがあった、という計測だけではなく、どういう商品（用途、性別、年齢など）を購入したのか、どういう物件（地域や間取り、価格など）に問い合わせたのか、属性ごとに計測を行いたいケースです。
特に広告（Google / Yahoo! / Facebook / LINE など）の効果測定、リマーケティング・カスタムオーディエンスの活用時にあてはまるのではないかと思います。

設定例

1. Google Tag Manger で変数を新規で作成

変数のタイプ：DOM 要素を選択
選択方法： ID か CSS セレクタを選択。（キャプチャでは ID を選択）
要素ID：id 名か CSS セレクタを指定（キャプチャでは id=”sample_id” という要素が存在する想定です）
属性名：特に指定なければ、DOM 要素のテキストを参照します。

2.トリガーを設定

トリガーのタイプ：ページビュー – DOM Ready を選択
このトリガーの発生場所：一部の DOM Ready イベントを選択。（完了ページのみが対象のため）
要素ID：id 名か CSS セレクタを指定（キャプチャでは id=”sample_id” という要素が存在する想定です）
条件：作成した変数を指定。テキストで判別する場合は、任意のテキストを指定。（id=”sample_id” にサンプル、という文字列が含まれていればOK、としています）

Page URL で完了ページも指定しておくと、なおよいでしょう。指定がなかった場合、万一他のページで条件を満たしているときに、タグが発火されてしまうためです。

条件で指定する値は、完了ページ内で物件や商品ごとに一意となる値を出力できるようにしておく必要があります。
・「物件名」に問い合わせいただきありがとうございます。
・「商品名」をご購入いただきありがとうございます。
など