EC-CUBE4.x 系の注文完了画面にA8.net CVトラッキングタグを設定する
EC-CUBE4.x 系の注文完了画面にA8.net CVトラッキングタグを設定する

EC-CUBE4にA8.netのCVトラッキングを設定する手順とtwigコード

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

0

当記事では、EC-CUBE4.x系A8.netアフィリエイトCV(=コンバージョン)計測タグを設置する基本手順と、必要なtwigコードについて記載しています。

A8.netでのコンバージョン計測タグ

アフィリエイトサービスのA8.netと広告主として契約すると、コンバージョントラッキングタグの設置について下記のようなサンプルが提示されます。

<span id="a8sales"></span>
<script>
a8sales({
  "pid": "プログラムID",
  "order_number": "御社側での注文情報を識別するID",
  "currency": "通貨コード",
  "items": [
    {
      "code": "商品を識別するコード",
      "price": 価格,
      "quantity": 個数
    },
  ],
  "total_price": 合計金額
});
</script>

参考:A8.net公式ドキュメント『A8.netトラッキング設定について』

管理画面:ブロック管理で、2つのブロックを新規作成

上記を参考に、EC-CUBE4.xの管理画面で、[コンテンツ管理] > [ブロック管理] > [新規作成] と操作して、下記のように入力。

  • ブロック名: A8.net コンバージョンタグ
  • ファイル名: a8net_conversion
  • コード:下記のコードを入力
<span id="a8sales"></span>
<script>
{% set Order_tsum = 0 %}
a8sales({
	"pid": "s000000xxxxxx",
	"order_number": "{{ Order.id }}",
	"currency": "JPY",
	"items":[{% for OrderItem in Order.MergedProductOrderItems %}
		{
			"code": "{{ OrderItem.product.id }}",
			"price": {{ OrderItem.price }},
			"quantity": {{ OrderItem.quantity }}
			{% set Order_ssum = OrderItem.price * OrderItem.quantity %}
			{% set Order_tsum = Order_tsum + Order_ssum %}
		},{% endfor %}
	],
	"total_price":{{ Order_tsum }}
});
</script>
  1. “pid”の『s000000xxxxxx』はA8.netから提供された広告主IDに書き換えてください
  2. 税別価格で”price”と”total_proce”を表示する必要があるそうで・・・”Order.subtotal”だと税込価格になっちゃうので、上記のようなコードで実現
EC-CUBE4.x A8.netのコンバージョントラッキングコード用の
ブロック新規作成その1
EC-CUBE4.x A8.netのコンバージョントラッキングコード用の
ブロック新規作成その1

あとは、もうひとつ、全ページに設置する解析タグ用のブロックも作成。

  • ブロック名: A8.net 解析タグ
  • ファイル名: a8net
  • コード: 下記のコードを入力
<script src="//statics.a8.net/a8sales/a8sales.js"></script>
<script src="//statics.a8.net/a8sales/a8crossDomain.js"></script>

2行目の”<script src=”//statics.a8.net/a8sales/a8crossDomain.js”></script>”は、クロスドメイン(ドメインをまたいで推移)対応にする必要がなければ、省略してもOK。

EC-CUBE4.x A8.netのコンバージョントラッキングコード用の
ブロック新規作成その2
EC-CUBE4.x A8.netのコンバージョントラッキングコード用の
ブロック新規作成その2

管理画面:レイアウト管理でブロックを適用する

続いて、作成した2つのブロックをレイアウト管理で各ページに適用していきます。 管理画面から [コンテンツ管理] > [レイアウト管理] > [新規作成] と操作し、下記のように設定。

  • レイアウト名:購入完了ページ用レイアウト
  • 端末種別:どちらでも(両方に適用するのでここでは一旦PC)
  • <head></head>タグ内に、先ほど作成した『A8.net 解析タグ』を設置(右側の『未使用ブロック』からドラッグ&ドロップ)
  • <body>タグ直後に、同じく先ほど作成した『A8.net コンバージョンタグ』を設置
  • その他、#headerや#footer、#drawerなどには適宜(※)必要な内容を設定しておきます。
    ※わからない場合は、デフォルトの『下層ページ用レイアウト』などに合わせておけば良いでしょう。
  • 忘れないように、画面右下の『登録』をクリック
新規レイアウトに、作成したブロック二つを登録
  • さらに、他の全てのレイアウトの<head></head>タグ内にも『A8.net 解析タグ』を設置します。 (『A8.net コンバージョンタグ』は不要)

管理画面:ページ管理でレイアウトを適用する

最後に、管理画面の[ページ管理] > [商品購入/ご注文完了] と操作し、レイアウト設定で先ほど作成した『購入完了ページ用レイアウト』を選択し、右下の『登録』をクリック。

設置完了、動作テスト

以上で設定は完了です。 購入テストを行って、購入完了画面のソースコードをチェックして正しく購入情報が出力されていることを確認しましょう。

実際に正しく取得できるかといったテストは、A8.netの担当者さんがやってくれる場合もあるようです。

参考・関連リンク

EC-CUBE4.x 系の注文完了画面にA8.net CVトラッキングタグを設定する

この記事をシェアする

この記事のタイトルとアドレスをコピー

この記を気に入ったらハートマークで応援してください

0

page top