あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。

WordpressのContact Form 7で Yahoo!リスティング広告のコンバージョンを取る

WordPress

先日標題の設定をしたのですが、Googleで調べてもそれらしいのが出てこなかったので、書いておきます。

俺が見つけられなかっただけかもしれませんが。

WordpressにContact Form 7という便利なプラグインがありますが、このプラグインを使ってYahoo!リスティング広告のコンバージョン測定をしなくてはいけなくなりました。

Yahoo!リスティング広告のコンバージョン測定のためのタグは環境によって違うと思うのですが、とりあえず、ヘルプの例を使ってどのように設定したかを紹介します。

とりあえずこれをhead内に入れろということらしい

<SCRIPT language="JavaScript">
<!-- Yahoo! Search Marketing
window.ysm_customData = new Object();
window.ysm_customData.conversion = "transid=,currency=,amount=";
var ysm_accountid = "14FEPDN29TVGLVA2CFMUTD8JC40";
document.write(<SCR" + "IPT language='JavaScript' " + "SRC=//" + "srv1.wa.marketingsolutions.yahoo.com" + "/script/ScriptServlet" + "?aid=" + ysm_accountid + "></SCR" + "IPT>");
// -->
</SCRIPT>;

これ更新しないのかな。哀愁ただようソースな気が。

Contact Form 7 の仕様

Contact Form 7 は、基本的にサンクスページがありません。

普通、コンバージョン測定用のタグはサンクスページに貼るんですけど、今回の場合はそれ以外の方法を取るしかありません。

Contact Form 7 のドキュメントのTipsにある「Tracking Form Submissions with Google Analytics | Contact Form 7」を見るとこんなことが書いてありました。

_trackPageview() を実行させるのに JavaScript のファイルを編集する必要はありません。Contact Form 7 では on_sent_ok という JavaScript アクションフックを用意していて、これを使って、フォーム送信が正常終了した後で実行したい JavaScript のコードを指定することができるのです。

その他設定のところで、on_sent_ok: 'hogefugapiyo'みたいなことをすれば、文字列化したJavaScriptコードを実行できるっぽいです。そこにJavaScriptのコードを流しこめば良いのですね。

一応、この辺がどんなコードになっているかも見てみます。（/wp-content/plugins/contact-form-7/scripts.js）

if (data.onSentOk)
  $.each(data.onSentOk, function(i, n) { eval(n) });

48, 49行目ら辺にそれらしいコードがありますが、取得したjsonのonSentOKの中にある記述を、単純にevalしてるだけっぽいので、ここに任意のコードを挿入すればOKそうです。

on_sent_ok: 'location.replace("/hoge.html")'とすればサンクスページを指定することもできるようですが、わざわざ用意するのもメンドイので、このタイミングでコンバージョンタグを読み込ませようと思います。

コンバージョンタグを改変

もう一度コンバージョンタグのサンプル。

<SCRIPT language="JavaScript">
<!-- Yahoo! Search Marketing
window.ysm_customData = new Object();
window.ysm_customData.conversion = "transid=,currency=,amount=";
var ysm_accountid = "14FEPDN29TVGLVA2CFMUTD8JC40";
document.write(<SCR" + "IPT language='JavaScript' " + "SRC=//" + "srv1.wa.marketingsolutions.yahoo.com" + "/script/ScriptServlet" + "?aid=" + ysm_accountid + "></SCR" + "IPT>");
// -->
</SCRIPT>;

要するに、グローバル空間にいくつか変数を定義して、用意されたscript要素が挿入されれば良さそうです。

head内に入れろと書いてありますが、document.writeを使ってる絡みかなと思うので、bodyに入ればいいでしょう。

on_sent_okフックの中にタグは書けないので、動的にタグを生成させます。

以下が、改変後のコードです。

window.ysm_customData = new Object();
window.ysm_customData.conversion = "transid=,currency=,amount=";
window.ysm_accountid = "14FEPDN29TVGLVA2CFMUTD8JC40";
(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//srv2.wa.marketingsolutions.yahoo.com/script/ScriptServlet?aid=" + ysm_accountid;
document.body.appendChild(script);
})();

最終的にすべてをシングルクォートで囲むので、ソース内にはシングルクォートを使わないという点が注意するところです。

後は、これを一行に直します。

on_sent_ok: 'window.ysm_customData=new Object();window.ysm_customData.conversion="transid=,currency=,amount=";window.ysm_accountid="14FEPDN29TVGLVA2CFMUTD8JC40";(function(){var script=document.createElement("script");script.type="text/javascript";script.src="//srv2.wa.marketingsolutions.yahoo.com/script/ScriptServlet?aid="+ysm_accountid;document.body.appendChild(script);})();'

これを、その他設定の中に入れてやります。

まとめ

とりあえずこれで今のところコンバージョンが取れてます。おまけに非同期になっちゃったり。

以上のコードをコピペしてもなんの意味もないので、自分の環境に応じて書き換えてください。

指定されたコンバージョンタグをそのまま使っていないし、指定された方法でもないので、おかしいことになる可能性もあります。その時は臨機応変対応してください。大変なことが起こっても俺は知りません。