Contact Form 7 アナリティクスのコンバージョン設定方法

2018年03月13日 目標設定

screenshot-1

WordPressのメールフォームプラグインで人気の高い「Contact Form 7(以下「コンタクトフォーム7」と記述)」の目標設定方法を解説します。
※既にコンタクトフォーム7のメールフォームをご利用中の方を対象としていますので、フォームの設置方法につきましては省略します。

以前は、コンタクトフォーム7 の設定画面内にある「その他の設定」に JavaScript 実行のコードが書き込んであればコンバージョン計測ができていたのですが、今ではその方法が機能しなくなってしまいました。

そこで、カスタムフィールドとコンタクトフォーム7 の機能のひとつである「メール送信イベント」を利用してGoogleアナリティクスへ送信する方法をとります。

設定にはひと手間かかりますが、コンタクトフォーム7 を利用している場合は、ぜひこの設定をしてみてください。

サンクスページが設定されるメールフォームプラグイン「MW WP FORM」を使ってのコンバージョン計測はこちら

目標設定手順

コンタクトフォーム7 は、メールを送信した際にDOMイベントが発生します。
この送信イベントの発生を取得して、測定用コードを実行する事ができます。

今回は測定用コードをカスタムフィールドに記述し、</body>の直前に呼び出すようにしてコンタクトフォーム7でもコンバージョンが計測できるようにしてみます。

1.「プラグイン」⇒「新規追加」をクリックします。

  • 「Advanced Custom Fields」を追加します。既にインストール済みの方は手順4まで進んでください。

Contact Form 7目標設定手順01

2.「Advanced Custom Fields」と入力し、「今すぐインストール」をクリックします。

Contact Form 7目標設定手順02

3.インストールが終わったら「有効化」をクリックします。

Contact Form 7目標設定手順03

4.「カスタムフィールド」をクリックします。

Contact Form 7目標設定手順04

5.「新規追加」をクリックします。

Contact Form 7目標設定手順05

6.タイトルを入力します。ここでは「測定用タグ」とします。

Contact Form 7目標設定手順06-1

7.「フィールドを追加」をクリックします。

Contact Form 7目標設定手順06-2

8.次の設定します。

  • フィールドラベル:測定用タグ
  • フィールド名:測定用タグ
  • フィールドタイプ:テキストエリア
  • フィールド記入のヒント: 任意 ※ページのどこに出力されるか、などを書いておくと後で分かり易い
  • 必須か?:いいえ
  • フォーマット:No formatting
  • 条件判定:いいえ

Contact Form 7目標設定手順07

9.「位置」の項目を次のように設定します。

  • 「投稿タイプ」「等しい」「post」
  • Add rule group」をクリックし、「投稿タイプ」「等しい」「page」

Contact Form 7目標設定手順08-1

10.右上の「公開(または更新)」をクリックします。

Contact Form 7目標設定手順08-2

11.コンタクトフォーム7 で用意したメールフォームが設置されているページの編集画面を開きます。

WordPress管理画面左メニューの「投稿」または「固定ページ」をクリックし、該当するページタイトルをクリックしてください。

12.編集画面下に先ほど作成した「測定用タグ」欄があります。ここに測定用タグ(下記で説明します)を記述します。

Contact Form 7目標設定手順09
※画像は「gtag.js」のイベントトラッキングを設定する例

まず、ご自身のサイトに設置してあるGoogleアナリティクスのトラッキングコードが、
「gtag.js」なのか「analytics.js」なのかを確認してください。

ページに貼り付けてあるトラッキングコードを確認し、
ga(~) があれば「analytics.js」
gtag(~) があれば「gtag.js」です。

MW WP FORM目標設定手順(完了メッセージ使用)02
※画像の例ではga(~)があるので「analytics.js」であることが分かります。

確認が済んだら下記からご自身のサイトに合った測定用タグを選び、先ほど作成した入力欄(例では「測定用タグ」)に書き込んでください。

イベントトラッキングか、仮想ページビューのどちらか一方でOKです。

gtag.jsの場合

イベントトラッキング
        <script>
          document.addEventListener( 'wpcf7mailsent', function( event ) {
          gtag('event', '【アクション】', {'event_category': '【カテゴリ】', 'event_label': '【ラベル】'});
          }, false );
        </script>
      
  • アクション・カテゴリ・ラベルは任意で問題ありません。レポートに表示される際、分かりやすくなるよう設定してください。

イベントトラッキングについて(イベントトラッキングを設定してパフォーマンス改善に役立てよう)

仮想ページビュー・
        <script>
          document.addEventListener( 'wpcf7mailsent', function( event ) {
          gtag('config', '【トラッキングID】', { 'page_title': '【仮想ページのタイトル】', 'page_location': '【仮想ページのURL】', 'page_path': '【仮想ページのパス】'});
          }, false );
        </script>
      
  • トラッキングIDは「UA-**********-**」。アナリティクスの管理画面を開き、プロパティ列の「トラッキング情報」⇒「トラッキングコード」から確認できます。
  • 仮想ページのURLはフルパスで入力してください。
    例: https://www.example.com/inquiry/thanks
  • 仮想ページのパスには仮想ページのURLを、ドメインを抜いた形で入力してください。
    例: /inquiry/thanks
  • page_locationは省略可能ですが、公式ドキュメントに記載があるため、記述した方が無難です。

仮想ページビューについて(仮想ページビュー設定方法)

analytics.jsの場合

イベントトラッキング
        <script>
          document.addEventListener( 'wpcf7mailsent', function( event ) {
          ga('send', 'event', '【カテゴリ名】', '【アクション名】', '【ラベル】');
          }, false );
        </script>
      
  • アクション・カテゴリ・ラベルは任意で問題ありません。レポートに表示される際、分かりやすくなるよう設定してください。
仮想ページビュー
        <script>
          document.addEventListener( 'wpcf7mailsent', function( event ) {
          ga('send', 'pageview', {'page' : '【仮想ページのURL】', 'title' : '【仮想ページのタイトル】'});
          }, false );
        </script>
      
  • 仮想ページのURLはドメインを省略してください。例: /inquiry/thanks

13.右上の「更新(または公開)」をクリックします。

Contact Form 7目標設定手順10

14.FTPなどでWordPressで使用中のテンプレートの「footer.php」を開きます。

WordPressのテンプレートの場所はご使用の環境によって異なります。
通常は「~/【ワードプレスのディレクトリ】/wp-content/themes/」にテンプレート毎のディレクトリが保存されています。

  • 作業する前にデータをバックアップしておいてください。

15.</body>の直前に次のコードを記述し、保存・上書きアップロードしてください。

      <?php
      if ( is_page() || is_single() ) {
        echo post_custom('測定用タグ');
      }
      ?>
    
Contact Form 7目標設定手順11
記入例

16.Googleアナリティクスへログインします。

Googleアナリティクス:https://analytics.google.com

17.「管理」をクリックします。(画面左下の歯車アイコン)

MW WP FORM目標設定手順04

18.ビューの「目標」をクリックします。

MW WP FORM目標設定手順05

  • 上手くいかない場合はアカウント・プロパティ・ビューが正しいか確認してください

19.「新しい目標」をクリックします。

MW WP FORM目標設定手順06

20.「カスタム」を選択し、「続行」をクリックします。

MW WP FORM目標設定手順07

21.目標の説明を次のように設定し、「続行」をクリックします。

イベントトラッキングの場合

  • 名前: レポートに表示されます。分かりやすい名前にすることをオススメします。
  • 目標スロットID: デフォルトのまま
  • タイプ: 「イベント」

MW WP FORM目標設定手順(完了メッセージ使用)03

仮想ページビューの場合

  • 名前: レポートに表示されます。分かりやすい名前にすることをオススメします。
  • 目標スロットID: デフォルトのまま
  • タイプ: 「到達ページ」

MW WP FORM目標設定手順08

22.目標の詳細を次のように設定し、「保存」をクリックします。

イベントトラッキングの場合

12で測定用タグに書き込んだアクション・カテゴリ・ラベルをそれぞれ入力してください。

MW WP FORM目標設定手順(完了メッセージ使用)04

仮想ページビューの場合

  • 到達ページ: 仮想ページのURL ※ドメインは省略してください
  • : オフ ※1回の目標到達による利益が分かる場合は オン にしてから金額を入力してください。
  • 目標到達プロセス: オフ

MW WP FORM目標設定手順09

以上で【コンタクトフォーム7のメール送信】を目標設定する事ができます。

設定後はGoogleアナリティクスのリアルタイムを見ながら、コンタクトフォーム7でメール送信してみて、実際に測定できているかテストするようにしましょう。
(その際、Googleオプトアウトの無効化を忘れずに)

Googleアナリティクスの活用方法を知りたい方はこちらがおすすめです

Googleアナリティクス完全ガイド

コメント..

PAGE TOP