【複数フォーム対応】Contact Form 7のフォーム送信をGA4でコンバージョン計測する方法

GA4でContact Form 7のフォーム送信をコンバージョンとして計測する方法Google Analytics
スポンサーリンク

こんにちは、連久実子です。 

【計測方法が変わりました】Contact Form 7のGoogleアナリティクスでのイベントトラッキング
こんにちは、連久実子です。 WordPressでのサイト構築の際、プラグインは手軽に高度な機能を追加できるとても便利なツールです。 しかし、プラグインを利用して実装したボタンやフォームのイベントトラッキングをしたい場合、Googleアナリテ…
shuhu-marketing.com
2018.12.25

当サイトの中でも多くの方に読まれている上記の記事。プラグイン「Contact Form 7」が非常に多くの方に愛されていることがよくわかります。

ただ、2023年7月1日をもって、標準のユニバーサルアナリティクス版のGoogleアナリティクスでのデータ計測が終了となりますので、これに伴い上記の記事で解説した方法でのデータ計測もできなくなってしまいます。

そこで、GA4でContact Form 7のフォーム送信をコンバージョンとして計測する方法を紹介します。

他にもGA4でContact Form 7のフォーム送信をコンバージョンとして計測する方法を紹介しているブログをいくつか見つけたのですが、その多くはトリガーで「リンクのクリック」や「フォームの送信」を設定しているものでした。ただContact Form 7の公式サイトを確認するに、フォームが送信されてもメールの送信に失敗したりスパムのためメールを送信しないというケースもあるようで、こういった場合に「リンクのクリック」や「フォームの送信」ををトリガーとして設定していると正しく計測できるのかが定かではないことから、今回はContact Form 7の公式サイトで紹介されている方法をベースにしています。

フォーム送信を Google Analytics でトラッキングする | Contact Form 7 [日本語]
contactform7.com

一方Contact Form 7の公式サイトで紹介されている方法も、「ソースコードの記述がGA４で推奨しているイベントトラッキングの記述方法と異なる」「複数のフォームを設置している場合に対応できない」といった懸念点があります。

ちなみに、GA４で推奨しているイベントトラッキングのための記述方法は下記のページに記載されています。

イベントを設定する  |  Google アナリティクス 4 プロパティ  |  Google for Developers
developers.google.com

ですので、今回は下記の点に重きをおいた計測方法を考えてみました。

  • Contact Form 7の公式サイトで紹介されている方法がベース
  • GA４で推奨しているイベントトラッキングのための記述方法を採用
  • 複数のフォームを設置している場合にも対応可能
スポンサーリンク

イベントトラッキングの設定

まずはContact Form 7のフォーム送信をイベントデータとしてGoogleアナリティクスに送信するための設定を行います。Googleアナリティクスのトラッキングコードを＜head＞に直書きしている場合と、GTMを使っている場合で、方法が異なりますのでご注意ください。

Googleアナリティクスのトラッキングコードを＜head＞に直書きしている場合のイベントトラッキング方法

「テーマのための関数(functions.php)」ファイルを開く

WordPressのダッシュボード > 外観 > テーマの編集 で「テーマのための関数(functions.php)」を選択します。

下記のソースコードを追記

「テーマのための関数(functions.php)」に次のようにソースコードを追記します。

// Code from https://shuhu-marketing.com/web-marketing/google-analytics/tracking-contactform7-ga4/
add_action( 'wp_footer', function () { //<footer>内で実行します
?>
<script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      if ( '1' == event.detail.contactFormId ) { //contactform7のidが1の場合のみ
        gtag('event', 'generate_lead', { 'wpcf7_type': 'お問い合わせ'});
      }
      else if ( '2' == event.detail.contactFormId ) { //contactform7のidが2の場合のみ
        gtag('event', 'generate_lead', { 'wpcf7_type': 'テストフォーム'});
      }
      else { //上記以外のフォームの場合
        gtag('event', 'generate_lead', { 'wpcf7_type': 'その他のフォーム'});
      }
    });
</script>
<?php
}, 10, 0 );

6行目の「1」や9行目の「2」は、計測したいフォームのIDを入力します。IDを調べたい場合には、WordPressのダッシュボード > お問い合わせ > コンタクトフォーム から該当フォームのIDをご確認ください。

また、7行目の「お問い合わせ」や10行目の「テストフォーム」は、計測したいフォームのタイトルを入力します。タイトルを調べたい場合には、同じくWordPressのダッシュボード > お問い合わせ > コンタクトフォーム から該当フォームのタイトルをご確認ください。

コンタクトフォーム7管理画面

設置されているフォームがひとつの場合は、9〜11行目を削除したソースコードを「テーマのための関数(functions.php)」に追記すれば大丈夫です。

追記ができたら「ファイルを更新」ボタンを押してください。これで、完了です。

Googleタグマネージャ(GTM)を使っている場合のイベントトラッキング方法

「テーマのための関数(functions.php)」ファイルでソースコードを追記

トラッキングコードの直書きの場合と同じように、 WordPressのダッシュボード > 外観 > テーマの編集 で「テーマのための関数(functions.php)」を選択し、次のようにソースコードを追記します。

// Code from https://shuhu-marketing.com/web-marketing/google-analytics/tracking-contactform7-ga4/
add_action( 'wp_footer', function () { //<footer>内で実行します
?>
<script>
    document.addEventListener( 'wpcf7mailsent', function( event ) {
      if ( '1' == event.detail.contactFormId ) { //contactform7のidが1の場合のみ
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ 'event': 'wpcf7_submission', 'wpcf7_type': 'お問い合わせ' });
      }
      else if ( '2' == event.detail.contactFormId ) { //contactform7のidが2の場合のみ
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ 'event': 'wpcf7_submission', 'wpcf7_type': 'テストフォーム' });
      }
      else { //上記以外のフォームの場合
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ 'event': 'wpcf7_submission', 'wpcf7_type': 'その他のフォーム' });
      }      
    });
</script>
<?php
}, 10, 0 );

6行目の「1」や10行目の「2」は、計測したいフォームのIDを入力します。IDを調べたい場合には、WordPressのダッシュボード > お問い合わせ > コンタクトフォーム から該当フォームのIDをご確認ください。

また、8行目の「お問い合わせ」や12行目の「テストフォーム」は、計測したいフォームのタイトルを入力します。タイトルを調べたい場合には、同じくWordPressのダッシュボード > お問い合わせ > コンタクトフォーム から該当フォームのタイトルをご確認ください。
コンタクトフォーム7管理画面

設置されているフォームがひとつの場合は、10〜13行目を削除したソースコードを「テーマのための関数(functions.php)」に追記すれば大丈夫です。

追記ができたら「ファイルを更新」ボタンを押してください。

変数の設定

先程「テーマのための関数(functions.php)」ファイルに追記したソースコード内の変数名を定義します。

Googleタグマネージャの管理画面 ＞ ワークスペース ＞ 変数 ＞ ユーザー定義変数 を開いて、「event」「wpcf7_type」について、それぞれ下記のように設定してください。

GTM変数設定手順01

名前event
変数の種類カスタムイベント

GTM変数設定手順02

名前wpcf7_type
変数の種類データレイヤーの変数
データレイヤーの変数名wpcf7_type

設定できたら、それぞれ保存ボタンを押して保存してください。

タグの設定

Googleタグマネージャの管理画面 ＞ ワークスペース ＞ タグ と進み、新規ボタンをクリックして、下記のように新規タグを作成してください。

GTMタグ設定手順

名前GA4_EV_お問い合わせ
タグの種類Googleアナリティクス：GA4イベント
イベント名generate_lead
パラメータ名wpcf7_type
値{{wpcf7_type}}

トリガーの設定

上の設定が出来たら、同じ画面でトリガーを設定しましょう。

GTMトリガー設定手順

名前フォーム送信（GA4）
トリガーのタイプカスタムイベント
イベント名wpcf7_submission
このトリガーの発生場所全てのカスタムイベント

この設定までできたら「保存ボタン」をクリックしたあと、設定内容を公開してください。

プレビュー画面を確認して、下記の画面のように「wpcf7_submission」イベントのタイミングで「GA4_EV_お問い合わせ」タグが発火していたら、正しく設定ができています。

GTM動作確認手順

これで、完了です。

コンバージョンの設定

次に、Contact Form 7のフォーム送信を、Googleアナリティクスにてコンバージョンとして計測させるための設定を行います。この設定は、Googleアナリティクスのトラッキングコードを＜head＞に直書きしている場合も、GTMを使っている場合も同じ手順です。

コンバージョンイベントの定義

Googleアナリティクスの左メニュー ＞ 設定 ＞ コンバージョン と進み、新しいコンバージョンイベントボタンをクリックして、新しいイベント名に「generate_lead」と記入して保存ボタンを押してください。

GA4コンバージョン設定手順

正しく設定できていれば、DebugViewにて下記のように、黄緑アイコンの「generate_lead」が確認できます。

GA4コンバージョン動作確認手順

カスタムディメンションの定義

コンバージョンレポートでフォームの種類が識別できるよう、カスタムディメンションも設定しておきましょう。

Googleアナリティクスの左メニュー ＞ 設定 ＞ カスタム定義 と進み、カスタムディメンションを作成ボタンをクリックして、下記のように設定してください。

GA4カスタムディメンション設定手順

カスタムディメンション名フォームの種類
範囲イベント
イベントパラメータwpcf7_type

この設定までできたら「保存」をクリックしてください。これで、完了です。

コンバージョンの確認方法

Googleアナリティクスの左メニュー ＞ レポート ＞ ライフサイクル ＞ エンゲージメント ＞ コンバージョン と進むと、コンバージョンレポートを確認することができます。

ディメンション列の右側の「＋」マークをクリックし、カスタムタブから「フォームの種類」を選択すると、フォームの種類ごとの送信件数を確認することができます。

GA4コンバージョンレポート確認手順

上の動画みたいに技名で紹介しようと思ったんですが、複雑すぎて一撃必殺できませんでした…Web解析担当が使える必殺技募集中。

コメント