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

EC-CUBEのバージョン2用にはA8.net提供の公式プラグインが出ているものの、最新のEC-CUBE4用のものは存在しません。そこで当記事では、EC-CUBE4.x系にA8.netのトラッキングタグと、CV（＝コンバージョン）計測タグを設置する手順と、必要なtwigコードについて記載しています。

なお、A8.netからは当初『DNS設定での簡易トラッキング』方法を勧められますが、サーバー環境やサービスへの影響を鑑みてITP対応のJavaScriptによるトラッキングを採用しました。

記事の索引

1 A8.netでのコンバージョン計測タグ
2 最後に……参考・関連リンク

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トラッキング設定について』

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

上記を参考に、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>

“pid”の『s000000xxxxxx』はA8.netから提供された広告主IDに書き換えてください
税別価格で”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。

※a8crossDomain.jsについての補足：Webサイト内でドメイン、サブドメインをまたいで推移するような構成の場合はパラメーターを引き継ぐために必要。コンバージョンページには不要なようですが、あっても問題はなさそうです。

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

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

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

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

さらに、他の全てのレイアウトの<head></head>タグ内にも『A8.net 解析タグ』を設置します。（『A8.net コンバージョンタグ』は不要）

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

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

新規作成した『購入完了ページ用レイアウト』を、**商品購入/ご注文完了画面**に適用する

設置完了、動作テスト

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

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

最後に……参考・関連リンク

本件は筆者がクライアントからの依頼で対応することになったのですが、普段Web制作に従事する筆者でもA8.netのサポートドキュメントは表記や解説内容が難解に思えました。日本最大級のアフィリエイトサービスとのことで、利用者・契約企業さんも多いようなので、ドキュメントがもっと便利になるとよいのですが。

また、EC-CUBE用のプラグインとして、EC-CUBE2.ｘ系のものまではA8.netの公式プラグインが提供（外部リンク）されていますが、最新のEC-CUBE4.x系（と3.x系）用は存在しません。

前述の案件ではクライアントの担当者さんは、A8.netの営業さんにこの点を聞いたところ「EC-CUBE4でも使える」と言っていたそうですが、契約をしてみると「使っている広告主が居る（稼働実績がある）という意味で言った」との事で、実装方法については広告主が独自に調査しなくてはならないという状況だったようです。

筆者としては、どちらの言い分も理解できるだけに、ビジネスシーンのやり取りについても、あらためて慎重にならなくては……と感じました（汗）。

以下に参考・関連のリンクも記載しますので、この記事がどこか誰かの一助になれば幸いです。

A8.netでアフィリエイト広告を運用したい（掲載したい＝広告主）
という方はこちらから