【Googleタグマネージャー】URLが変わらないフォームでのコンバージョン測定方法

本日は、Googleタグマネージャーを利用した「ページ遷移のないフォーム」での、コンバージョン設定方法をご紹介いたします。

準備するもの

早速ですが、設定にあたり準備するものは以下となります。

Googleタグマネージャーのアカウント＆コンテナ
ウェブサイトへのGTMタグ設置（対象サイト全てのページに設置でOK）
Google・Yahoo!などのコンバージョンタグ

基礎的な、各種媒体でのタグ発行や、サイトへのGTMタグ設置については今回は割愛させて頂きます。 +αで、今回利用する設定に事前に用意するものは以下となります。

フォーム送信後に表示されるメッセージ（今回は「ありがとうございます。」）
メッセージが表示される箇所の直上id or 直上classの要素（今回は「id：post-ok」）

利用するページによって要素は変化するので、HTMLのソースから該当箇所を頑張って探して下さい。要素の探し方などは、弊社過去記事でご紹介しておりますのでこちらをご確認下さい。

過去記事内紹介のフォーム送信でも計測は可能ですが、送信エラー、入力不備で送信出来ておらず、そのまま離脱でもコンバージョン計上されてしまいます。今回ご紹介する方法では、フォームの動作ではなく、送信後の表示テキストをトリガーとするため、送信された実数に近いコンバージョン計測が出来る手法となります。

Googleタグマネージャーでの設定方法

素材が揃ったら早速設定です。

１、ユーザー定義変数を設定する。

Googleタグマネージャー設定画面上にて、ユーザー定義変数を設定します。

「変数」を選択
「ユーザー定義変数の設定」→「新規」を選択
「ページ要素」の中にある「DOM要素」を選択します

該当の変数は、簡単に言い換えると「ページのどのid,classに属するテキスト要素を読み取るか」といったイメージです。

2、DOM要素でIDを指定（場合によってはclass）

「選択方法：ID」を選択
「要素ID：post-ok」と入力し保存

classを利用する場合は、CSSセレクタを選択、該当のclassを「.◯◯」と入力しましょう。

余談ですが、ワードプレスでよく利用されているContact Form 7で作られたフォームの場合、該当のclassが「wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok」の様に、スペース区切りで複数存在します。この場合は、最後に記載されているclassを利用するため、実際の設定としては「.wpcf7-mail-sent-ok」を要素セレクタで指定する形になります。

３、トリガーの作成

変数の準備が完了したので、タグ発火の条件となるトリガーを作成します。

「トリガー」→「新規」を選択
「トリガーの種類：タイマー」を選択
「間隔：1,000ミリ秒（1秒）」と入力
「一部のタイマー：作成した変数（今回はDOM_ID_post-ok）で『ありがとうございます。』を含む」で設定
フォームのあるページを限定しない場合は、PageURLには「/」と入力しておきましょう。

上記の設定では、ページURLに「/」を含んでいる場合に1秒間隔で動作するタイマーをスタート。ページ内の「ID：post-ok」要素内で、「ありがとうございます。」をテキスト要素に含む場合にトリガーを配信する。といった内容になります。

４、タグの関連付け

各媒体で作成したコンバージョンタグとトリガーをひも付けていきます。ここからは所謂「いつものCV設定」と同じですね。

「タグ」→「新規」→「AdWords コンバージョントラッキング」を選択
事前に発行しておいたCVタグより、コンバージョンID＆コンバージョンラベルを入力。
（Yahoo!の場合はカスタムHTMLタグですね。）
発火トリガーに「フォーム送信完了_1秒」を設定で完了です。
（トリガー名はみなさんが設定したものになります。）

注意点として、コンバージョンをユニーク計測する場合では追加で以下の設定を行う必要があります。（特にYDNでは）

AdWords、Yahoo!スポンサードサーチでは媒体側でコンバージョン計測のカウント方法を指定できるのですが、YDNでは設定がなく「総コンバージョン」となっています。その影響で、「ありがとうございます。」が表示されてから１秒毎にトリガー発行してしまうと、コンバージョン数1秒毎にカウントされるためキケンな状態です。