
WordPressのプラグイン「Contact Form 7」利用時に成果計測を行う方法
プラグイン「Contact Form 7」利用時の成果計測
「Contact form 7」はWordPressで問い合わせページやフォームを作成する際によく利用されているプラグインです。
このプラグインを利用してフォーム作成をする際、アフィリコード・システムから発行される「成果地点タグ」を、お問い合わせが完了した時に「発火」させる設定を行う事で、フォーム送信時の成果計測が可能となります。
本マニュアルでは、WordPressをご利用の方向けに設定方法を紹介します。
参考:Contact Form 7 DOMイベント(外部サイト)
1. 事前準備
アフィリコード・システムで発行される「トラッキングタグ(計測タグ)」をWordPressの任意の記事内に出力できるプラグイン「Affilicode-Tag-Setting」が公開されていますので、タグの設置はこちらのご利用を推奨します。
マニュアル:WordPressでAffilicode-Tag-Settingプラグインを利用する方法

2. 着地点タグを設置
着地点タグについては通常の広告運用と同様に、アフィリコード・システム > 広告詳細 より取得し、広告遷移時の着地ページに設置してください。

3. 成果地点タグをフォームに設置
① WordPressでプラグイン「Contact Form 7」をインストールすると、管理画面左メニューに「お問い合わせ」という項目が追加されます。「新規追加」からフォームを作成していきます。

② アフィリコードシステムの成果地点タグをコピーしてテキストエディタなどに控えます。

▼成果地点タグ
<script>
var _CIDN = "cid";
var _PMTV = "pfwsron0zkwe";
var _ARGSV = "form_test";
var _TRKU = "https://demo.leafworks.jp/package/affilicode/system/track.php?p=" + _PMTV + "&args=" + _ARGSV + "&t=5bdaddd7";
var _cks = document.cookie.split("; ");
var _cidv = "";
for(var i = 0; i < _cks.length; i++){ var _ckd = _cks[i].split( "=" ); if(_ckd[0] == "CL_" + _PMTV && _ckd[1].length > 1){ _cidv = _ckd[1]; break; }}
if(!_cidv && localStorage.getItem("CL_" + _PMTV)){ _cidv = localStorage.getItem("CL_" + _PMTV); }
if(_cidv){ _TRKU += "&" + _CIDN + "=" + _cidv; }
img = document.body.appendChild(document.createElement("img"));
img.src = _TRKU;
</script>
フォームでのコンバージョンの成果確認をしやすくするため、args(付与引数)に値を設定してもよいでしょう。(例:var _ARGSV = "form_test";
)
③ 次に、フォームの [submit "送信"] ボタン押下時にタグが発火するように、コピーした成果地点タグ内にイベント通知処理の記述を追記します。
基本的にトラッキングタグに下記コードを追記するだけです。
var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('submit', function(event){
</script> 終了タグの前に、符号 }); も忘れずに。
wpcf7Elm
は、サンプル変数名なので、適宜、変更してください。- クラス名
.wpcf7
は、「Contact Form 7」でフォーム作成したときにデフォルトで付与されるクラス名なので、通常はそのまま追記してください。
▼追記後の成果地点タグ
<script>
var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('submit', function(event){
var _CIDN = "cid";
var _PMTV = "pfwsron0zkwe";
var _ARGSV = "form_test";
var _TRKU = "https://demo.leafworks.jp/package/affilicode/system/track.php?p=" + _PMTV + "&args=" + _ARGSV + "&t=5bdaddd7";
var _cks = document.cookie.split("; ");
var _cidv = "";
for(var i = 0; i < _cks.length; i++){ var _ckd = _cks[i].split( "=" ); if(_ckd[0] == "CL_" + _PMTV && _ckd[1].length > 1){ _cidv = _ckd[1]; break; }}
if(!_cidv && localStorage.getItem("CL_" + _PMTV)){ _cidv = localStorage.getItem("CL_" + _PMTV); }
if(_cidv){ _TRKU += "&" + _CIDN + "=" + _cidv; }
img = document.body.appendChild(document.createElement("img"));
img.src = _TRKU;
});
</script>
④ 作成したフォームのページ(投稿ページ・固定ページ)に移動します。
※例として、お問い合せページを固定ページとして作成しています。

⑤ 編集エリア下部のタグ貼りつけ欄(▼body内出力タグ)に③のタグを貼り、フォームを保存して設定完了です。

⑥ 設定後、成果確認テストを行ってください。
