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コードで設定したキー名(例: formIdformName)を入力します。
  5. 変数に分かりやすい名前(例: dlv - formIddlv - 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タグマネージャーを通じて正確に追跡できるようになります。

【PR】 抜群に上位表示されやすい WP テーマ 【ザ・トール】 は、SEOに強いと評価されており、SEOに特化した機能が標準搭載、内部SEO対策の実践、100%レスポンシブ対応、集客・収益支援システムなどが特徴です。 ただし、注意点として、THE THORは機能が豊富である分、設定項目が複雑に感じる場合もあるようです。しかし、公式サイトや他のブログで設定方法に関する情報が豊富に提供されているため、それらを参考にすれば使いこなせるでしょう。

WordPressでSEOを強化するテーマとレンタルサーバー

SEOに強いテーマとレンタルサーバーの組み合わせは、ウェブサイトのパフォーマンスと検索エンジンでの視認性を大きく左右します。以下にそれぞれのおすすめと選び方のポイントをまとめました。

SEOに強いWordPressテーマは、主に以下の要素を重視して選ぶと良いでしょう。

  • 表示速度の速さ: ページの読み込み速度はSEO評価に直結します。軽量で最適化されたテーマを選びましょう。
  • モバイルフレンドリー(レスポンシブデザイン): スマートフォンからのアクセスが増えている現代において、どのデバイスでも見やすく表示されるレスポンシブデザインは必須です。
  • 内部SEO対策済み: パンくずリスト、適切なHTML構造(hタグの最適化)、schema.orgなどの構造化データ対応、SNSシェアボタンの設置などがデフォルトで備わっていると、手動での設定の手間が省けます。
  • カスタマイズ性: デザインや機能の自由度が高いと、サイトの目的に合わせて最適な形に調整できます。ただし、過度なカスタマイズは表示速度低下の原因にもなるため注意が必要です。
  • サポート体制と更新頻度: テーマの不具合修正やWordPress本体のアップデートへの対応など、サポートがしっかりしているテーマを選ぶと長期的に安心して利用できます。

おすすめテーマ


サーバーはWordPressサイトの「土台」となるため、SEOに与える影響も大きいです。特に以下の点に注目してサーバーを選びましょう。

  • 表示速度(高速性): サーバーの応答速度が速いことは、ユーザー体験の向上だけでなく、Googleのランキング要因としても重要です。SSDストレージ、HTTP/2、LiteSpeedなどの高速化技術を導入しているサーバーがおすすめです。
  • 安定性(稼働率): サーバーが頻繁にダウンしたり不安定だと、サイトにアクセスできなくなり、SEO評価に悪影響を与えます。稼働率の高い信頼できるサーバーを選びましょう。
  • WordPressに最適化されているか: WordPress専用の高速化機能や、WordPressの自動インストール、自動バックアップ機能などが充実しているサーバーは、運用が楽になります。
  • SSL証明書(HTTPS): 今やWebサイトのHTTPS化は必須です。無料のSSL証明書を提供しているサーバーを選びましょう。
  • サポート体制: サーバーに関するトラブルが発生した際に、迅速かつ的確なサポートが受けられるかどうかも重要です。

おすすめレンタルサーバー


SEO(検索エンジン最適化)は、単一の施策だけで完結するものではなく、様々な付帯サービスやツールと連携することで、より効果を高めることができます。主な付帯サービスとしては、以下のようなものが挙げられます。SEO対策やSNSとの連携は専門知識も要求されます、外部サービスの利用を検討されてはいかがでしょう。