2019年最新【Contact Form 7】reCAPTCHA v3 導入とフォームのコンバージョン率設定

2019年8月23日2020年2月24日Googleアナリティクス＆サチコ,WordPressプラグイン編,WordPress関連,マーケティング知識,もっとWordPressを知ろう編

プラグイン Contact Form 7とは

Contact form7は、WordPressに問い合わせページを作るときにとても便利なプラグインの代表です。

本来、自分で問い合わせページを作成する場合には、ある程度難しい専門的な知識が必要になります。

Contact form7 はカンタンに設定できるので、WordPressサイトであれば、専門的な知識のない方でも、簡単に問い合わせページを作ることができます。

日本の開発プラグインではありますが、日本のみならず、海外でも広く使われています。

カンタン！Contact Form 7での reCAPTCHA v3 導入方法

まずはreCAPTCHA v3の「サイトキー」と「シークレットキー」を取得します。

[blogcard url="https://fanmake-blog.com/?p=10806#reCAPTCHA-v3-2″]　

以下は該当ページからの引用部分も含みます。

１、専用Webサイトへ行く

こちらのWebサイトをご覧ください。

[blogcard url="https://www.google.com/recaptcha/intro/v3.html"]

画像中央の 「Learn more ボタン」を押します。

次のようなページが表示されます。

２、テキストリンク「here」をクリック

赤枠にある「here」というリンクをクリックしてください。

３、新しいサイトを登録する

1. ラベル
   複数登録したときに判別できるように、わかりやすい名前を「ラベル」に入力し設定します。
2. reCAPTCHAタイプ
   「reCAPTCHA v3」にチェックを入れます。
3. ドメイン
   フォームを設定するドメインを設定します。
   複数のドメインを設定できます（1行1ドメイン）。
   メールフォームのドメインは必ず指定しましょう。
   たとえば、私の場合はAgentMailというメルマガ配信システムを使っていますが、メールフォームのドメインが「www.agentmail.jp」となりますので、設定ドメインの１つとしています。
4. オーナー
   Gmailのアカウントを持っていて、ログイン済みの場合はGmailアドレスが表示されます。
   その他の人にも知らせる場合は人マークの部分にメールアドレスを入力しましょう。
5. reCAPTCHA 利用条件に同意する
   「同意」にチェックします。
6. アラートをオーナーに送信する
   最初からチェックボックスにチェックされています。
   サイトで問題が検出された場合にアラートを受け取ります。
   チェックしたままにしておくことをオススメします。
7. 送信
   送信ボタンを押します。

４、サイトキー（ site key )とシークレットキー（ secret key )を控えておく

フォームに設定したり、サイトに設定するときのために、サイトキーとシークレットキーを控えておきます。

５、控えておいたサイトキーとシークレットキーを入力

ここからはいよいよ、控えておいたサイトキー、シークレットキーの入力です。

WordPressの「お問い合わせ」＞「インテグレーション」に進みます。
「reCAPTHA」＞「インテグレーションのセットアップ」へ。
該当箇所に控えておいた「サイトキー」「シークレットキー」を入力し保存します。

Contact Form７のコンバージョン率計測！設定方法【最新】

前提として、以前使えた、コンバージョン設定方法が、今は使えない……。

以前は、Contact Form7の「その他の設定」部分に、on_sent_okなどの Javascriptの記述を入れ、サンクスページを指定することで、コンバージョン率を測る設定ができたのですが、最新版のContact Form7では、このスクリプトはサポートされなくなりました。

注意: on_sent_ok と on_submit は Contact Form 7 5.0 で正式に削除されました。これらの設定に代えて DOM イベントを使用してください。
Contact Form７サポートページより

１）function.phpにGoogleアナリティクスの「イベント通知処理」を記述する

設置したフォームの「送信」ボタンが押され送信完了したときに、Googleアナリティクスへ知らせるために「通知イベント」を記述します。
function.phpに直接記述しますので、あらかじめバックアップはきちんと取っておいてくださいね。

add_filter( 'wp_footer', function() {
   if ( is_page() || is_single() ) {
   ?>
   document.addEventListener( 'wpcf7mailsent', function( event ) {
    gtag('event', 'Submit', {       
       'event_category' : 'Form',
       'event_label' : 'contact'
     });   }, false );   
 <?php
   }
 } );

▼参考サイト（ありがとうございます！）

• [blogcard url="https://contactform7.com/ja/tracking-form-submissions-with-google-analytics/"]
• [blogcard url="https://www.saaria.info/archives/3204″]

２）Googleアナリティクスで「目標」を設定

１、目標設定

２、目標の説明

３、目標の詳細

function.phpに記入した通り、

• カテゴリにForm
• アクションにSubmit
• ラベルにcontact

をそれぞれ入力し、最後に「保存」ボタンを押して終了です。

まとめとして