フリーランスのエンジニアになって4年。事前に知っておくべき年収の相場や案件のお話。

ド田舎から地方都市(名古屋)に出てフリーランスのシステムエンジニア(プログラマー)として独立した管理人S。フリーエンジニアの現実をお伝えしています。

ブログ

CF7(Contact Form 7)の on_sent_okが廃止!?on_sent_okを使わずに Google AdWords のコンバージョントラッキングコードを導入する方法

2017/10/07

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の運用ツール→コンバージョンからコードを取得する

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

CF7 ( Contact Form 7 ) の on_sent_ok を使わずに Google AdWords のコンバージョントラッキングコードを導入する方法

2)Tracking Code Manager でコードをセットする

コードは以下の通り。

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

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

 

on_sent_ok は廃止されます | Contact Form 7 [日本語] で例示されてるのがこんなコードなのですが、(↓こちらは説明のために載せただけなのでコピペは不要です)

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

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

こうすることで、

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

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

3)Tracking Code Manager で記事/固定ページを指定する

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

CF7 ( Contact Form 7 ) の on_sent_ok を使わずに Google AdWords のコンバージョントラッキングコードを導入する方法

Tracking Code Manager だと、

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

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

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

考えてみたらこっちの方が面倒くさい。「送信は正常に完了しました」とかよりはサンキューページでお礼を伝えた方が良い気はするけれど。

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

「ページの読み込み ユーザーがコンバージョンを達成した後に表示されるページにタグを追加します。」を選択。

CF7 ( Contact Form 7 ) の on_sent_ok を使わずに Google AdWords のコンバージョントラッキングコードを導入する方法

2)Tracking Code Manager でコードをセットする

こちらの場合は、コードは提供されたものをそのままコピペでOK。

3)Tracking Code Manager で記事/固定ページを指定する

上記のコードを、どの記事/固定ページで出力するのか?を指定します。こちらの場合は、フォームのある画面ではなく「サンキューページ」を選択、っとね。

 

という訳でお役に立てれば幸いです。

WordPressのもろもろで躓いてる方、有償(30分につき4,000円)ですがSkypeレクチャーしますのでお問い合わせフォームからお声がけください。

「WordPressが真っ白になって動かないんです!」というあるあるな相談もお待ちしております。

あ、サイト全体のSSL化なんかもOKですよ。(自分のサイトを先にやれよって話ですけど)

新しい記事が追加されたらメールでお知らせ

新しい記事が追加されたらメールでお知らせ

新しい記事が追加された時、自動的にメールでお知らせ致します。 こちらのフォームにメールアドレスを入力してお申し込みください。

-ブログ
-, , , , , ,

オススメ

プログラマ/エンジニア向けフリーランス転向相談会@名古屋・金山駅 1
プログラマ/エンジニア向けフリーランス転向相談会、開催します

当サイトの管理人Sがいつもお世話になっている、名古屋のエージェント担当さん(営業部長さん)にお願いして、エンジニアさん向け個別相談会を開催することになりました。 フリーランスへの転向について、気になっていること、実際の現場について、気軽に質問して頂ける良い機会になれば嬉しく思いま ...

2
「いまフリーエンジニアになろうとしているあなたへ」電子書籍、発売しました。僕が経験した暗黒時代、そしてフリーランスになる直前までを無料公開中。

電子書籍、発売しました。Kindleでお読みいただけます。Kindleオーナーシップライブラリー、Kindle Unlimited対象作品です。 このページでは、「はじめに」の自己紹介から、僕が経験した暗黒時代、そしてフリーランスになる直前までを無料サンプルとしてお読みいただけま ...