コンテンツにスキップ

【ContactForm7】A８トラッキングタグの設定について#

概要#

本ページでは、ContactForm7をご利用されている広告主様に対して、A8のトラッキングタグの設定方法をご案内致します。

Info

ContactForm7 の設置が完了している事を前提と致します。

ContactForm7の仕様、使い方については、公式サポートをご参照下さい。

ContactForm7公式サポート

※本ページの内容は2022年2月時点のものとなります。
今後、ContactForm7の仕様変更により、設定手順が変更となる可能性も御座いますので、予めご了承下さい。

設定の流れ#

  1. メッセージ保存用のプラグイン「flamingo」のダウンロード・インストール
  2. Wordpress管理画面よりトラッキングタグの設定
  3. A8.netにて成果計上テスト実施
  4. テストが成功後、設定完了

事前準備#

送信メッセージのロストをまずは防ぐ為に、メッセージ保存用のプラグインをダウンロード・インストールして下さい。

flamingo(ContactForm7と同じ作者が提供しております)

設定条件#

ContactForm7はAjAXによる送信をサポートしております。
本ページでご案内しているトラッキングタグの発火はAJAXでの環境下で動くカスタムDOMイベントを利用しています。
この為、非AJAXの場合はトラッキングタグは発火致しません。

非AJAXでご設定されている場合は、広告主様にてご確認・ご調整の上、AJAXでの動作設定をお願い致します。

公式ヘルプページ

手順#

ContactForm7は、サンクスページが御座いません。

Wordpressの固定ページ等で、別途、サンクスページを用意されており、
フォーム送信時にスクリプト処理等で、ContactForm7よりサンクスページへ遷移されている場合は、
「サンクスページを設定されている場合]をご参照下さい。

通常設定

Wordpress管理画面より設定中のContactForm7の編集画面を開き、以下のタグを設定下さい。

１．フォーム内submitボタン前に以下のタグを挿入

[hidden customId id:_a8_uid]

２．フォーム内の最下部へ以下のタグを挿入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<span id="a8sales"></span>
<script src="//statics.a8.net/a8sales/a8sales.js"></script>
<script>
function getUniqueStr(myStrong){
 var strong = 1000;
 if (myStrong) strong = myStrong;
 return new Date().getTime().toString(16) + Math.floor(strong*Math.random()).toString(16);};
document.getElementById("_a8_uid").value = getUniqueStr();
document.addEventListener( 'wpcf7mailsent', function( event ) {
    var inputs = event.detail.inputs;
    for ( var i = 0; i < inputs.length; i++ ) {
        if ( 'customId' == inputs[i].name ) {
a8sales({
  "pid": "s00000000062001", //適宜変更
  "order_number": inputs[i].value, //そのまま
  "currency": "JPY", //適宜変更
  "items": [
    {
      "code": "001", //適宜変更
      "price": 200, //適宜変更
      "quantity": 2 //適宜変更
    },
  ],
   "total_price": 400 //適宜変更
});
            break;
        }
    }
}, false );
</script>

設定サンプル

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[hidden customId id:_a8_uid]

[submit "Send"]

<span id="a8sales"></span>
<script src="//statics.a8.net/a8sales/a8sales.js"></script>
<script>
function getUniqueStr(myStrong){
 var strong = 1000;
 if (myStrong) strong = myStrong;
 return new Date().getTime().toString(16)  +
 Math.floor(strong*Math.random()).toString(16);};
document.getElementById("_a8_uid").value = getUniqueStr();
document.addEventListener( 'wpcf7mailsent', function( event ) {
    var inputs = event.detail.inputs;
    for ( var i = 0; i < inputs.length; i++ ) {
        if ( 'customId' == inputs[i].name ) {
a8sales({
  "pid": "s00000000062001",
  "order_number": inputs[i].value,
  "currency": "JPY",
  "items": [
    {
      "code": "001",
      "price": 200,
      "quantity": 2
    },
  ],
   "total_price": 400
});
            break;
        }
    }
}, false );
</script>

サンクスページを設定されている場合

Wordpress管理画面より設定中のContactForm7の編集画面を開き、以下のタグを設定下さい。

１．該当フォームへ問い合わせ番号用の値を挿入

[hidden customId id:_a8_uid]

２．フォーム内の最下部へ以下のタグを挿入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<script>
function getUniqueStr(myStrong){
var strong = 1000;
if (myStrong) strong = myStrong;
return new Date().getTime().toString(16) + Math.floor(strong*Math.random()).toString(16);};
var a8uidValue = document.getElementById("_a8_uid").value = getUniqueStr();
var expire = new Date();
expire.setTime( expire.getTime() + 1 * 30 * 24 * 60 * 60 * 1000 );
document.cookie = "_a8_orderno" + "=" + encodeURIComponent(a8uidValue) + '; path=/; expires=' + expire.toUTCString();
</script>

Note

location 等、サンクスページへの遷移の設定は別途実装下さい。

３．サンクスページの<body>内に以下タグを設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<span id="a8sales"></span>
<script src="//statics.a8.net/a8sales/a8sales.js"></script>
<script>
var cookies = document.cookie;
var cookieItem = cookies.split(";");
var a8OrderNo = "";
for (i = 0; i < cookieItem.length; i++) {
  var elem = cookieItem[i].split("=");
  if (elem[0].trim() == "_a8_orderno") {
    var a8OrderNo = decodeURIComponent(elem[1]);
    a8sales({
    "pid": "s00000000062001",　//適宜変更
    "order_number": a8OrderNo,　//そのまま
    "currency": "JPY",
    "items": [
      {
      "code": "a8",　//適宜変更
      "price": 200,　//適宜変更
      "quantity": 2　//適宜変更
      },
    ],
  "total_price": 400　//適宜変更
　});
  } else {
      continue;
  }
var dt = new Date('1999-12-31T23:59:59Z');
document.cookie = "_a8_orderno=; expires=" + dt.toUTCString();
}
</script>

設定サンプル

ContactForm7の設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[hidden customId id:_a8_uid]

[submit "Send"]

<script>
function getUniqueStr(myStrong){
var strong = 1000;
if (myStrong) strong = myStrong;
return new Date().getTime().toString(16) + Math.floor(strong*Math.random()).toString(16);};
var a8uidValue = document.getElementById("_a8_uid").value = getUniqueStr();
var expire = new Date();
expire.setTime( expire.getTime() + 1 * 30 * 24 * 60 * 60 * 1000 );
document.cookie = "_a8_orderno" + "=" + encodeURIComponent(a8uidValue) + '; path=/; expires=' + expire.toUTCString();
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '※contactform7のIDを指定※' == event.detail.contactFormId ) {
location = '※サンクスページURL指定※';
}
}, false );
</script>

サンクスページの設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="A8" />
<title>完了ページ設定デモ</title>
</head>

<body>

<p>申込ありがとう御座いました。</p>

<span id="a8sales"></span>
<script src="//statics.a8.net/a8sales/a8sales.js"></script>
<script>
var cookies = document.cookie;
var cookieItem = cookies.split(";");
var a8OrderNo = "";
for (i = 0; i < cookieItem.length; i++) {
  var elem = cookieItem[i].split("=");
  if (elem[0].trim() == "_a8_orderno") {
    var a8OrderNo = decodeURIComponent(elem[1]);
    a8sales({
    "pid": "s00000000062001",
    "order_number": a8OrderNo,
    "currency": "JPY",
    "items": [
      {
      "code": "a8",
      "price": 200,
      "quantity": 2
      },
    ],
  "total_price": 400
　});
  } else {
      continue;
  }
var dt = new Date('1999-12-31T23:59:59Z');
document.cookie = "_a8_orderno=; expires=" + dt.toUTCString();
}
</script>

</body>
</html>

動作について#

  • hidden要素で、formの部品として問い合わせ番号を格納する物を用意
  • アクセスごとにユニークな値をjavascriptで生成。
    • UUIDではないが、それに近い値を生成し、formの id=_a8_uid 要素(hidden)に追加
    • id=_a8_uid , name=customId としています。
    • [customId] とすることで、メール本文にも追加可能です。
  • 通常設定の場合：ContactForm7が用意しているDOMイベント wpcf7mailsent が実行された際に、A8の成果送信処理を実施。
  • サンクスページ有りの場合：サンクスページに遷移された際に、A8の成果送信処理を実施。