すでに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 にデータを中継する要素の内訳を示します。
タグ
トリガー
変数
2
1
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>
コードを挿入したら、 トリガー フィールドと選択 トリガーの発動 として ページ表示 [全ページ] 下図の通りです。
目標の達成に近づいてきたので、イベント データを取得して Google Analytics に転送する最後のタグを 1 つ作成する必要があります。また、Google Analytics に送信される属性のフォーマットも行います。
また、 訪問 タグ 選択して Googleタグ 以下のように表示されます。
その後、 Google アナリティクス 4 測定 ID 設定変数を構成します。
タイトル
エフォートレスフォーム – GA4
タグタイプ
Google アナリティクス: GA4 設定
測定ID
G-XXXXXXXX [指示に従ってください
[次のコードスニペットをコピーしてください]
入力する情報:
ディスプレイモード
真実
デバッグビューを有効にするには
イベントの種類
{{機会}}
カスタムとして選択
イベント手順
{{FluentFormEventMethod}}
カスタムとして選択
シート番号
{{FluentFormSheetNumber}}
カスタムとして選択
フォームニックネーム
{{FluentFormName}}
カスタムとして選択
グoogle Analytics 4 識別ID
を取得するには Google アナリティクス 4 識別ID以下の手順に従ってください。
あなたの Google 分析ダッシュボード クリックして 管理者 (設定アイコン ページの左下にあります）
次に、対象のアカウントを選択するか、希望の詳細で新しいアカウントを作成します。また、すでに存在する場合は既存の資産を選択するか、希望の詳細で新しい資産を作成します。資産名の下にデータ ストリーム オプションがあります。これを選択して続行します。
その後、新しい データフロー サイトがまだセットアップされていない場合は、オンラインとして設定してください。 ユニフォーム リソース ロケータ (URL) 議定書と ストリーム指定.
[任意] 次に、 設定アイコン Fluent Forms イベントの監視にのみ必要なデータを厳選します。ページ ビューのみが重要です。他のデータ カテゴリを追加すると、Fluent Forms イベントには不要な無関係な情報が Google Analytics に導入されます。
選択を投稿する 保存すると、データフローの詳細が表示され、 識別ID、統合に必要な Google タグマネージャー.
さて、前回の ラベル 作成されました。 Google アナリティクス 設定では、前述と同様にトリガーの指定に進みます カスタム HTML 設定。
今回は、以前に生成されたものを選択します 引き金 吹き替え FluentFormアクティビティイベント
その後、タスクは完了します。実行された操作をライブでデバッグするには、 プレビューモード または設定を公開して有効にする 出版 から ワークスペース.
意味のある バージョンタイトルこれは、将来の取り組みのために何でも構いません。将来的に問題が発生した場合、以前の作業を特定し、必要に応じてこのフェーズに戻るのに役立ちます。
Fluent Forms でこの手法を確認したら、ワークスペースを公開し、Fluent Form を含むページにアクセスし、フォームを通じて詳細を送信し、Google Analytics 内のイベントを調べることで、Google Analytics で検証します。
4. Google Analyticsの最終的な出力
テスト中のフォーム サンプルは、次の図のようになります。
ページが読み込まれると、インタラクションがなくても、フォームはGTMにFormViewというイベントをトリガーし、セットアップを開始してデータを表示します。 Google アナリティクス.
拡大する ページビュー 総合的な洞察を得るためのイベント。
フォーム送信後、追加のイベントが発生し、 フォームを送信しました
4つのうちいずれかを展開 イベントデータ 詳細については、カテゴリをご覧ください。
Google Analytics 4の注目すべき機能は、Fluent Formsイベントで探索されるのを待っています。 デバッグビュー タグマネージャ内 Google アナリティクス GA4 セットアップが完了したら、以下のようにこの機能を調べることができます。
これでプロセスは完了です。サイト上のすべての Fluent Forms のイベントが Google Analytics に転送されるようになります。
抱きしめる 流暢なフォーム WordPress の主なフォーム プラグインとして!
EN 
ZH 
ZH_CN 
JA 
KO