Contact Form 7 アナリティクスのコンバージョン設定方法
WordPressのメールフォームプラグインで人気の高い「Contact Form 7(以下「コンタクトフォーム7」と記述)」の目標設定方法を解説します。
※既にコンタクトフォーム7のメールフォームをご利用中の方を対象としていますので、フォームの設置方法につきましては省略します。
以前は、コンタクトフォーム7 の設定画面内にある「その他の設定」に JavaScript 実行のコードが書き込んであればコンバージョン計測ができていたのですが、今ではその方法が機能しなくなってしまいました。
そこで、カスタムフィールドとコンタクトフォーム7 の機能のひとつである「メール送信イベント」を利用してGoogleアナリティクスへ送信する方法をとります。
設定にはひと手間かかりますが、コンタクトフォーム7 を利用している場合は、ぜひこの設定をしてみてください。
サンクスページが設定されるメールフォームプラグイン「MW WP FORM」を使ってのコンバージョン計測はこちら
目標設定手順
コンタクトフォーム7 は、メールを送信した際にDOMイベントが発生します。
この送信イベントの発生を取得して、測定用コードを実行する事ができます。
今回は測定用コードをカスタムフィールドに記述し、</body>の直前に呼び出すようにしてコンタクトフォーム7でもコンバージョンが計測できるようにしてみます。
1.「プラグイン」⇒「新規追加」をクリックします。
- 「Advanced Custom Fields」を追加します。既にインストール済みの方は手順4まで進んでください。
2.「Advanced Custom Fields」と入力し、「今すぐインストール」をクリックします。
3.インストールが終わったら「有効化」をクリックします。
4.「カスタムフィールド」をクリックします。
5.「新規追加」をクリックします。
6.タイトルを入力します。ここでは「測定用タグ」とします。
7.「フィールドを追加」をクリックします。
8.次の設定します。
- フィールドラベル:測定用タグ
- フィールド名:測定用タグ
- フィールドタイプ:テキストエリア
- フィールド記入のヒント: 任意 ※ページのどこに出力されるか、などを書いておくと後で分かり易い
- 必須か?:いいえ
- フォーマット:No formatting
- 条件判定:いいえ
9.「位置」の項目を次のように設定します。
10.右上の「公開(または更新)」をクリックします。
11.コンタクトフォーム7 で用意したメールフォームが設置されているページの編集画面を開きます。
WordPress管理画面左メニューの「投稿」または「固定ページ」をクリックし、該当するページタイトルをクリックしてください。
12.編集画面下に先ほど作成した「測定用タグ」欄があります。ここに測定用タグ(下記で説明します)を記述します。
まず、ご自身のサイトに設置してあるGoogleアナリティクスのトラッキングコードが、
「gtag.js」なのか「analytics.js」なのかを確認してください。
ページに貼り付けてあるトラッキングコードを確認し、
ga(~) があれば「analytics.js」
gtag(~) があれば「gtag.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.右上の「更新(または公開)」をクリックします。
14.FTPなどでWordPressで使用中のテンプレートの「footer.php」を開きます。
WordPressのテンプレートの場所はご使用の環境によって異なります。
通常は「~/【ワードプレスのディレクトリ】/wp-content/themes/」にテンプレート毎のディレクトリが保存されています。
- 作業する前にデータをバックアップしておいてください。
15.</body>の直前に次のコードを記述し、保存・上書きアップロードしてください。
<?php
if ( is_page() || is_single() ) {
echo post_custom('測定用タグ');
}
?>
16.Googleアナリティクスへログインします。
Googleアナリティクス:https://analytics.google.com
17.「管理」をクリックします。(画面左下の歯車アイコン)
18.ビューの「目標」をクリックします。
- 上手くいかない場合はアカウント・プロパティ・ビューが正しいか確認してください
19.「新しい目標」をクリックします。
20.「カスタム」を選択し、「続行」をクリックします。
21.目標の説明を次のように設定し、「続行」をクリックします。
イベントトラッキングの場合
- 名前: レポートに表示されます。分かりやすい名前にすることをオススメします。
- 目標スロットID: デフォルトのまま
- タイプ: 「イベント」
仮想ページビューの場合
- 名前: レポートに表示されます。分かりやすい名前にすることをオススメします。
- 目標スロットID: デフォルトのまま
- タイプ: 「到達ページ」
22.目標の詳細を次のように設定し、「保存」をクリックします。
イベントトラッキングの場合
12で測定用タグに書き込んだアクション・カテゴリ・ラベルをそれぞれ入力してください。
仮想ページビューの場合
- 到達ページ: 仮想ページのURL ※ドメインは省略してください
- 値: オフ ※1回の目標到達による利益が分かる場合は オン にしてから金額を入力してください。
- 目標到達プロセス: オフ
以上で【コンタクトフォーム7のメール送信】を目標設定する事ができます。
設定後はGoogleアナリティクスのリアルタイムを見ながら、コンタクトフォーム7でメール送信してみて、実際に測定できているかテストするようにしましょう。
(その際、Googleオプトアウトの無効化を忘れずに)
コメント..