Contact Form 7で、送信完了時にコンバージョン測定させる場合の話です。
Google Adwords , YDN などであれば、固定の計測タグを入れればお終いですが、A8の場合はそうはいきません。
注文番号みたいな動的なパラメータが必要です。
今回その対応に迫られたので、かなりやっつけではありますがその方法を提示したいと思います。
要件
- 注文番号はユニークであれば何でもよい（本当は連番にしたかったけど）
- 注文番号は、Contact Form DB にもセットされるし、A8タグ内部にもセットされる、メールにもセットされる（そうしないとどの送信に対する成果なのかわからない）
- 完了ページはContact Form 7外に作る（on_sent_ok:で専用ページにリダイレクトさせる）
やったこと
まあ、簡単に言うと
1.フォーム入力ページ呼び出し時にJavascriptで注文番号を生成してCookieに格納（既にセットされている場合は新たに生成することはしません）。
2.上記1.の注文番号を、hidden属性でフォーム値として持たせる(Contact Form DBに値を入れるのに必要）。
3.フォーム完了ページに遷移した時に、Cookieに格納された注文番号でA8タグを生成し、html出力（Cookieはこの時点で消します）。
というものです。
やっつけですねー。。
で、以下、具体的な設定方法。
Contact Form 7 側の設定
・・と、その前に。
jQueryを使う事を前提としたコードになっています。
フォーム（HTML）に以下のコードを入れる
<input type="hidden" name="orderid" id="orderid" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
var cn = "orderid";
var id = $.cookie(cn);
if (!id) {
id = Math.floor( $.now() / 1000 ).toString() +'-' + (Math.floor( Math.random() * (10000 -1000) ) +1000).toString(); // タイムスタンプ-9999 という形式で注文番号を作っています
$.cookie(cn,id,{ path: "/" });
}
$('#orderid').val(id);
});
</script>
hiddenでフォームにorderidをセットします。
このorderidが生成されるタイミングは、フォーム入力画面を表示した時点です。
※ええ、本当は送信完了時点で生成されるのがベストな事は分かっていますよ・・
その他の設定で、完了ページにリダイレクトする設定を行う
on_sent_ok: "location.href='http://example.com/contact_finish';"
今回のA8タグとは直接関係ない部分です。念のため。
完了ページ側の設定
上の例でいうと、http://example.com/contact_finish に相当する箇所に、以下のコードを入れるわけです。
<div id="a8tag"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
var cn = "orderid";
var id = $.cookie(cn);
if (id) {
$('#a8tag').html('<img src="ｘｘｘ（A8から提示されたURL）' + id + '" width="1" height="1">'); // ここは適示修正してください
}
$.removeCookie(cn,{ path: "/" });
});
</script>
以上です。
なお、この方法は完全ではありません。
完了ページのURLが分かっていたら、入力ページを表示後、完了ページを表示、と遷移するだけでCVが発生しちゃいます（フォーム送信しないでも、です）。
Javascript しか使っていないから、こうなっちゃうわけです。
サーバサイドで処理出来たらこんな片手落ちなことはないのですが。。
WordPressプラグイン・・まで行かなくともできなくはないでしょうが。
正直そこまでやる気はしないし、いきなり完了ページに行く人なんて普段いないでしょうし。
こんなところでご勘弁を、というところです。
※私が直接サイト作るなら、少なくともフォームに関してはWordPress外でやります。
WordPressで動的に画面構成された結果を取りこんで動作できる汎用フォーム持っていますし・・とさりげなく自慢╭( ･ㅂ･)و ̑̑ ｸﾞｯ !
雑感
Contact Form 7って市民権得られていますが、正直私にとっては使いづらくてしょうがない代物です。
カスタマイズがとっても面倒なので。
まあ、元々の設計思想が、入力→即送信でまた入力に戻る。
という日本ローカルルールじゃないものなので、もうそこから大変なわけですが。。
また、上の動きで示したように、１アクション１画面で全部完結させるスタイルなので、情報を引き継ぐ、という概念が欠落しているのですよね。
なので、フォーム値（今回は隠し属性で持たせた注文番号）をimgタグに含ませる、なんてことが簡単にできないのです。
なお、Contact Form 7 作者曰く、そんなものはJavascriptで制御させなさい、と一刀両断しておりますが、そのJavascript上で入力値を引き継ぐ事が簡単にできないからみんな困っているわけでして。。（頑張れば出来るのは分かってますが）
なんか典型的なプロダクトアウト型な人なんだな・・と思ったわけですね。
※こういうのは技術者によくいるタイプです
なんか今回はグチネタですね。。