CF7 ( Contact Form 7 ) の on_sent_ok が廃止される、ということでアワアワしているデザイナーの方も多いんじゃなかろうか・・。
なにしろ、いままでCF7 ( Contact Form 7 ) の設定ページ(+サンクスページ)だけで済んでたのに、functions.php でうんぬんとかって話になってるので、ちょっと「めんどくさー・・」感がアップしてます。
Javascript 分かる人ならコード読めばイベントハンドラとか理解できるんでしょうけど、「なんとなーく」コピペして動かしてる人は大変だと思います・・。
要するに、「ふつーに Javascript で対応してね」ってことなので、WordPressに突っ込むとなると、
- php側(テンプレートのphpファイルや functions.php )に Javascript のコードを突っ込む
- pluginでなんとかする
のどちらかになるかと・・。
functions.php をゴリゴリいじってFTPでアップして・・の面倒くささを取るか、「うぇー、またPlugin増やすの?」のゲンナリ感にさいなまれるか、どちらか、かなぁ・・。
という訳で、今回は後者を選択。テンプレートとか functions.php 触るのイヤーンな方向けに。
【事前準備】プラグイン等で <body></body>内に Javascript が書けるようにしておく
今のところ、Tracking Code Manager がオススメ。以前使ってたやつは、記事や固定ページに書き込めるのは良かったんだけど、そのうち「あれ、どこにコード突っ込んだっけ?」ってわかんなくなって、結局 MySQLAdmin で調べる羽目に陥りました。Tracking Code Manager なら、一元管理できるのでステキです。
※アイコンが「Facebook広告専用なのか?」って思わせるので、躊躇するんですよねぇ・・。アイコンで損してると思う。
Tracking Code Manager — WordPress プラグイン
【サンキューページのないパターン】
1)AdWordsの運用ツール→コンバージョンからコードを取得する
「クリック ウェブサイトのボタン(「今すぐ購入」ボタンなど)にタグを追加します。」を選択。
2)Tracking Code Manager でコードをセットする
- [設定]→[Tracking Code Manager]を開いて、Add New Tracking Code ボタンで1つ新規に追加する。
- 分かり易いタイトルに変更
コードは以下の通り。
前半、32行目までは、Google AdWordsのコンバージョントラッキング設定画面で提供されるコードをそのままコピペして下さい。(32行目まではこの画面のソースをコピペしちゃダメですよ)
最後の5行だけ、手動で付け足してます。(この最後の5行は、この画面のソースをそのままコピペしてください。)
<!-- Google Code for ほにゃらら問い合わせ Conversion Page In your html page, add the snippet and call goog_report_conversion when someone clicks on the chosen link or button. --> <script type="text/javascript"> /* <![CDATA[ */ goog_snippet_vars = function() { var w = window; w.google_conversion_id = ★★★★★; w.google_conversion_label = "★★★★★"; w.google_remarketing_only = false; } // DO NOT CHANGE THE CODE BELOW. goog_report_conversion = function(url) { goog_snippet_vars(); window.google_conversion_format = "3"; var opt = new Object(); opt.onload_callback = function() { if (typeof(url) != 'undefined') { window.location = url; } } var conv_handler = window['google_trackConversion']; if (typeof(conv_handler) == 'function') { conv_handler(opt); } } /* ]]> */ </script> <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion_async.js"> </script> <script type="text/javascript"> document.addEventListener( 'wpcf7mailsent', function( event ) { goog_report_conversion(); }, false ); </script>
on_sent_ok は廃止されます | Contact Form 7 [日本語] で例示されてるのがこんなコードなのですが、(↓こちらは説明のために載せただけなのでコピペは不要です)
<script type="text/javascript"> document.addEventListener( 'wpcf7mailsent', function( event ) { ga( 'send', 'event', 'Contact Form', 'submit' ); }, false ); </script>
3行目でGoogle Analytics用の関数を呼んでます。
なのでこの部分を、Google AdWordsのコンバージョントラッキングコードで提供されている関数に置き換えてあげるだけ。
こうすることで、
- 訪問者が「申し込み」ボタンをクリックする
- CF7が最初から用意している「送信が正しく終了しましたよ~」イベントが発生する(エラーだったら発生しない)
- 手動で書いた5行に「送信が正しく終了しましたよ~イベントが発生したら、AdWordsのコンバージョントラッキング関数を読んでね」と書き加えてあるので、その関数が呼ばれる
- AdWordsのコンバージョントラッキング関数が、AdWordsにデータを送信する
という流れが出来る、という訳です。
3)Tracking Code Manager で記事/固定ページを指定する
上記のコードを、どの記事/固定ページで出力するのか?を指定します。
Tracking Code Manager だと、
- Tracking Code Manager プラグインの設定画面でコードを出力したい記事/固定ページをまとめて指定する
- 管理画面の各記事/固定ページ側で、「Tracking Code Managerで作成したこのコードを出力する」
どちらでも指定できます。
【サンキューページのあるパターン】
- 送信完了後にサンキューページに遷移させる
- サンキューページ側でコンバージョンイベントを発火させる
の2段階必要なので、考えてみたらこっちの方が面倒くさい…。
「送信は正常に完了しました」だけ表示してオシマイ・・よりは、サンキューページでお礼を伝えた方が良い気はするけれど。
1)Tracking Code Manager でお問い合わせフォームに遷移用スクリプトをセットする
(以下、画面イメージは【サンキューページのないパターン】を参考にしてください)
- [設定]→[Tracking Code Manager]を開いて、Add New Tracking Code ボタンで1つ新規に追加する。
- 分かり易いタイトルに変更
- 以下のコードをコピペ。(★★★★★の周辺、ご自身の環境に合わせて、サンキューページのURLに書き換えてやって下さい)
<script type="text/javascript"> document.addEventListener( 'wpcf7mailsent', function( event ) { window.location.href = 'http://★★★★★.com/thankyou-page'; }, false ); </script>
- Position inside the code はどれでも良い。読み込みタイミングは早くなくてよいので Before</BODY> かな。
- Show only on device は ALL のまま。
- Where do you want to add this code? のラジオは触らず「Standard code tracking in your WordPress」のまま。
- In which page do you want to insert this code? は「in specific pages or posts」を選択。
- Include tracking code in which pages? は「」をチェック。
- ALL を削除して、問合せページ(フォームがあるページ)を選択。(何文字かキー入力すると、候補が出てきます)
2)AdWordsの運用ツール→コンバージョンからコードを取得する
「ページの読み込み ユーザーがコンバージョンを達成した後に表示されるページにタグを追加します。」を選択。
3)Tracking Code Manager でコードをセットする
こちらの場合は、コードは提供されたものをそのままコピペでOK。
4)Tracking Code Manager で記事/固定ページを指定する
上記のコードを、どの記事/固定ページで出力するのか?を指定します。こちらの場合は、フォームのある画面ではなく「サンキューページ」を選択、っとね。
という訳でお役に立てれば幸いです。
WordPressのもろもろで躓いてる方、有償(言い値)ですがSkypeレクチャーしますのでお問い合わせフォームもしくはTwitterにてお声がけください。
「WordPressが真っ白になって動かないんです!」というあるあるな相談もお待ちしております。
あ、サイト全体のSSL化なんかもOKですよ。(自分のサイトを先にやれよって話ですけど→やりましたっ。)