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

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

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。

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

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

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。

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

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の担当者さんがやってくれる場合もあるようです。

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

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

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

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

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

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

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

この記事をシェアする

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

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

この記事の執筆は……

UZUREA編集部 アイコン

UZUREA編集部

UZUREA.NET 編集部アカウント。運営会社スタッフ及び契約ライターによる匿名寄稿を含みます。

関連する記事

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『少年マンガ・青年マンガ』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『少年マンガ・青年マンガ』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『少女マンガ』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『少女マンガ』の対象作品一覧

2023年Amazonプライムデー 最大70%OFF Kindle本キャンペーン『絵本・児童書』の対象作品一覧

2023年Amazonプライムデー 最大70%OFF Kindle本キャンペーン『絵本・児童書』の対象作品一覧

2023年Amazonプライムデー 最大70%OFF Kindle本キャンペーン『アート・建築・デザイン』関連の対象作品一覧

2023年Amazonプライムデー 最大70%OFF Kindle本キャンペーン『アート・建築・デザイン』関連の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『早川書房』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『早川書房』の対象作品一覧

対象『小説・文芸』作品一覧 2023年6月Kindleポイント還元キャンペーン

対象『小説・文芸』作品一覧 2023年6月Kindleポイント還元キャンペーン

対象『ライトノベル』一覧 2023年6月Kindleポイント還元キャンペーン

対象『ライトノベル』一覧 2023年6月Kindleポイント還元キャンペーン

対象『ミステリー・サスペンス・ハードボイルド』作品一覧 2023年6月Kindleポイント還元キャンペーン

対象『ミステリー・サスペンス・ハードボイルド』作品一覧 2023年6月Kindleポイント還元キャンペーン

2023年5月 Kindle本マンガ・ライトノベルセール『ビーグリー』作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『ビーグリー』作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『KADOKAWA ノベル』対象作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『KADOKAWA ノベル』対象作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『KADOKAWA ンガ』対象作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『KADOKAWA ンガ』対象作品一覧

Amazon Kindle本ゴールデンウイークセール開催 2023年5月12日(金)まで 対象マンガ作品一覧も掲載

Amazon Kindle本ゴールデンウイークセール開催 2023年5月12日(金)まで 対象マンガ作品一覧も掲載


page top