ECCUBE3で作ったショッピングサイトにA8アフェリエイトを導入してみた

ECCUBE3構築サイトにA8タグをセットすることが出来ました。

A8アフェリエイトでは、「ランディングページに設置したタグ」と「成果発生ページに設置したタグ」を使って、「誰が何をどれだけ売ってくれたのか?」をトラッキングします。

簡単に設置できるのかと思いきや、ECCUBE3サイトへの設置はかなりハードルが高いです。かなり苦労して設置したのでまとめておきたいと思います。

「ランディングページ用のタグ」の設置(簡単)

1. ECCUBE管理画面から新規ブロック「A8ランディングページタグ」を作成

2. A8から支給された「ランディングページタグ」を貼り付け
中身はこれ。<script src=”//statics.a8.net/a8sales/a8sales.js”></script>

3. ランディングページのheadに設置(自分の場合は全ページに設置しました)

以上です。ランディングページタグの設置はとても簡単です。
続けて「成果発生タグ」の設置に進みましょう。

「成果発生ページタグ」の設置その1

↑A8設置マニュアルより

えっ???何???意味不明???
どのファイルをどうすればよいのか全くわかりません…

pidはA8から支給されますので、問題ありません。(テスト段階ではテスト用のIDを使用します)

最終的にECCUBEから持ってくる必要があるのは以下の要素です。

  • order_number 注文番号
  • price 単価
  • quantity 個数

※他の要素は省略時の自動計算とかあるので不要です。

疑問:どうやってこれらの情報を持ってくるのか???

「eccube3 a8タグの設置」でググってもよくわからず、A8サイドでも確実な情報を持っていません。

結論:頑張っていろいろやってみるしか無い!

1.注文完了画面でコンバージョンタグを表示する方法

まずはこのサイトを参考にしました。

該当ファイルがどこに有るのかよくわかりません。
で、FTPソフトから検索してみたらそれらしきファイルが見つかりました。

このファイルを開くと、350行目あたり(バージョンにより異なる?)に以下の記述があります。

log_info(‘購入処理完了’, array($orderId));

return $app->render(‘Shopping/complete.twig’, array(
‘orderId’ => $orderId,
));
}

これを以下のように変更します。(赤字部分を追記)

log_info(‘購入処理完了’, array($orderId));

$Order = null;
if (!empty($orderId)) {
$Order = $app[‘eccube.repository.order’]->find($orderId);
}

return $app->render(‘Shopping/complete.twig’, array(
‘orderId’ => $orderId,
‘Order’ => $Order, // Order変数を追加
));
}

これで、注文番号や単価などの購入情報を「購入完了ページ」に持ってくることができるようになりました。

次はこちら↓

購入完了ページが表示されたら、A8サーバーに購入情報を渡すようにします。

complete.twigは、ECCUBEの管理画面から変更できます。

右端の…から「ページ編集」。しかし、うまく行きませんでした。

購入完了画面(Shopping/complete.twig)に追記すると、完了ページが表示されなくなります。注文自体は成立するのですが、完了ページの代わりにエラーページが出るので、ここをもとに戻しました。

なので、ここは一旦放置。
complete.twigには手を付けないように。

この状態で、A8サイドのエンジニアを交えてメールでいろいろやり取りをしましたが、なかなかうまく行きません。

  • 記述位置をいろいろ変更 → 改善せず
  • <!– {{dump(Order)}} –>を入れてみる → 改善せず
  • ECCUBE3のformメソッド変更、設置位置変更など → 改善せず

ところがあるタイミングで「DNS方式」を提案されました。

エックスサーバーでDNSを設定

直下、または並列のサブドメインを作成し、cnameを設定とのことなので、早速トライ。エックスサーバーはサブドメインの設定が簡単に行なえます。ちなみに今回のECCUBEサイト自体がサブドメインだったので、並列でのサブドメインを作成しました。

エックスサーバーの管理画面からサブドメイン設定

サブドメイン設定の追加に進む

こんな感じになりました。

ドメインそのままです(笑)。下の段がそもそものECCUBEサイト、上が新しく設定したサブドメインです。

で、このサブドメインのDNSレコードを設定

該当ドメインを選択して

CNAMEに「trck.a8.net」を入れる

設定完了しました。

再び、購入完了画面のタグ設置に戻ります。

「成果発生ページタグ」の設置その2

ECCUBE管理画面から新規ブロックを作成します。

以下のように設定

<script>
a8sales({
“pid”: “s00000012345678”,
“order_number”: “{{ orderId }}”,
“currency”: “JPY”,
“items”: [
{
{% for OrderDetail in Order.OrderDetails %}
“code”: “{{ OrderDetail.product_code }}”,
“price”:{{ OrderDetail.price }},
“quantity”: {{ OrderDetail.quantity }}
{% endfor %} },
],
});
</script>

※pidはA8から支給されます。テスト時にはテスト用のIDを記入します。

 

一覧に出ました。

そしてこのブロックを購入完了ページに設置。

以上で設置完了です。このあと、A8側が実施するタグテストにも無事合格しました。

せっかくなので、「面倒だから全部やって」という方からの外注もお受けしたいと思います(設置のみ3万円、A8対応込5万円)。サブドメインが設置できてDNS設定可能なサーバーであればたぶんOKです。まずはメールにてご相談ください。

nakano@soulman.ne.jp