人気ワード

Copy Title & URL

Bookmark

Share

WordPressのプラグイン Contact Form 7 利用時に成果計測を行う方法

目次

  1. プラグイン Contact Form 7 利用時の成果計測
    1. 事前準備
    2. 着地点タグを設置
    3. 成果地点タグをフォームに設置

プラグイン Contact Form 7 利用時の成果計測

Contact form 7はWordPressで問い合わせページやフォームを作成する際によく利用されているプラグインです。

このプラグインを利用してフォーム作成をする際、アフィリコード・システムから発行される「成果地点タグ」を、お問い合わせが完了した時に「発火」させる設定を行うことで、フォーム送信時の成果計測が可能となります。

本マニュアルでは、WordPressをご利用の方向けに設定方法を紹介します。

1. 事前準備

アフィリコード・システムで発行する トラッキングタグ(計測タグ) をWordPressの任意の記事内に出力できるプラグインAffilicode-Tag-Settingが公開されていますので、タグの設置はこちらのご利用を推奨します。

マニュアル:WordPressでAffilicode-Tag-Settingプラグインを利用する方法

【アフィリコード・システム】Contact Form 7成果計測_Affilicode-Tag-Setting

2. 着地点タグを設置

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

【アフィリコード・システム】Contact Form 7成果計測_着地点タグ

3. 成果地点タグをフォームに設置

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

【アフィリコード・システム】Contact Form 7成果計測_フォーム編集
図3-1:WordPressのフォーム編集画面

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

アフィリコード・システム】Contact Form 7成果計測_着地点タグ

argsを付与して取得した成果地点タグ

<script>
(function acsTrack(){
var PV = "広告ID";
var _ARGSV = "成果識別子";
var KEYS = {cid : ["CL_", "ACT_", "cid_auth_get_type"], plid : ["PL_", "APT_", "plid_auth_get_type"]};
var turl = "https://アフィリコード・システム設置先URL/track.php?p=" + PV + "&args=" + _ARGSV;
var cks = document.cookie.split("; ").reduce(function(ret, s){ var kv = s.split("="); if(kv[0] && kv[1]) ret[kv[0]] = kv[1]; return ret; }, []);
turl = Object.keys(KEYS).reduce(function(url, k){ var vk = KEYS[k][0] + PV; var tk = KEYS[k][1] + PV; var v = "", t = ""; if(cks[vk]){ v = cks[vk]; if(cks[tk]) t = cks[tk]; }else if(localStorage.getItem(vk)){ v = localStorage.getItem(vk); t = "ls"; } if(v) url += "&" + k + "=" + v; if(t) url += "&" + KEYS[k][2] + "=" + t; return url; }, turl);
var xhr = new XMLHttpRequest(); xhr.open("GET", turl); xhr.send(); })();
</script>

フォームでのコンバージョンの成果確認をしやすくするため、args(付与引数)に値を設定してもよいでしょう。(例:var _ARGSV = "WP_form"; など。)

③ 次に、フォームの [submit "送信"] ボタン押下時にタグが発火するように、コピーした成果地点タグ内にイベント通知処理の記述を追記します。

<script>
document.addEventListener('DOMContentLoaded', function(){
var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('submit', function(event){
  ==== 成果地点タグの記述に続く =====
  • wpcf7Elmは、フォーム側のサンプル変数名です。
  • クラス名.wpcf7 は、「Contact Form 7」でフォーム作成したときにデフォルトで付与されるクラス名なので、通常はそのまま追記してください。

参考:Contact Form 7 DOMイベント(外部サイト)

フォームコンバージョン用の記述を追記した成果地点タグ
※以下コードに広告IDとアフィリコード・システム設置先URL、args付与時は成果識別子を適宜入力してください。

<script>
document.addEventListener('DOMContentLoaded', function(){
var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('submit', function(event){
var PV = "広告ID";
var _ARGSV = "成果識別子";
var KEYS = {cid : ["CL_", "ACT_", "cid_auth_get_type"], plid : ["PL_", "APT_", "plid_auth_get_type"]};
var turl = "https://アフィリコード・システム設置先URL/track.php?p=" + PV + "&args=" + _ARGSV;
var cks = document.cookie.split("; ").reduce(function(ret, s){ var kv = s.split("="); if(kv[0] && kv[1]) ret[kv[0]] = kv[1]; return ret; }, []);
turl = Object.keys(KEYS).reduce(function(url, k){ var vk = KEYS[k][0] + PV; var tk = KEYS[k][1] + PV; var v = "", t = ""; if(cks[vk]){ v = cks[vk]; if(cks[tk]) t = cks[tk]; }else if(localStorage.getItem(vk)){ v = localStorage.getItem(vk); t = "ls"; } if(v) url += "&" + k + "=" + v; if(t) url += "&" + KEYS[k][2] + "=" + t; return url; }, turl);
var xhr = new XMLHttpRequest(); xhr.open("GET", turl); xhr.send();
});
});
</script>

④ 作成したフォームのページ(投稿ページ・固定ページ)に移動します。
 ※例として、お問い合せページを固定ページで作成しています。

【アフィリコード・システム】Contact Form 7成果計測_固定ページ

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

【アフィリコード・システム】Contact Form 7成果計測_固定ページ

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

【アフィリコード・システム】Contact Form 7成果計測_作成フォームイメージ

関連記事

アフィリコード・システム

https://system.affilicode.jp/

アフィリエイト広告配信システム

本格的なASP運営から自社アフィリエイト運用
導入実績1,000社以上!多機能アフィリエイトシステム

おすすめ記事