Googleアナリティクス活用:GTMでフォーム送信トリガーの設定

公開日: : 最終更新日:2017/11/27 タグマネージャー , ,


LINE facebook twitter URLコピー
B! pocket note 楽天


サブミットトリガー

フォーム送信に、トリガーオン!

こんにちは、Googleタグマネージャ大好きカグア!です。

フォームの送信をトリガーにして、コンバージョン計測したい人も多いかと思います。Googleタグマネージャ(以下GTM)を使った、フォーム送信検知で気をつけたいことを紹介します。

追記:2016年2月16日 フォーム送信トリガーの挙動を追記・修正致しました。ご指摘ありがとうございました。

関連記事
>>タグマネージャー | カグア!Googleアナリティクス解説Blog
>>Googleアナリティクス応用:GTMで日ごとに変えるバナーA/Bテスト
>>Googleタグマネージャに予め設定しておくと便利な変数12本

フォーム送信で発火させるとは

フォーム

たとえば、上図のようにメールアドレスを登録などのフォーム送信時。

送信完了ページに、コンバージョンを設定できれば良いのですが、別ASPだったり、別ドメインだったり、システム上いじれなかったりと、CV設定がうまくいかないケースも多いものです。

そんなときは、上図の「送信ボタン」、タグとしては、input type=”submit” を、Googleタグマネージャ(GTM)のフォーム送信トリガーで検知して、Googleアナリティクスでイベントトラッキングなどをすれば、簡単にコンバージョン計測ができます。

完了ページをゴールにするのではなく、フォーム送信ボタンクリックをゴールにする、という発送の転換ですね。

フォーム送信トリガーでは発火しないケースもある

さて。GTMのトリガーには「フォーム送信」というトリガーがあります。SUBMITに反応しそうな雰囲気を醸し出していますので、さくさくっとこんな感じに作ります。
フォームトリガー

でも、2016年2月時点では、これは INPUT TYPTE=”SUBMIT” には、発火しません発火しないケースもあるようです。 どういうときに使いのかは、ちょっとよくわかりません。

では、上記以外で、フォーム送信に発火させるには、どういうトリガーを組めばいいのか。答えはつぎです。

CSSセレクタでSUBMITを検知する

Googleアナリティクス公式フォーラムで山田さんが指摘してくれていました。
>>タグマネージャーでフォーム送信ボタンにイベントトラッキングの設定をしたい – Google プロダクト フォーラム

クリックトリガーで、CSSセレクタで INPUT[TYPE=”SUBMIT”] にフックさせるんですね。
CSSセレクタ

これで、無事、SUBMITでタグが発火します。

ただ、今後改修されて、前述の方法でもとれるようになるかもしれませんけれどね。とりあえず現状ではCSSセレクタを使いましょう。

あとは、このトリガーでGoogleアナリティクスのイベントタグを発行して、そのイベントを目標設定すればOKです。

追記:フォーム送信トリガーの挙動

準備:POST形式でSUBMIT送信。
1.変数:Form関連の変数にすべてチェック。
2.トリガー:フォーム送信。すべてデフォルト。
3.タグ:ユニバーサルアナリティクス「フォームをデコレート」
>>クロスドメイン トラッキング – Tag Manager ヘルプ

公式ヘルプ通りやってみました。

挙動としては、FORMのACTIONで指定されているURLが、FormURL変数で取得。そこに、?_ga=1.2.xxxxx というリンカーパラメーターが付きました。

つまり、フォーム送信トリガーでもリンカーがつくこともある、ということでした。失礼しました。


>>「フォームをデコレート」が機能している人はいますか? – Google プロダクト フォーラム

GTM内の実装を見る感じでは、フォームの送信方法が「POST」なのか「GET」なのかで大きく処理が変わっていました。POSTの場合、

タグのaction属性に、デコレートしたURLをセットしなおしているのに対して、GETの場合は

タグ内に<inputtype="hidden" class="google_tag_manager_ua_cookie" name="_ga" value="14111111111.222222222" />のような属性を追加して、フォームの送信を行っているようでした。

衣袋さん、山田さん、ご指摘・解説、ありがとうございました。

フォームのSUBMITでクロスドメイントラッキングを、Googleタグマネージャで実装するときは、サイトごとに開発案件ということですねえ。難しい。

まとめ

フォーム送信は、コンバージョンとしては定番なので、ぜひともマスターしましょう。

とはいえ、Googleタグマネージャは、実際に試してみないとわからないことも多いため、タグマネジメント担当者は、うかつに「出来ます」とは言わないようにしましょう。

タグマネジメントには、かならず調査費用を含め、イエスノーの2通りの見積もりや手立てを忘れないようにしましょう。

「これでSUBMIT手前で取れる。」

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応

できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応: 木田 和廣, できるシリーズ編集部
Amazonで詳しく見る

BookLive!で詳しく見る

実践 Google タグマネージャ入門 増補版: アユダンテ株式会社

実践 Google タグマネージャ入門 増補版: 畑岡 大作(アユダンテ株式会社): 本
Amazonで詳しく見る

BookLive!で詳しく見る

HTML5プロフェッショナル認定試験レベル2攻略テキスト: 中島 俊治: 本

HTML5プロフェッショナル認定試験レベル2攻略テキスト: 中島 俊治: 本
Amazonで詳しく見る

  • このエントリーをはてなブックマークに追加
  • Pocket

Profile


Yoshihiko Yoshida
40代で2児の父。ブロガー兼ユーチューバー。ネット業界24年目。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑