My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

※ 当サイトはアフィリエイト広告を利用しています

Contact Form7のコンバージョン計測方法紹介

f:id:sntkk3:20180924182737p:plain

「Contact Form 7」とは、
WordPressにメールフォームを設置するためのプラグインです。
ja.wordpress.org


今日は、WordPressプラグイン「Contact Form 7」 のコンバージョンをGoogle Analytics で計測する方法についてお伝えいたします。

Google AnalyticsでContact Form7のコンバージョン計測するには

手順

必要なこと

Step1. Google Analyticsと対象WordPressサイトを連携する
Step2. Contact Form7のコンバージョン計測用スクリプトを設置する
Step3. Google Analytics側でコンバージョンの設定をする


Step1. Google Analyticsと対象WordPressサイトを連携する

1. Google Analyticsに対象サイトを登録します。
2. トラッキングコードを取得します。
3. 対象サイトのhead部分に上記トラッキングコードを設置します。

※上記手順詳細については、ここでは割愛させていただきますが、以下記事がとても参考になるかと思いますのでご参照ください。

【参考記事】
GoogleAnalyticsの設定方法&使い方!トラッキングコードをワードプレスに設置する方法を解説
http://maistylecreate.com/wordpress/1681/

Step2. Contact Form7のコンバージョン計測用スクリプトを設置する

Contact Form7の送信アクションをイベントとして計測するためのタグをサイト内headタグに設置します。

参照:Contact Form7 公式ページ
https://contactform7.com/ja/tracking-form-submissions-with-google-analytics/


【Contact Form7 紐づけ用コード】
[スクリプト] 基本形

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', '【カテゴリ名】', '【アクション名】', '【ラベル】');
}, false );
</script>

[スクリプト] 実装例 - メールフォームが1つの場合

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', 'Contact Form', 'submit');
}, false );
</script>

[スクリプト] 実装例 - メールフォームが複数の場合
※メールフォームのIDとラベルでメールフォームの別を識別します

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if('26' == event.detail.contactFormId) {
  ga('send', 'event', 'Contact Form', 'submit', 'コンタクトフォーム 1');
} else if('149' == event.detail.contactFormId) {
  ga('send', 'event', 'Contact Form', 'submit', 'コンタクトフォーム 2');
},
} false );
</script>

Contact Form7のIDは、以下方法で確認します

「お問合せ」-「コンタクトフォーム」をクリックします。
f:id:sntkk3:20180923231904p:plain

Contact Form一覧の設定画面でForm IDが確認できます。


Step3. Google Analytics側でコンバージョンの設定をする

Analytics側で通知されたイベントにコンバージョンの設定をします。
目標の設定方法については、以下Googleでのご案内を参照してください。
support.google.com

なお、ここで設定するイベントの条件としては、以下のように設定します。
f:id:sntkk3:20180923233104p:plain

各値を以下のように設定します。
カテゴリ:Contact Form
アクション:submit
ラベル:なし
値:なし


※コンバージョン設定が完了したら、Contact Form7のテスト送信を行うなどして、計測が正常に行われているかをご確認ください。

※計測が反映されるのに、1~2日かかる場合があるようですので、即時反映されなくてもしばらく待って様子を見てみてくださいね。

以上、ご参考まで。

※ 当サイトはアフィリエイト広告を利用しています