フロントエンドエンジニア兼ゲーマーがモノやサービスをレビュー

Contact Form 7 でサンクスページを作らずに Google Analytics のコンバージョンを取る

2014.08.01 ユニバーサルアナリティクス用のコードを追記しました。

さあさあ今回はサクッといきますね。
GoogleアナリティクスでWebフォームの送信完了画面、いわゆるサンクスページですね。このURLを目標値に設定してトラッキングすることは多いです。

Contact Form 7 でも送信完了画面を作ることはできるので、完了ページ自体が必要な方はそうしましょう。
今日書くのは、そんなの作るの面倒だ、デフォルトで設定されているページ遷移なしのメッセージのままコンバージョン数を取りたい、という方のための方法で、管理画面から1行書くだけなので簡単です。

スポンサーリンク

Contact Form 7 の設定

実はこの方法はContact Form 7 の公式サイトにも書いてあります。
フォーム送信を Google Analytics でトラッキングする

上のページに詳しく書いてあるのは「同期式」のトラッキングコードの場合で、最近のGoogle Analytics のトラッキングコードはもうほとんどの場合「非同期式」が使われています。
実際に書くコードが書かれていないとわからない方もいると思います。非同期式の場合は、コンタクトフォームの管理ページの一番下にある「その他の設定」に以下のコードを書きましょう。

on_sent_ok: "_gaq.push(['_trackPageview', '/contact/thanks.html']);"

contact form 7 設定画面「その他の設定」

上記の場合は、http://example.com/contact/thanks.html がアナリティクスのレポートにページのファイル名として表示されます。このURLは何でもよく、実在する必要はありません。

[2014.08.01追記] 上のコードは旧非同期型(ga.js)のコードです。ユニバーサルアナリティクス(analytics.js)では下記のコードとなります。

on_sent_ok: "ga('send', 'pageview', '/contact/thanks.html');"

Google Analytics の設定

続いてアナリティクスの設定です。この目標値を設定する画面に行くまでの道のりって分かりにくくないですか?僕はいつもさまよいます(笑)
良い機会なので覚書もかねて記載すると、ログインしたら
アナリティクス設定 > アカウント名 > プロパティ名 > プロファイル名 > 目標タブ
の順にクリックしていくと設定画面までいけます。ふー。
って今調べてたら該当のレポートを開いた状態で、アナリティクス設定 > プロファイル名 > 目標タブ でも行けますね。

目標をセットする

苦労して目標設定画面までたどり着いたら「+目標」をクリックして設定していきます。僕の場合はいつも以下のような感じです。

Google Analytics 目標設定

目標達成プロセスの「/contact/」はWebフォームの設置してあるURLを書いています。

以上でおしまい!簡単!