EC-CUBE4.x 系の注文完了画面にA8.net CVトラッキングタグを設定する EC-CUBE4にA8.net CVトラッキングをタグ設定する手順とtwigコード UZUREA編集部 公開:2020年11月9日(4年前) / 更新:2021年9月6日 コメント 0件 Web技術ECphpweb制作 SNS X Facebook B! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 EC-CUBEのバージョン2用にはA8.net提供の公式プラグインが出ているものの、最新のEC-CUBE4用のものは存在しません。そこで当記事では、EC-CUBE4.x系にA8.netのトラッキングタグと、CV(=コンバージョン)計測タグを設置する手順と、必要なtwigコードについて記載しています。 なお、A8.netからは当初『DNS設定での簡易トラッキング』方法を勧められますが、サーバー環境やサービスへの影響を鑑みてITP対応のJavaScriptによるトラッキングを採用しました。 記事の索引1 A8.netでのコンバージョン計測タグ1.1 管理画面:ブロック管理で、2つのブロックを新規作成1.2 管理画面:レイアウト管理でブロックを適用する1.3 管理画面:ページ管理でレイアウトを適用する1.4 設置完了、動作テスト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トラッキング設定について』 管理画面:ブロック管理で、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> “pid”の『s000000xxxxxx』はA8.netから提供された広告主IDに書き換えてください税別価格で”price”と”total_proce”を表示する必要があるそうで・・・”Order.subtotal”だと税込価格になっちゃうので、上記のようなコードで実現 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 管理画面:レイアウト管理でブロックを適用する 続いて、作成した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でも使える」と言っていたそうですが、契約をしてみると「使っている広告主が居る(稼働実績がある)という意味で言った」との事で、実装方法については広告主が独自に調査しなくてはならないという状況だったようです。 筆者としては、どちらの言い分も理解できるだけに、ビジネスシーンのやり取りについても、あらためて慎重にならなくては……と感じました(汗)。 以下に参考・関連のリンクも記載しますので、この記事がどこか誰かの一助になれば幸いです。 A8.netトラッキング設定について | A8.net 公式ドキュメント新トラッキング方式への切替方法について | A8.net 公式ドキュメントECcube 3系にA8アフィリエイトタグを設置 | コバオンEC-CUBE2.x用 A8.net 計測用プラグイン | EC-CUBE 公式プラグイン検索Twigで変数を使用する際のメモ | Quiita A8.netでアフィリエイト広告を運用したい(掲載したい=広告主)という方はこちらから テンプレートエンジンTwigを覚える本 ¥1,250 (2024/10/09 17:06:52時点 Amazon調べ-詳細) Amazonでのレビューを見る Kindle Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す EC-CUBE 4 システム構築入門&店舗運営・管理ビギナーズガイド ラトルズ ¥4,839 (2024/10/09 17:06:53時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す