前回は、【初級編】Googleタグマネージャーに設定したタグを発動させるには？でどの部分を見ればタグの発動条件がわかるよー的な内容を記事にしました。
今回は前回告知していた「サンクスページに遷移しないフォーム」についてのお話をしていきます。
お問合せフォームや会員登録フォームなどで必要な内容を記入した後、「送信」or「登録」ボタンを押すと完了ページ（サンクスページ）に遷移するからサンクスページにタグを置いてページビューでコンバージョン測定！なんて思ってたらサンクスページに行かず「送信」ボタンの下に「ありがとうございました」的なテキストがポツーンって出てくることありませんか？
※これは入力失敗例です。
こんな時、タグマネージャーではどのような設定を行えばいいのでしょうか？
設定その１
一番簡単でシンプルなのはトリガーの「フォーム」を選択し、配信するタイミングで一部のフォームを選びフォームのURLを選択して設定することです。
設定後に、デバッグモードでテストを行い「送信」ボタンを押すと下記のような形のイベントリスナーが発動します。
※ただ注意しなければいけないのは、送信成功でも未記入があってエラーが出たとしてもフォームを押すとGoogleタグマネージャ的に成功として計測されてしまうことです。この方法は、あくまでこの後の方法がうまく行かなかったりクライアント様と話し合ってこの方法でも問題ないとなった場合に使用して下さい。
設定その２
途中までは設定その１と同じで違うのは、配信するタイミングの設定の部分です。
問題はその発信するタイミングの設定をどうするかですが、この手のフォームはDOMや要素などがどうなっているか、「送信」を押した時にどのように動作するかを見なければなりません。
そのため、確実にこの方法ならできる！っというわけではございませんので予めご了承ください。
※あくまで、こういう方法もあるよっという形でご参照下さい。
＜Chromeの場合＞
フォームのページでF12もしくは、右クリック「要素を検証」を押し下記画像のような画面を出しましょう！※デベロッパーツール
ここで「送信」が押された時に、どう動作しているのかが確認できます。
デベロッパーツールの▶の部分にカーソルを合わせるとどの部分でどの要素が使われているかがわかります。※▶を押していけば、最終的に「送信」の部分だけの要素がみえます。
その部分を表示させた状態で、「送信」を押すとClassやelementが「送信成功」「送信失敗」に合わせたIDに変わることがあります。
- 送信を押す前「form-△」
- 送信を押した後（成功)「form-○」
- 送信を押した後（成功)「form-☓」
「送信成功」の時に表示されたIDをトリガーの配信するタイミングで「ClickClasses:form-○」みたいな形で設定してあげれば区別ができます。
デベロッパーツールではわかりにくい時は、前回の記事でご説明したGoogleタグマネージャのデバッグモード時に出てくる「Variables」を参照すると良いかもしれません。
※前記事→【初級編】Googleタグマネージャーに設定したタグを発動させるには？
※上記以外でもやり方は、いくつかございますが今回は初級編ということで簡単な設定について記事にさせて頂きました。
まとめ
デベロッパーツールとかJavascriptとか色々知っていないとGoogleタグマネージャの設定ができないこともあるので、運用者はどの分野でも知識をつけておかないといけませんね！大変だ！
Web関連の事を聞かれたらどんなことでも答えられるような運用者になるべく頑張っていきます。
今後共よろしくお願いいたします(`・ω・́)ゝ
