Googleタグマネージャーチュートリアルパート4：フォーム送信の追跡–高度

公開: 2020-10-07

更新されたGoogleタグマネージャーチュートリアルのパート3では、フォーム送信トリガーを使用したフォームトラッキングについて説明しました。これは、連絡先フォームトラッキングをマスターするための簡単なアプローチです。 ただし、フォームのコードとそのテクノロジーによっては、これが常に機能するとは限りません。 これは、オンサイトのJavaScriptの問題、またはGTMによって取得されないフォーム送信にリンクされている可能性があります。

シリーズのこの最後のパートでは、 Element Visibility Triggerを使用して、フォーム送信の追跡について詳しく見ていきます。 このタイプのトリガーは、フォームだけでなく、すべてのタイプのポップアップウィンドウ、表示バナー、および通知に役立ちます。

Google Analyticsはこのアクティビティを自動的に追跡しませんが、Google Tag Manager（GTM）はフォーム送信を追跡するための自動化されたソリューションを提供します。

このチュートリアルでは、既にGoogle Tag Managerアカウントを持っており、コンテナを作成して、それをWebサイトにインストールしていることを前提としています。 また、ウェブサイト用にGoogle Analyticsアカウントを設定し、それをGTMにリンクしている必要があります。

フォームの追跡が難しい理由は何ですか？

一歩下がって、フォーム追跡に非常に多くの異なる手法がある理由を明らかにしましょう。 さまざまな種類のフォームがあり、それらがどのように開発されるかについてのグローバルスタンダードはありません。その結果、フォームの追跡が困難になる可能性があります。 フォームの送信後にWe​​bサイトで発生する可能性のある最も一般的なシナリオ/イベントの概要は次のとおりです。

  • フォームはユーザーをありがとうページにリダイレクトします：すばらしい、これはPageviewを介して自動的に追跡されます。
  • 送信ボタンをフォームした後、ヨーヨーuの通知を感謝フォームショーがクリックされた：グレートを、それはフォームがGTMに提出送信した場合。 これについて詳しくは、ブログ投稿チュートリアルをご覧ください。
  • フォームが更新され、お礼のテキストが表示されます。チャレンジングですが、 Element VisibilityTriggerで実行できます。
  • ポップアップウィンドウが成功提出についてユーザーに通知します。要素の可視性トリガでは不可能への挑戦ではなく。

フォームトラッキングを開始する方法

まず、GTMの組み込みフォーム変数を有効にして、すべてのフォーム送信をリッスンするフォーム送信トリガーを作成することをお勧めします。 セットアップの詳細については、前回のブログ投稿チュートリアルをご覧ください。 フォーム自動イベントリスナーは、すべての標準の送信ブラウザイベントを検出します。 フォームでいくつかのテストを実行します。

GTMがプレビューおよびデバッグモードでフォーム送信を記録しない場合、標準の追跡アプローチは機能せず、代わりに別の方法を使用する必要があります。 これは非常に一般的であるため、素晴らしい代替手段であるElement VisibilityTriggerを使用します。

要素の可視性トリガーの説明

Element Visibility（EVB）Triggerは、特定の要素が画面に表示されたとき（クリック、スクロール、またはその他の操作によって）を追跡するため、さまざまなユースケースがあります。 この手法は、フォームが正常に送信された後に特定のありがとうメッセージが表示されたときにフォームに適用できます。 これは、バナー時にフォームページをリロード、またはポップアップウィンドウありがとう、あなたに同じフォームページ上の通知を感謝することができます。 より実用的な例については、ここをクリックしてください。

つまり、 Element Visibility Triggerは、指定した要素がブラウザのビューポートに表示されるたびに起動します。 ビューポートは、ブラウザウィンドウの表示領域です。 そこに要素が表示されている場合、ユーザーはその要素を表示できます。

選択方法として、ターゲットにする要素を決定するには、次の2つのオプションから選択できます。

  • 要素ID ：これは、指定されたIDを持つページの最初の要素と一致します。 追跡する要素が1つしかない場合、これはうまく機能します。
  • CSSセレクター：これは、セレクターに適合するページ上の要素または要素のグループに一致し、ページに表示される可能性のある複数の要素を追跡するのに適しています。

ステップ1：一意の識別子を見つける

表示されるフォームの成功メッセージを調べることから始めます。

ウェブサイトに表示されたありがとうメッセージ

これを行うには、右クリックしてブラウザの開発ツールにアクセスします。 Chromeで、たとえば、あなたが検査し、要素を点検して選択したい要素を右クリックします。 これにより、メッセージのコンテンツ、CSSクラス、ID、その他の要素などのさまざまな情報が表示されます。 以下の例では、メッセージにID送信済みメッセージがあります。これは一意であり、 EVBトリガーの条件として使用できます。

成功したフォーム送信のコード例

ステップ2：要素の可視性トリガーを作成する

トリガーは、ユーザーのビューポートに表示されるようになる追跡対象を正確に定義します。 この場合、お礼のメッセージが表示されるかどうかを確認するためのチェックです。

トリガーの設定については、次の手順に従ってください。

  • 左側のサイドバーの[トリガー]に移動して、新しいトリガーを作成します。
  • UntitledTriggerをEVB– Contact – FormSubmittedのようなわかりやすい名前に置き換えます。
  • トリガータイプ：要素の可視性を選択します。

トリガー構成の場合、以下を設定します。

  • 選択方法：ドロップダウンからIDを選択します。
  • 要素ID ：送信済みメッセージ
    • これは、ステップ1で識別した一意のIDを使用して、追跡するサンキューメッセージを正確に指定します。
  • このトリガーを起動するタイミング：ページごとに1回
    • これは、 IDに一致する要素がビューアに表示されているときに、現在のページで1回だけ起動することを意味します。
    • 他の2つのオプションは、 CSSセレクターを使用してページ上で複数の要素を追跡する場合に役立ちます。
  • 最小可視パーセント：50
    • ここでは、パーセンテージで値を指定できます。これは、トリガーを起動するためにビューポートに表示する必要のある要素の量です。 したがって、値を「50」に設定すると、一致した要素の少なくとも50％が表示される必要があります。
    • デフォルトでは、イベントをトリガーするには、要素が画面に少なくとも50％表示されている必要があります。 私たちの場合、これで十分です。
  • DOMの変更を監視する：このボックスをオンにすると、DOMの変更に応じて表示される一致した要素をトリガーが追跡できるようになります。
    • この設定により、連絡先フォームが最初に読み込まれたときにDOM（ドキュメントオブジェクトモデル）に存在しない可能性のある要素の可視性を追跡できます。 つまり、これは、ありがとうメッセージを含むHTML要素が表示されるのを待ちます。
  • トリガーを起動するためのその他の条件：
    • このフォームに固有のIDを使用しているため、ここでこれ以上条件を設定する必要はありません。
    • このIDが他のフォームにも使用されている場合は、それぞれのフォームが表示されるページを含むようにページパスを設定することをお勧めします。

[保存]をクリックして、トリガーの設定を完了します。

Googleタグマネージャーの要素可視性トリガー

ステップ3：フォーム送信イベントタグを作成する

フォームの送信を追跡する最後のステップは、必要な情報を使用してGoogleAnalyticsでイベントを記録するタグを作成することです。 イベントは、前の手順で設定したElement VisibilityTriggerの条件が満たされたときに発生します。 次に、次のスクリーンショットに示すようにタグを作成します。

Googleタグマネージャーのお問い合わせフォーム送信イベントタグ

ステップ4：バージョンを保存し、テストし、公開する

作成したタグは、公開するまで機能しませんが、最初に、期待どおりに機能することを徹底的にテストする必要があります。 タグを保存したら、プレビューモードを有効にし（右上隅の[プレビュー]をクリック）、Webサイトにアクセスして、ページを更新します。

フォーム追跡のために、これらのテストシナリオを必ずカバーしてください。

  • お問い合わせフォームに記入せずに送信してください。 この場合、タグは起動しないはずです。
  • 正しい詳細をフォームに記入してから、[送信]をクリックしてください。 お礼のメッセージが画面に表示されるとすぐにタグが起動します。

Google Analyticsのリアルタイムイベントレポートには、すべてが正常に機能している場合にイベントのヒットが表示されます。 Google Tag Managerのテストの問題と、問題が発生した場合の修正方法に関するブログ投稿をお読みください。

すべてのテストが成功したら、GTMの[送信]ボタンをクリックできます。 この公開バージョンに、追加されたお問い合わせフォーム送信イベントのようなわかりやすい名前を付けて、[公開]をクリックします。

結論

標準のフォームトラッキングは設定が最も簡単ですが、オンサイトのJavaScriptが複雑なため、機能しないことがよくあります。 Element Visibility Triggerを使用すると、これらのエッジケースに対処する代わりの方法が提供されます。 また、データの信頼性と正確性が大幅に向上します。 このようにして、送信ボタンの無効または不要なクリックが追跡されるのではなく、実際に完了して正常に送信されたフォーム送信のみが追跡されるようにします。

Google Tag Managerチュートリアルでは、外部（アウトバウンド）リンクの追跡、ダウンロードリンクの追跡、および基本的なフォーム送信について説明しました。 追跡したい他の種類のイベントはありますか？ より複雑なケースについて支援が必要ですか？ お気軽にお問い合わせください–喜んでお手伝いいたします！ また、エキサイティングなアップデートについては、ニュースレターを購読してください。