WP Forms にgoogleタグマネジャーのトリガーを設定する

GoogleタグマネージャーでWPFormsのトリガーを設定するには、通常、カスタムイベントを使用します。これは、WPFormsがフォーム送信時に特定のJavaScriptイベントを発火させ、そのイベントをGoogleタグマネージャーがリッスンするように設定するものです。

GoogleタグマネージャーでWPFormsのトリガーを設定する手順 ⚙️

1. WPFormsでの設定

WPFormsには、フォーム送信後にカスタムイベントを発火させるための設定は直接ありません。そのため、通常はWPFormsのカスタムスニペット機能またはWordPressのフックを利用して、フォーム送信成功時にデータレイヤーにイベントをプッシュするJavaScriptコードを追加します。

以下のコードスニペットは、WPFormsが成功裏に送信されたときにGoogleタグマネージャーのデータレイヤーにカスタムイベントをプッシュする方法の例です。

<script>
document.addEventListener( 'DOMContentLoaded', function() {
    if ( typeof wpforms != 'undefined' ) {
        wpforms.init(); // WPForms初期化を確実にする
        wpforms.ready( function() {
            $( document ).on( 'wpformsAjaxSubmitSuccess', function( event, data ) {
                if ( data.form_id ) {
                    window.dataLayer = window.dataLayer || [];
                    window.dataLayer.push({
                        'event': 'wpforms_submission_success',
                        'formId': data.form_id,
                        'formName': data.form_name // WPFormsのバージョンによってはform_nameが利用可能
                    });
                }
            });
        });
    }
});
</script>

このコードの追加場所:

• WordPressのテーマのfunctions.php: このファイルに直接追加することも可能ですが、テーマのアップデートで消える可能性があるため、子テーマを使用するか、Code Snippetsのようなプラグインを使用することをおすすめします。
• GoogleタグマネージャーのカスタムHTMLタグ: GTM内でこのコードを直接配信することも可能ですが、フォームのロードタイミングによってはイベントをキャッチできない場合があります。上記のようにWordPress側で直接出力する方が確実です。

コードの解説:

• wpformsAjaxSubmitSuccess: WPFormsがAJAXでフォーム送信に成功した際に発火するイベントです。
• window.dataLayer.push: Googleタグマネージャーのデータレイヤーに情報をプッシュします。
• 'event': 'wpforms_submission_success': カスタムイベント名を設定します。この名前をGTMのトリガーで指定します。
• 'formId': data.form_id: 送信されたフォームのIDをデータレイヤーに渡します。
• 'formName': data.form_name: 送信されたフォームの名前をデータレイヤーに渡します（利用可能な場合）。

2. Googleタグマネージャーでの設定

WPFormsからカスタムイベントがデータレイヤーにプッシュされるようになったら、次にGoogleタグマネージャーでそのイベントをキャッチするトリガーとタグを設定します。

2.1. 変数の作成 (推奨)

フォームIDやフォーム名を後で利用したい場合（特定のフォームの送信を追跡する場合など）は、データレイヤー変数を作成します。

1. Googleタグマネージャーのワークスペースで、「変数」に移動します。
2. 「ユーザー定義変数」の下の「新規」をクリックします。
3. 変数のタイプとして「データレイヤーの変数」を選択します。
4. 「データレイヤーの変数名」に、上記JavaScriptコードで設定したキー名（例: formId、formName）を入力します。
5. 変数に分かりやすい名前（例: dlv - formId、dlv - formName）を付けて保存します。

2.2. トリガーの作成

1. Googleタグマネージャーのワークスペースで、「トリガー」に移動します。
2. 「新規」をクリックします。
3. 「トリガーのタイプを選択」で、「カスタムイベント」を選択します。
4. 「イベント名」に、上記JavaScriptコードで設定したカスタムイベント名（例: wpforms_submission_success）を正確に入力します。
5. 「このトリガーの発生場所」は、「すべてのカスタムイベント」のままで構いません。もし特定のフォーム送信時のみタグを発火させたい場合は、「一部のカスタムイベント」を選択し、作成したデータレイヤー変数（dlv - formIdなど）を使って条件を設定します。
   • 例: dlv - formId が 特定のフォームのID と等しい
6. トリガーに分かりやすい名前（例: カスタムイベント - WPForms送信成功）を付けて保存します。

2.3. タグの作成

作成したトリガーを使って、Googleアナリティクス（GA4）イベントやGoogle広告コンバージョンなどのタグを設定します。

例: GA4イベントタグの作成

1. Googleタグマネージャーのワークスペースで、「タグ」に移動します。
2. 「新規」をクリックします。
3. 「タグのタイプを選択」で、「Googleアナリティクス：GA4イベント」を選択します。
4. 「測定ID」に、あなたのGA4の測定ID（G-XXXXXXXXXX）を入力します。
5. 「イベント名」に、GA4で追跡したいイベント名（例: form_submission）を入力します。
6. 「イベントパラメータ」で、必要に応じてデータレイヤー変数を使ってフォームIDやフォーム名などの情報をGA4に送信します。
   • 例:
     • パラメータ名: form_id、値: {{dlv - formId}}
     • パラメータ名: form_name、値: {{dlv - formName}}
7. 「トリガー」セクションをクリックし、先ほど作成した「カスタムイベント – WPForms送信成功」トリガーを選択します。
8. タグに分かりやすい名前（例: GA4 - WPForms送信成功）を付けて保存します。

3. テストと公開

1. Googleタグマネージャーの「プレビュー」モードを使用し、WPFormsのフォームを送信して、設定したトリガーが正しく発火し、タグが配信されているかを確認します。
2. Googleアナリティクスのリアルタイムレポートでも、イベントが計測されているかを確認します。
3. すべてが正しく機能していることを確認したら、Googleタグマネージャーのワークスペースを「公開」します。

この設定により、WPFormsのフォーム送信がGoogleタグマネージャーを通じて正確に追跡できるようになります。

ココナラ ココナラは、「知識・スキル・経験」を売り買いできる、日本最大級のスキルマーケットです。個人が持つスキルをオンライン上でサービスとして出品し、それを必要とする人が購入するという仕組みです。出品から購入まで、すべてのやり取りはココナラのシステムを通して行われるため、安心して利用できるのが特徴です。

ココナラで提供されているGoogleタグマネージャー（GTM）に関するサービスは多岐にわたります。主なサービス内容としては、以下のようなものが挙げられます。

• GTMの導入・設定代行: GTMのアカウント開設から、ウェブサイトへのコード設置、初期設定までを代行するサービスです。WordPressなどのCMSサイトへの設置も、追加費用で対応可能な出品者もいます。
• 各種タグの設置代行: GTMを使って、Googleアナリティクス（GA4）、Google広告、Facebook広告などのコンバージョンタグやリマーケティングタグ、ヒートマップツールなどのタグを設置するサービスです。
• イベント計測設定代行: ウェブサイト上の特定のユーザー行動（ボタンクリック、フォーム送信、動画再生など）を計測するためのイベント設定を代行するサービスです。
• GTMに関する相談・レクチャー: GTMの使い方がわからない、設定方法で困っているといった初心者や中級者向けに、オンラインで相談に乗ったり、設定方法をレクチャーしたりするサービスもあります。
• 複雑な設定の代行: eコマースサイトの売上計測、特定のページへのアクセス状況を細かく分析したいなど、複雑な設定を専門的に代行するサービスも提供されています。

サービスを利用する際のポイント

• 事前に相談内容を整理する: 依頼したい内容や、実現したいことを具体的にまとめておくと、スムーズにやり取りができます。
• 必要な情報を事前に準備する: GTMの設定には、ウェブサイトのサーバー情報やGoogleアカウントのID・パスワードなどが必要になる場合があります。事前に出品者から確認し、準備しておきましょう。
• 実績や評価を確認する: 出品者の過去の実績や評価、レビューなどを確認することで、信頼できる出品者を見つけやすくなります。

ココナラには、初心者向けの簡単な設定から、専門的な知識を要する高度な設定まで、幅広いニーズに対応したサービスが多数出品されています。