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

公開日：2020.08.20 更新日：2020.08.20

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

Copy Title & URL
あとで読む

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

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

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

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

参考：Contact Form 7 DOMイベント（外部サイト）

1. 事前準備

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

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

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

2. 着地点タグを設置

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

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

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

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

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

▼成果地点タグ

<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内出力タグ）に③のタグを貼り、フォームを保存して設定完了です。

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

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

製品情報

製品	アフィリコード・システム
概要	アフィリエイト広告配信システム「アフィリコード・システム」自社アフィリエイト運用から本格的なASP運営まで導入実績700社以上！多機能アフィリエイトシステム
URL	https://system.affilicode.jp/

人気ワード

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

目次