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

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

【計測方法が変わりました】Contact Form 7のGoogleアナリティクスでのイベントトラッキング

こんにちは、連久実子です。 WordPressでのサイト構築の際、プラグインは手軽に高度な機能を追加できるとても便利なツールです。しかし、プラグインを利用して実装したボタンやフォームのイベントトラッキングをしたい場合、Googleアナリテ…

当サイトの中でも多くの方に読まれている上記の記事。プラグイン「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 [日本語]

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

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

イベントをセットアップする | Google Analytics | Google for Developers

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

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

イベントトラッキングの設定
1. Googleアナリティクスのトラッキングコードを＜head＞に直書きしている場合のイベントトラッキング方法
  1. 「テーマのための関数(functions.php)」ファイルを開く
  2. 下記のソースコードを追記
2. Googleタグマネージャ(GTM)を使っている場合のイベントトラッキング方法
コンバージョンの設定
1. コンバージョンイベントの定義
2. カスタムディメンションの定義
コンバージョンの確認方法

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

まずは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のダッシュボード > お問い合わせ > コンタクトフォームから該当フォームのタイトルをご確認ください。

設置されているフォームがひとつの場合は、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のダッシュボード > お問い合わせ > コンタクトフォームから該当フォームのタイトルをご確認ください。

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

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

変数の設定

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

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

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

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

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

タグの設定

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

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

トリガーの設定

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

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