Contact Form 7 のイベントを捕捉するためのGTMの設定

この記事はプロモーションが含まれています。

Contact Form 7 (CF7) のイベントをGoogleタグマネージャー (GTM) で設定する方法です。CF7の送信成功やその他のイベントをGTMで捕捉し、Googleアナリティクスなどに送信するための手順を説明します。

Contact Form 7 のイベントを捕捉するためのJavaScriptコードの追加 (dataLayerにプッシュ)

CF7には、フォームの送信状態に応じて特定のイベントが発火するJavaScriptイベントリスナーがあります。これを利用して、成功イベントなどをdataLayerにプッシュします。

通常、以下のJavaScriptコードをWordPressのテーマのfunctions.phpファイル、またはカスタムJavaScriptプラグインなどで追加します。これは、CF7の送信成功イベントを捕捉し、GTMが読み取れるようにdataLayerに情報をプッシュするものです。

JavaScript

document.addEventListener( 'wpcf7mailsent', function( event ) {
    // フォーム送信成功時にdataLayerにイベントをプッシュ
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'cf7_mail_sent',
        'form_id': event.detail.contactFormId,
        'form_name': event.detail.contactFormTitle,
        'form_fields': event.detail.inputs // 送信されたフィールド情報(必要であれば)
    });
}, false );

// その他のイベント(必要であれば)
// wpcf7mailfailed: 送信失敗
// wpcf7submit: 送信試行(成功・失敗問わず)
// wpcf7invalid: 入力エラー
// wpcf7spam: スパムと判定された場合

/* 例: フォーム送信失敗時
document.addEventListener( 'wpcf7mailfailed', function( event ) {
    window.dataLayer.push({
        'event': 'cf7_mail_failed',
        'form_id': event.detail.contactFormId,
        'form_name': event.detail.contactFormTitle
    });
}, false );
*/

このコードの追加方法:

  • WordPressテーマのfunctions.php: 非推奨ですが、テーマのfunctions.php<script>タグで囲んで直接書き込むこともできます。ただし、テーマを更新すると消える可能性があるので注意が必要です。
  • カスタムJavaScriptプラグイン: 推奨される方法です。Code SnippetsプラグインやCustom CSS & JSプラグインなどを使用して、WordPressのフッターに上記のJavaScriptコードを追加します。
  • GTMのカスタムHTMLタグ (非推奨): 理論的には可能ですが、GTMのコンテナが読み込まれる前にCF7のイベントが発生する可能性があるため、確実な捕捉ができません。上記のWordPressに直接コードを追加する方法を推奨します。

WordPressテーマ 【THE THOR(ザ・トール)】 は、 収益化に特化した機能が豊富に搭載されており、ブログやアフィリエイトサイトで収益を最大化するのに非常に適したテーマです。THE THORは、アフィリエイト収益の最大化を考慮して設計されています。

Googleタグマネージャー (GTM) の設定

上記のJavaScriptコードによってdataLayerにプッシュされたイベントをGTMで捕捉し、各種タグを配信します。

1. 変数の作成 (任意だが推奨)

プッシュされたform_idform_nameをGTMで利用できるように変数を作成します。

  1. GTM管理画面で「変数」→「ユーザー定義変数」→「新規」をクリック。
  2. 「変数の設定」で「データレイヤー変数」を選択。
  3. 「データレイヤーの変数名」に form_id と入力し、「データレイヤーのバージョン」は「バージョン2」のまま。「保存」。
  4. 同様に form_name も作成。

2. トリガーの作成

cf7_mail_sent イベントを捕捉するためのカスタムイベントトリガーを作成します。

  1. GTM管理画面で「トリガー」→「新規」をクリック。
  2. 「トリガーのタイプを選択」で「カスタムイベント」を選択。
  3. 「イベント名」に cf7_mail_sent と入力。
    • 重要: このイベント名は、上記JavaScriptコードで'event'としてプッシュした値と完全に一致させる必要があります。
  4. 「このトリガーの発生場所」は「すべてのカスタムイベント」または「一部のカスタムイベント」を選択。
    • 特定のフォームIDやフォーム名でのみ発火させたい場合は、「一部のカスタムイベント」を選択し、form_idなどのデータレイヤー変数を条件に設定します。
  5. トリガー名(例: CF7 - フォーム送信成功)を入力し、「保存」。

3. タグの作成

作成したトリガーを使って、Googleアナリティクスなどのタグを設定します。

例: Googleアナリティクス4 (GA4) イベントタグの設定
  1. GTM管理画面で「タグ」→「新規」をクリック。
  2. 「タグの設定」で「Google Analytics: GA4 イベント」を選択。
  3. 「測定ID」にGA4の測定ID (G-XXXXXXXXX) を入力、またはGA4設定タグを選択。
  4. 「イベント名」にGA4で表示したいイベント名を入力します。例えば form_submissioncontact_form_success など。
  5. 「イベントパラメータ」で、必要に応じてform_idform_nameをGA4に送信します。
    • 「行を追加」をクリック。
    • 「パラメータ名」に form_id、「値」にGTMで作成した{{form_id}}変数を選択。
    • 同様に form_name を追加。
    • (任意) event.detail.inputs を利用して、どのフィールドが送信されたかなどを詳細にGA4に送ることも可能です。ただし、個人情報が含まれないように注意してください。
  6. 「トリガー」で、2.2で作成したトリガー(例: CF7 - フォーム送信成功)を選択。
  7. タグ名(例: GA4 - CF7 フォーム送信成功)を入力し、「保存」。
例: Googleアナリティクス (ユニバーサルアナリティクス – UA) イベントタグの設定 (現在では非推奨)
  • 現在、GoogleアナリティクスはGA4が主流であり、UAは2023年7月1日にデータ処理が停止しました。新規で設定する場合はGA4をお勧めします。

テストとデバッグ

設定が正しく機能しているかを確認することが非常に重要です。

  1. GTM管理画面で「プレビュー」をクリック。
  2. サイトのURLを入力し、「Connect」をクリック。
  3. 新しいウィンドウでサイトが開きます。GTMのデバッグコンソールも同時に表示されます。
  4. サイト上でContact Form 7のフォームを送信します。
  5. GTMのデバッグコンソールで、cf7_mail_sent イベントがデータレイヤーにプッシュされたことを確認します。
  6. GTMのデバッグコンソールで、作成したGA4イベントタグが発火していることを確認します。
  7. GA4の「リアルタイム」レポートで、イベントが受信されていることを確認します。

注意事項

  • dataLayerの初期化: 上記JavaScriptコードの window.dataLayer = window.dataLayer || []; は、dataLayerがまだ存在しない場合に初期化するためのものです。GTMのコードスニペットがすでにdataLayerを初期化している場合でも、この記述があることで安全に利用できます。
  • 個人情報の取り扱い: フォームの送信内容に氏名、メールアドレス、電話番号などの個人情報が含まれる場合、それをそのままGoogleアナリティクスに送信することはGDPRや日本の個人情報保護法などのプライバシー規制に抵触する可能性があります。絶対に個人情報をGAに送信しないでください。 送信する情報に注意し、匿名化されたデータのみを使用してください。
  • jQueryとの競合: ごく稀に、WordPressのテーマや他のプラグインとのjQueryのバージョン競合により、CF7のJavaScriptイベントが正しく動作しない場合があります。
  • CF7のバージョン: CF7のアップデートにより、イベントの仕組みが変更される可能性もゼロではありません。もしうまく動作しない場合は、CF7の公式ドキュメントを確認してください。

これらの手順で、Contact Form 7のイベントをGoogleタグマネージャーで効果的に追跡できるようになります。

WordPressのアフィリエイトで重要なテーマとレンタルサーバーの選び方

WordPressはアフィリエイトに非常に適したプラットフォームです。自由度が高く、SEO対策やカスタマイズが容易なため、アフィリエイトサイトの構築に適しています。多くの成功事例があり、アフィリエイトで収益を上げたい人にとって有力な選択肢となります。

WordPressでアフィリエイトを始めるにあたって、テーマとレンタルサーバーは非常に重要な要素ですね。WordPressのテーマはサイトのデザインや機能に大きく影響します。アフィリエイトサイトに適したテーマを選ぶことで、読者にとって見やすく、商品が魅力的に映るサイトを構築できます。

テーマを選ぶ際のポイント

  • デザイン性: ターゲット層に合わせた魅力的なデザインであるか。
  • 機能性: 記事作成を効率化する機能(ボックス、ランキング、レビュー機能など)が充実しているか。
  • SEO対策: 検索エンジンに評価されやすい構造になっているか。
  • 表示速度: サイトの表示速度は、読者の離脱率やSEOにも影響します。高速表示に対応しているか。
  • サポート体制: 困った時に質問できるサポートがあるか。
  • レスポンシブデザイン: スマホやタブレットなど、様々なデバイスで閲覧しやすいか。

おすすめ有料テーマ


WordPressを運営するには、サイトのデータや画像を保存するレンタルサーバーが必要です。レンタルサーバーの性能はサイトの表示速度や安定性に直結するため、慎重に選びましょう。

レンタルサーバーを選ぶ際のポイント

  • WordPressの簡単インストール機能: 初心者でも簡単にWordPressを導入できる機能があると便利です。
  • 表示速度: サイトの表示速度はSEOにも影響します。高速なサーバーを選びましょう。
  • 安定性: サーバーダウンが少なく、安定して稼働するサーバーを選びましょう。
  • コストパフォーマンス: 料金と提供されるサービスのバランスが良いか。
  • サポート体制: トラブル時に迅速に対応してくれるサポートがあるか。
  • セキュリティ対策: 不正アクセスやマルウェアからサイトを守る機能が充実しているか。
  • ディスク容量: サイトのデータ量に応じて必要な容量があるか。

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


アフィリエイトに必要なSEOやSNSとの連携は専門知識も要求されます、外部サービスの利用を検討されてはいかがでしょう。