CF7(Contact Form 7)の on_sent_okが廃止！？on_sent_okを使わずにサンキューページへ遷移させつつ Google AdWords のコンバージョントラッキングコードを導入する方法

2017/10/062018/12/13

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 プラグイン

【サンキューページのないパターン】

１）AdWordsの運用ツール→コンバージョンからコードを取得する

「クリックウェブサイトのボタン（「今すぐ購入」ボタンなど）にタグを追加します。」を選択。

２）Tracking Code Manager でコードをセットする

[設定]→[Tracking Code Manager]を開いて、Add New Tracking Code ボタンで１つ新規に追加する。
分かり易いタイトルに変更

コードは以下の通り。

前半、32行目までは、Google AdWordsのコンバージョントラッキング設定画面で提供されるコードをそのままコピペして下さい。（３２行目まではこの画面のソースをコピペしちゃダメですよ）

最後の５行だけ、手動で付け足してます。（この最後の５行は、この画面のソースをそのままコピペしてください。）

<!-- 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>

３行目でGoogle Analytics用の関数を呼んでます。

なのでこの部分を、Google AdWordsのコンバージョントラッキングコードで提供されている関数に置き換えてあげるだけ。

こうすることで、

訪問者が「申し込み」ボタンをクリックする
CF7が最初から用意している「送信が正しく終了しましたよ～」イベントが発生する（エラーだったら発生しない）
手動で書いた５行に「送信が正しく終了しましたよ～イベントが発生したら、AdWordsのコンバージョントラッキング関数を読んでね」と書き加えてあるので、その関数が呼ばれる
AdWordsのコンバージョントラッキング関数が、AdWordsにデータを送信する

という流れが出来る、という訳です。

３）Tracking Code Manager で記事／固定ページを指定する

上記のコードを、どの記事／固定ページで出力するのか？を指定します。

Tracking Code Manager だと、

Tracking Code Manager プラグインの設定画面でコードを出力したい記事／固定ページをまとめて指定する
管理画面の各記事／固定ページ側で、「Tracking Code Managerで作成したこのコードを出力する」

どちらでも指定できます。

【サンキューページのあるパターン】

送信完了後にサンキューページに遷移させる
サンキューページ側でコンバージョンイベントを発火させる

の2段階必要なので、考えてみたらこっちの方が面倒くさい…。

「送信は正常に完了しました」だけ表示してオシマイ・・よりは、サンキューページでお礼を伝えた方が良い気はするけれど。

１）Tracking Code Manager でお問い合わせフォームに遷移用スクリプトをセットする

（以下、画面イメージは【サンキューページのないパターン】を参考にしてください）

[設定]→[Tracking Code Manager]を開いて、Add New Tracking Code ボタンで１つ新規に追加する。
分かり易いタイトルに変更
以下のコードをコピペ。（★★★★★の周辺、ご自身の環境に合わせて、サンキューページの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? は「Include posts “page“」をチェック。
ALL を削除して、問合せページ（フォームがあるページ）を選択。（何文字かキー入力すると、候補が出てきます）