GTMのDOM操作によるコンバージョンタグ設定
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 |
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 で完了ページも指定しておくと、なおよいでしょう。指定がなかった場合、万一他のページで条件を満たしているときに、タグが発火されてしまうためです。
条件で指定する値は、完了ページ内で物件や商品ごとに一意となる値を出力できるようにしておく必要があります。
・「物件名」に問い合わせいただきありがとうございます。
・「商品名」をご購入いただきありがとうございます。
など
タグを設定
出力したいタグを設定し、作成したトリガーを指定すれば完了です。
GTMを使わずに、プログラムで都度対応するという方法ももちろん可能ですが、マーケターだけでなくエンジニアやコーダーの手を借りる必要があり、作業フローが煩雑になりがちです。
このDOM要素設定ができていると、物件が増えたときや広告タグの修正・追加があったとしても、GTM上でトリガーの設定とタグの調整のみで対応できるので、担当者（マーケター）だけで簡単に行えます。
要件によって設定は変わってきますが、タグの設定や管理のメンテナンス性をあげたい、運用体制を改善したい、という方はぜひご参考ください。
MMJでは、システムの構築やHPの制作だけでなく、集客施策やサイト分析・運用体制まで考慮したご提案を行っております。
何かお困りごとやご検討のプロジェクトがあればご相談からでも可能ですので、こちらからお問い合わせください。
関連記事を見る
この記事を書いた人
2023年08月02日
記事のカテゴリ：Webマーケティング
STAFF募集
メディアマックスジャパンではWebエンジニア・プログラマー、フロントエンドエンジニア、デザイナー、マーケターを募集しています。詳しくは求人採用情報をご覧ください。お問い合わせやご応募はX（旧Twitter）とFacebookでも随時受付中です。
