新卒1年目に 口コミサイトの制作を受注して口コミサイトをWordpress制作していましたポールです。貧乏すぎて家族が飯を食う金を稼ぐための副業でした。HTMLの知識もあいまいでしたが、「できる(はずな)のでやりましょう!」といって提案していました。10年以上前でもWordpressを使えばなんとかなったものです。
さて、デジタルマーケティングのプロとしてWordpressで制作サイトで非常に気になるのが効果計測の設定。マーケティングの効果は資料ダウンロードや問合せなどの「フォーム送信完了」または「電話」ボタンクリックになります。これがそもそもできていない会社多いんです。その原因の1つが WordPress で最も利用されている国産フォームプラグイン Contact form 7 のデフォルト設定です。このプラグイン自体は非常に素晴らしいものなのですが、マーケティングで利用する場合は設定に少し工夫が必要です。
Contact form 7 のデフォルト設定はサンクスページがない
フォームページがとってもかんたんにつくれるContact form 7 ですが、サンクスページが設定できません。以下のような動きになり、同一ページでシンプルにエラーチェックや送信完了までいけるので非常に便利ではあります。
ただし、マーケ担当者からするとフォーム送信完了したユーザーをコンバージョンと定義してそのURLを Google Analytics や広告媒体で計測したいのにできないじゃん!となりますよね。これは困った。実際に、弊社のクライアントにおいても中小企業などではこのような状態のままご相談をいただくことも結構多いです。
Contact form 7 でリダイレクト設定の具体的な方法
必要な設定は下記の3つです。
- サンクスページの新規作成
- Contact form 7 のフォームでのリダイレクト設定追加
- Contact form 7 のぬるっとでてくるフォーム下の文字調整
サンクスページの新規作成
これは普通にページで追加して、本文に「お問合せありがとうございました。◯日以内にお返事致しますのでお待ちくださいませ。」などと入れて下さい。ページのURLがマーケティングの目標になるGAなどに設定するURLになるのでわかりやすく「thanks」などとURLにいれておくとよいです。
Contact form 7 のフォームでのリダイレクト設定追加
WordPressのContact form7のプラグインの「フォームタブ」の一番下の箇所で下記の設定を追加するだけです。赤文字の部分はサンクスページのURLに変更下さい。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>
実際に、追加している援軍の公式サイトの設定が赤枠の部分です。
これでほぼ設定完了です。
Contact form 7 のぬるっとでてくるフォーム下の文字調整
まあ、このままだとContact form 7 の仕様上サンクスページに飛ぶ前に一瞬フォーム下に「メッセージが正常に送信された」際に表示されるメッセージが出て、その後にサンクスページに転送されるので違和感がでます。
そのためここの箇所を、
というように修正しておくとよいでしょう。これで完了です。こうすると最終的にどうなるのか見てみましょう!
できましたね!これで心置きなく、 /thanks などをGoogle Analytics の目標に設定したり、GTM(Googleタグマネージャー)で広告のコンバージョンタグのイベントトリガーにサンクスページを設定して効果計測をしまくりましょう。
おまけ:Contact form 7 の公式ではサンクスページ設定は推奨していない!?
ちなみにContact form 7 の公式サイトではGoogle Analytics のイベント計測の方法を案内されていて、今回案内した設定が必要なのはごく一部だという記載があります。
しかし、これには少し誤解があります。たしかにGoogle Analytics使っているだけで、広告を配信していない場合はそれでもよいのですが、YahooやFacebookなどで広告配信をしている場合はサンクスページが必要です。もっと細かくいうと、サンクスページがなくても私なんかは設定できるのですが、それができる人はごく一部なので誰でもメンテナンスできるようにやはりサンクスページを用意しておくべきですね!
ポール
最新記事 by ポール (全て見る)
- Google Meet で外部の方とウェブ会議する場合の自社のGoogleカレンダーのMeet URL変更方法 - 2021-05-17
- 【必須】Chromeのタブ開きすぎ!?重い場合はこの拡張機能を入れよ! - 2021-05-13
- 【ステップ解説】Adjust(モバイルアプリ計測) のデータを自動取得更新する手法 - 2021-05-07