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タグマネージャーを通じて正確に追跡できるようになります。