メインコンテンツまでスキップ

Contact Form7プラグインの成果計測

Contact Form7プラグインを利用する際の成果計測について解説します。

備考

ドキュメントの内容は、作成・更新時点の連携先仕様に基づいているため、プラグイン側の仕様変更により、一部の手順や設定が異なる場合があります。最新情報は、ご利用サービスの公式ドキュメントやサポートサイトをご確認ください。

概要​

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

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

Contact Form 7
https://ja.wordpress.org/plugins/contact-form-7/

1. 着地点タグの設置​

1. 着地点タグを取得​

広告管理 > 広告一覧 > 詳細 にて着地点タグを取得します。

2. WordPressに着地点タグを設置​

アフィリコード・システムのタグ設置用プラグイン （Affilicode-Tag-Setting）があります。
タグ設置時はプラグインのご利用を推奨します。

2. 成果地点タグの設置​

以下は、フォーム送信ページへの成果地点タグを設置方法です。
フォーム送信ページから別に用意したサンクスページに遷移する場合は、サンクスページの方に成果地点タグを設置してください。

1. WordPressでContact Form7をインストール​

インストールすると、サイドメニューに 「お問い合わせ」 が追加されます。
「新規追加」 からフォームを作成してください。

Contact Form7インストール

2. 成果地点タグを取得​

広告管理 > 広告一覧 > 詳細 にて成果地点タグを取得します。

3. 成果地点タグを書き換える​

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

成果地点タグ　イベント通知の追記コード
<script>
document.addEventListener('DOMContentLoaded', function(){
var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('submit', function(event){
　 === 成果地点タグの記述に続く ===
</script>
  • 「広告ID」の部分は、対象の広告IDに書き換えてください
  • 「システムドメイン」 部分をご契約のドメインに書き換えてください
  • wpcf7Elm は、フォーム側のサンプル変数名です
  • クラス名 .wpcf7 は、Contact Form7でのフォーム作成時にデフォルトで付与されるクラス名です。通常はそのまま追記してください
成果地点タグ　追記後
<script>
document.addEventListener('DOMContentLoaded', function(){
var wpcf7Elm = document.querySelector('.wpcf7');
wpcf7Elm.addEventListener('submit', function(event){
var PV = "広告ID";
var KEYS = {cid : ["CL_", "ACT_", "cid_auth_get_type"], plid : ["PL_", "APT_", "plid_auth_get_type"]};
var turl = "https://システムドメイン/track.php?p=" + PV;
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>

※広告IDとシステムドメインは、適宜書き換えてください。

DOM events
https://contactform7.com/dom-events/

4. 作成したフォームのページ （投稿ページ / 固定ページ） に移動​

問い合わせフォーム

※ サンプルとして、問い合せフォームを固定ページで作成しています。

5. 成果地点タグを設置​

編集エリア下部のタグ貼りつけ欄（body内出力タグ）に （３.） の成果地点タグを設置します。
フォームを保存して設定完了です。

フォームにタグ設置

6. 計測テスト​

「送信」後にタグが発火し、成果が発生するか確認してください。

img4