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

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

おもてなしデザイン®︎専門家カイエダです。
WordPressの人気プラグイン「Contact Form 7」の最新コンバージョン率測定の設定方法と、reCAPTCHA v3導入方法をまとめました。
参考にしてみてください!

プラグイン Contact Form 7とは

Contact Form7プラグインページ。
葛飾北斎の浮世絵の印象が強いですよね。

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

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

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

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

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

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

 

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

1、専用Webサイトへ行く

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

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

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

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

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

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

reCAPTCHA  v3  詳細登録画面

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

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

reCAPTCHA  v3 登録完了画面

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

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

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

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

「お問い合わせ」>「インテグレーション」
インテグレーションセットアップ
インテグレーションのセットアップ
サイトキー、シークレットキーを入力
控えておいたサイトキー、シークレットキー入力
カイエダ

お疲れ様でした。
続いて、コンバージョンの設定に進みましょう。
Googleアナリティクスでの設定もあります。

Contact Form7のコンバージョン率計測!設定方法【最新】

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

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

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

カイエダ

とはいえ、他の方法でコンバージョン設定がちゃんとできますよ。
日々のアクセスとコンバージョンを検証するためには設定は必須です!
それでは解説していきますよ〜!

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

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

カイエダ

次のコードをfunction.phpにコピペしてください。

 

▼参考サイト(ありがとうございます!)

カイエダ

function.phpの先頭行に<?phpがあることを確認してください。
ないときは(子テーマなどで新規にfunction.phpをつくる場合など)必ず追記してください。
if ( is_page() || is_single() )は、固定ページまたは投稿ページであるか、という条件判定です。

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

1、目標設定

アナリティクス>管理>目標>カスタム
アナリティクス>管理>目標>カスタム

2、目標の説明

「名前」に任意の名称を入れます。
「タイプ」は「イベント」を選び、続行ボタンを押します。
「名前」に任意の名称を入れます。
「タイプ」は「イベント」を選び、続行ボタンを押します。

3、目標の詳細

目標の詳細
イベント条件を入力します。

function.phpに記入した通り、

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

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

カイエダ

これでコンバージョン率が測れるようになりました!

まとめとして

カイエダ

常にエラーが出ていたり警告が出ているのは嫌なものです。
Contact Form 7で警告やエラーが出ていたら要注意!
せっかくのお問い合わせが受け付けることができなくなる可能性もあります。
早めのセキュリティ&コンバージョン率計測設定を!


おもてなしブログ®︎最新情報はメルマガから▼

フォローお待ちしています