Google タグマネージャー経由の Google アナリティクス (GA4) によるフォームイベントトラッキングの簡素化

すでにGoogle Analyticsバージョン3とEffortless Formsの統合についてご存知かと思います。 Google アナリティクス 4 は、バージョン 3 より新しく、やや複雑で異なる「ユニバーサルアナリティクス」と呼ばれるバージョンです。まずはバージョン 3 のガイドを確認して理解を深めることをお勧めします。ただし、初めての方は、このガイドに従って進めれば問題はありません。Effortless Forms と Google Analytics から Google Tag Manager などの主要なプラットフォームとの強力な統合および分析機能を紹介するために、適切でわかりやすい手順を提供することを目指しています。

前置きはこれくらいにして、早速始めましょう！

まず、Google タグマネージャー (GTM) と Google アナリティクス (GA) が Web サイトのデータと連携したり、さまざまなプラットフォーム間でデータを共有したりする方法を見てみましょう。

このチュートリアルでは、Google タグマネージャーを使用して、Effortless Forms イベントの 2 つのバリエーション (フォームの表示とフォームの送信) を追跡し、その後、イベントを GA に送信して視覚的な表現と詳細な調査を行います。GTM を介してフォームイベントを監視するには、複数の手法があります。Effortless Forms は、異なるフォーム状態で jQuery イベントをトリガーし、カスタムコードを介して Google タグマネージャーによるイベント追跡プロセスを簡素化し、プレビューモードなどの GTM 内での高度なトラブルシューティングの必要性を排除します。

Google タグマネージャーがウェブサイトのすべてのページにグローバルにインストールされていることを前提としています。GTM を通じて Effortless Forms イベントのトラッキングを実装するには、以下の手順に注意深く従ってください。

ここでは、Effortless Forms イベントのために GTM 内で操作し、その後 Google Analytics にデータを中継する要素の内訳を示します。

タグ

トリガー

変数

3 (必須 2、オプション 1)

タイプ

cHTML、
GA 4 構成

カスタムイベント

2 データレイヤー、
1 JavaScript

また、既存の変数 [イベント] を使用して、Effortless Forms で発生するイベントの種類を区別します。

1. 簡単なフォーム変数の作成:

変数は、属性とそれに対応する値を定義するさまざまなデータ型を表します。 または ウェブサイトから発送されます。

アクセス Google タグマネージャー ダッシュボードに移動変数、次に ユーザー定義変数、 クリック 新しい ボタン。

あなたの変数次のようになります:

タイトル

簡単なフォームID

変数タイプ

データレイヤー変数

データレイヤー変数名

簡単なフォームID

データレイヤーバージョン

バージョン2

作成する もう一つの変数 次の設定を使用します。

タイトル

簡単なフォームイベントアクション

変数タイプ

データレイヤー変数

データレイヤー変数名

イベントアクション

データレイヤーバージョン

バージョン2

[オプション] 確立 もう一つの変数 以下の設定で表示します フォームページタイトル:

2. 簡単なフォームの作成トリガー:

トリガーは、GTM が意図どおりにタスクを実行するタイミングを正確に特定する上で非常に重要です。たとえば、Effortless Form を含む Web ページが読み込まれると、誰かが Effortless Form を送信すると GTM はどのような処理を実行するでしょうか。

Effortless Formsのトリガーを設計するには、 トリガーを訪問 そして追加 新しい 下図のようにトリガーします。

その後、目的のトリガーについて次の詳細を遵守します。

タイトル

簡単なフォームアクティビティイベント

イベントタイプ

カスタムイベント

イベント名

簡単なフォームアクティビティ

トリガー発動

すべてのカスタムイベント

3. 簡単なフォームの作成タグ:

タグは、Google タグマネージャーで実行する機能を表します。タグにはさまざまなタイプがあり、要件に基づいて構成されます。トリガーがアクティブ化され、タグで定義されたタスクが実行されるという自動化されたアクションに似ています。

私たちは Google アナリティクス: GA4 設定 タイプの 鬼ごっこ ウェブサイトからフォームイベントデータを送信するために カスタム JavaScript スニペット ウェブページに追加されるほか、GTM自体が別の カスタム HTML タグの種類。

まずは作成してみましょう カスタム HTML 次の手順に従ってタグ付けします。

に行くタグクリック 新しい

選択する タグタイプ として カスタム HTML 提供されたカスタムコードを GTM コードエディターに挿入し、以下のデータと組み合わせてください。

タイトル

cHTML – 簡単なフォームデータプッシュ

タグタイプ

カスタム HTML

<script>
   (function($){
     var effortlessForms = $('.frm-fluent-form');
     effortlessForms.each(function() {
       var ``form = ``(this);
       var formId = $form.attr('data-form_id');
       dataLayer.push({
        'event': 'EffortlessFormActivities',
        'eventCategory': 'EffortlessForm',
        'eventAction': 'FormView',
        'EffortlessFormID' : formId
      });
   $form.on('effortlessform_submission_success', function() {
     dataLayer.push({
       'event': 'EffortlessFormActivities',
       'eventCategory': 'EffortlessForm',
       'eventAction': 'FormSubmitted',
       'EffortlessFormID' : formId
     });
   });
  });
 }(jQuery));
</script>