Googleタグマネージャーチュートリアルパート3:フォーム送信の追跡– 2020年更新

公開: 2020-09-10

更新されたGoogleタグマネージャーチュートリアルのパート2では、ダウンロードリンクの追跡について説明しました。 あなたがそれを逃したならば、あなたはここから始めたいと思うかもしれません。 この第3部では、非常に人気のあるトピックであるフォームの送信について詳しく見ていきます。 多くのキャンペーンの目標はお問い合わせフォームを介してリードを生成することであり、これらはキャンペーンの成功を測定するコンバージョンであるため、ほとんどのマーケターはこれを追跡することに関心があります。

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

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

以下の手順に従って、フォーム送信追跡を設定します。

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

お問い合わせフォームの例を使用して、これを設定する方法を示します。 以下の手順では、一般的なプロセスについて説明し、特定のWebサイトでどの部分を変更する必要があるかを示します。

最初のステップは、フォームの識別に役立つものを見つけることです。 これを行うには、フォームのHTML要素を調べて、このフォームを一意に識別するのに役立つものを決定します。

Webサイトのフォームを調べるには、右クリックしてブラウザの開発者ツールにアクセスします。 (たとえば、Chromeでは、検査する要素を右クリックして[検査]を選択します。)これにより、コンテンツ、CSSクラス、その他の要素など、フォームに固有のさまざまな属性が表示されます。

以下の例では、フォームのIDがcontact-formであることがわかります。 IDは適切な識別子であり、通常は要素に固有であり、Webサイトの他の場所では使用されません。 フォームに一意のIDがない場合は、フォームクラス、フォームアクションのページURL、またはフォームテキストを使用して、この特定のフォームを識別することもできます。 idまたはclassesを使用するのが最も簡単なので、可能であればこれらを使用することをお勧めします。

最後の手段として、フォームが表示されるページURLを使用してそれを識別することができますが、これには注意してください。 検索ボックスなど、ページに別のフォームがある場合、このフォームが連絡フォームイベントをトリガーする可能性があります。

Form要素のID属性を強調するWebサイトのHTMLコード

ステップ2:組み込みのフォーム変数を有効にする

イベントタグの構成には、組み込み変数のフォームID (または、フォームに一意のクラスがある場合はフォームクラス)が必要です。 以前にこの変数を使用したことがない場合は、それを選択して有効にする必要があります。 そのためには、GTMのインタフェースであり、組み込み変数セクションの変数へのナビゲートが設定]をクリックします。 さまざまなフォーム変数までスクロールし、フォームIDでチェックマークを設定します

フォームIDがチェックされたGoogleTagManagerの組み込み変数構成ページ

ステップ3:フォーム送信トリガーを作成する

このトリガーは、お問い合わせフォームの送信が正確に何であるかを定義します。 Webサイトの特定のページで送信されたフォームをリッスンし、連絡フォーム用に特別に設定した条件を満たしているかどうかを確認します。

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

  • 左側のサイドバーの[トリガー]に移動して、新しいトリガーを作成します。
  • Untitled Triggerを、 Form Submission – ContactFormのようなわかりやすい名前に置き換えます
  • トリガータイプ:フォーム送信を選択します。 これにより、送信されたフォームがリッスンされます。

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

  • [タグを待つ]チェックボックスをオンにしないでください。 フォームの送信が中断される可能性があるため、フォームでデフォルトでこのオプションを使用することはお勧めしません。 徹底的にテストすれば使用できます。
  • チェックボックスチェックボックスの検証をチェックします。 これにより、フォームが実際に送信されたことが確認されます。
  • 次の場合に有効にします。
    • ページパスには連絡先が含まれています。

これにより、パスに連絡先があるページ(https://amazeemetrics.com/contactなど)でトリガーが有効になります。 これを変更して、お問い合わせフォームを含むWebサイトの1つまたは複数のページでトリガーを有効にする必要があります。 必要に応じて、すべてのページでトリガーを有効にすることもできます。

  • 発砲:
    • オプションを選択します。フォームIDはcontact-formと同じです。

これは、ステップ2で有効にした変数と、ステップ1で識別した一意のIDを使用して、連絡先フォームの送信として追跡するフォームを正確に指定します。

  • フォームIDを、手順1で見つけた識別子と手順2で有効にした対応する変数に変更します。

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

Googleタグマネージャーフォーム送信トリガー構成ページ。

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

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

  • > [タグ] > [新規]に移動して、新しいタグを作成します
  • GA –イベント–お問い合わせフォームの送信
  • タグの構成として、タグタイプとしてGoogle Analytics:UniversalAnalyticsを選択します。
  • トラックタイプ:イベント
  • カテゴリ:フォームを入力
  • アクション:お問い合わせフォームの送信を入力してください。 使用するイベントの命名規則に一致するように、イベントのカテゴリとアクションの名前を変更できます。
  • ラベル: Successfulと入力ます。 これはオプションであり、これを変更するか、フィールドを空白のままにすることができます。
  • 非インタラクションヒット:デフォルト設定のfalseのままにします。 これは、このイベントがサイトでのインタラクションとしてカウントされるため、バウンス率が変わることを意味します。

最後のステップとして、特定の条件が満たされたときにタグを起動するために、ステップ3で作成したトリガーを選択します。 最終設定の概要は次のとおりです。

お問い合わせフォームイベントが設定されたGoogleAnalyticsイベントタグ設定ページ。

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

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

フォーム送信の追跡については、次のテストシナリオを必ずカバーしてください。

  • フォームに記入せずに送信ボタンをクリックします。 この場合、タグは起動しないはずです。
  • 正しい詳細をフォームに記入してから、[送信]をクリックしてください。 タグが起動するはずです。

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

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

次のチュートリアルが近づいています

フォーム送信トリガーの使用は、連絡先フォームの追跡をマスターするための簡単なアプローチです。 ただし、フォームとそのテクノロジーによっては、これが常に機能するとは限りません。 フォームにはさまざまな形やサイズがあります。そのため、柔軟性を高めるためにさまざまな追跡手法を提示するのが適切であると考えました。

フォームを追跡するためのより高度なアプローチであるElementVisibility Triggerについては、今後のブログ投稿にご注目ください。