2018年はサンクスページなし!?contact form7でサンクスページを作らずアナリティクスでコンバージョン計測する方法

2018年はサンクスページなし!?contact form7でサンクスページを作らずアナリティクスでコンバージョン計測する方法

こんばんはtaisonです。
最近仕事で「wordpressのお問い合わせフォームでコンバージョンの計測をしたいからサンクスページを作って」と久しぶりに言われたので、それについて応用も兼ね、ご紹介したいと思います。

コンバージョン計測に必要になる作業

まずContact Form 7でコンバージョン計測をする場合、以下のような方法が用いられます。

  • サンクスページを作ってトラッキングする
  • アクションフックを使ってイベントをトラッキングする

サンクスページを作ってトラッキングする

まず一つ目のサンクスページを作ってトラッキングする方法ですが、当然サンクスページを作って、メール送信後にそのページにリダイレクトさせる必要があります。

主流っちゃ主流のやり方だったんですが、実は2018年時点でサンクスページへリダイレクトさせるon_sent_okというタグが廃止され、後述するDOMイベントを使った方法が推奨されるようになりました。

アクションフックを使ってイベントをトラッキングする

続いて2つ目のコンバージョン計測方法。

既にご存知の方が多いかと思いますが、Contact Form 7でコンバージョンを計測する場合、計測目的であればサンクスページを用意せずともコンバージョンを計測できます。
DOMイベントを使ってイベントトラッキングを拾う。というやつですね。

DOMイベントとか聞くとなんか難しそうな感じしますが、やり方は非常に簡単。
初心者でもなんなく設定できてしまいます。

なので今回は推奨されている、サンクスページを作らずコンバージョンの計測を実施してみたいと思います。

contactform7に分析コードを紐づける

そもそもcontactform7にサンクスページの遷移は用意されておらず、サンクスページを使わず計測するコード設置方法は、公式フォーラムの方にも掲載されています。

実際リンク先見ちゃえば今回のテーマは解決しちゃうんですが、ここは記事ネタにす、、、!
私と同じように悩んでいる人向けに情報提供したいとの思いで、つい筆を走らせてしまいました。

参考に公式のリンク先も掲載しておきます。↓

フォーム送信を Google Analytics でトラッキングする

ちなみにサンクスページのリダイレクトに関する記事が上記リンク先サイト内にあるのですが、閲覧者に対してのディスが直球で面白いので、一度見てみてください。

さて、それでは実際どう設定していくかを書いていきましょう。

wordpressテーマに計測コードを設置する

まずContact Form 7のアクセス数値をイベントという形で取得するため、取得用のコードをwordpressのheader.phpに設置します。


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

簡単に説明すると、submit(送信)された時にカスタムDOM(後述します)のwpcf7mailsentを条件としてgoogleアナリティクスにイベントを通知する。という感じです。

その他にも様々な数値は設定できるのですが、今回はフォーラム通り進めていきます。

カスタムDOMは、Contact Form 7で独自設定された値になります。
条件に合った挙動をした時にイベントを発生させる引き金みたいなものですね。
(実際の引き金はaddEventListener)

下のリンクから詳細が確認できますので、イベント名だけでも見ておくと理解が早いかも。

contactform7 DOMイベント

通知されたイベントにコンバージョンの設定をする

無事イベント通知ができたとしても、コンバージョン計測をするとなればもうひと処理必要になります。

今度はアナリティクス側で設定します。
wordpressはそっとしといてください。

まずはgoogleアナリティクスのサイドバーから、目標をクリックし、目標を設定します。

アナリティクス画面1

次に新しい目標(赤ボタン)をクリックすると出てくる目標ステップの設定で、カスタムを選択し、続行をクリック。

目標の説明画面が出たら、名前(何でもいいです)を付けて、タイプをイベントに設定。

アナリティクス画面2
そうするとイベント条件が出てくるので、ここにContact Form 7の計測コードの値を入れていきます。

  1. カテゴリ: Contact Form
  2. アクション: submit
  3. ラベル: なし
  4. 値: なし

3,4は今回使わないので空欄にしておきます。入力が完了したら、目標を作成ボタンをクリック。

これで設定完了です。簡単ですね。
実際アナリティクス側に数値が反映されるのにタイムラグが出るようで、通常は1~2日で反映されるそうです。
焦らず待ちましょう。

contactform7のイベントDOMを使って応用編

ここからはちょっとひねった応用編。

まあそんなに無いケースだと思いますが、問い合わせフォームが二つあって片方だけコンバージョン計測をしたい。なんてこともあるかもしれません。
そんな時にもイベントDOMが大活躍します。

idを条件分岐で取得して楽々計測

まずidはContact Form 7で作成した問い合わせフォーム一覧の所にある各フォームに、記載がある数字のことです。

このidをif関数を使って判定し、条件に合っていればイベントを送信する。といった形にします。
もしidがこの数字だったら、イベント送信。って感じですね。

さっきwordpressのheader.phpに設置したコードを少し変更します。


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

ifのカッコ内にあるcontactFormIdが問い合わせフォームのidとなり、そのidが該当問い合わせフォームの数字と一致(今回の場合11)したら、計測をしますよー。という感じです。

他にもラベルを付けたり、判定基準を変えたりなど、非常に便利な機能がシンプルに使えます。なんて素晴らしい部品だ。イベントDOM。

意外とできないことないかもしれないwordpressまわり

制作してるとこんなの出来るかなぁ?とか、無理だよなぁって思うことも、プラグインやこういう便利ツールを使うと意外と出来ちゃったりすることが多いです。
なので壁が出来たらあきらめず、ググッてみましょう。何かヒントが見つかるかもしれません。

それではまた!

 

こちらの記事も読まれています

wordpressのファイルアップロード上限を変更して大きいサイズのファイルを投稿する... こんばんわ、ttaisonです。 最近この名前も飽きてきたから変えようかな、、、読みづらいし。 さて、今日はWordpressの投稿にまつわる問題。 Wordpressで作ったホームページやブログで、大きな容量のファイルをアップロードしたい時があるとします。 例えばお店のチラシ画像・...
WordPressのアップロード画像サイズを自動調整してくれるプラグインImsanity... こんばんわ、taisonです。 wordpressでサイトを制作して納品完了したあと、お客様からよくいただく言葉があります。 「画像アップロードに時間がかかるんだけど」 「画像がアップロードできない」 「管理画面が重たくなってきた」 制作側からすると意外と盲点なんですが、画像をアッ...
WordPressでjQueryが動かない!問題なく動作させるために設定する対策方法... こんばんわ。taisonです。 唐突ですが、 「WordpressでjQueryのライブラリを追加したい!」てこと、 結構ありませんか? スライダー機能がしょぼいから後入れのライブラリで対応したい、 トップへ戻るボタンを追加したい、、などなど。 結構jQueryのコード・ライ...
Contact Form 7の住所入力を自動化!郵便番号から住所を入力させるyubinbangoを設... こんばんわtaisonです。 皆さん住所入力の自動化、してますか? 今やお問い合わせフォームでは住所入力の自動化は必須ともいえますね。 今回は少しのjsとcssクラス名を記入するだけで住所入力を自動化するyubinbangoを、Contactform 7に設定してみました。 お手...

wordpressカテゴリの最新記事