人気ワード

Copy Title & URL

Bookmark

Feed

Share

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

目次

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

プラグイン「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. 着地点タグを設置

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

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

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

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

【アフィリコード・システム】Contact Form 7成果計測_フォーム編集
図3-1: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>

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

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

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

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

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

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

製品情報

アフィリエイト広告配信システム「アフィリコード・システム」
製品アフィリコード・システム
概要アフィリエイト広告配信システム
「アフィリコード・システム」

自社アフィリエイト運用から本格的なASP運営まで
導入実績700社以上!多機能アフィリエイトシステム
URLhttps://system.affilicode.jp/

関連記事