Shopping Tracker

Shopping Trackerは株式会社ニューロープが提供する、ECサイトや#CBKシステムファミリーと連携しているメディア上で利用可能なトラッキングツールです。

はじめに

Shopping Trackerはトラッキング対象となるWebサイト上でhttps://cubki.jp/shopping_tracker.jsを読み込むことでご利用可能です。

読み込んだスクリプトは弊社サーバーと通信してユーザーの行動を記録します。データ送信に利用するAPIについての詳細はAPI referenceを参照ください。

Assistant ID

Assistant IDは#CBKシステムファミリーの一つである#CBK assistantのご利用にあたってアカウントごとに発行されるIDです。

トラッキングを開始するにはこのAssistant IDが必要になります。 Assistant IDは#CBK assistant運営元(株式会社ニューロープ)にて発行する必要がございますので、事前にお問い合わせください。

ネームスペース

Shopping Trackerを利用するには、スクリプト内で任意のネームスペースを指定する必要があります。ネームスペースとは、収集するイベントデータの区別に利用する識別子で、利用用途ごとに異なる値を指定することを推奨しています。

#CBK assistantでは複数のリコメンドサービスを提供しています。これらを同一のECに複数導入した場合などに、それぞれを区別してトラッキングすることを主な目的としています。 例えば、類似アイテムプラグインのトラッキング用途では'media-plugin'が、画像検索機能をご利用の場合は'img-search'がデフォルトで指定されます。

このネームスペースは、#CBK assistantのレポーティング画面でレポーティング対象を指定するために利用されます。 なお、リコメンドサービスを導入せず、データ分析などを目的としてトラッキングする場合、このネームスペースは利用者側で別途利用することはありません。 この場合でも、将来リコメンドを導入することも想定されるため、 'user-tracking' など目的を明示した文字列を設定することが推奨されます。

ネームスペースは複数指定可能です。複数ネームスペースを指定してイベント送信を行った場合、各ネームスペースごとにイベントを送信します。 「ネームスペースは複数指定したいが、一部のイベントは特定のネームスペースに対してのみ送信したい」といった場合は後述のスコープを参照してください。

スクリプト

以下のコードを全てのページのHTML内に追加し、該当スクリプトをロードしてください。

<script src='https://cubki.jp/shopping_tracker.js' defer async></script>

スクリプトがロードされるとJavaScript環境にwindow.CBK.trackerオブジェクトが定義され、これを利用してトラッキングを行います。

初期化

トラッキングを開始する前に、CBK.trackerの設定を行う必要があります。

初回イベント送信前に、以下の初期化メソッドを必ず実行してください。 初期化を行わずイベント送信を行うとエラーが発生します。

CBK.tracker.init(<assistantId>, <namespace>[, <options>])

初期化処理はページ遷移する度に必要になります。実際の使用例に関してはExamplesを参照してください。

また、初期化処理はwindow.CBK.trackerの定義後に呼び出される必要があり、そのためのイベントフックを定義しています。 詳細については後述の初期化フックをご参照ください。

イベントフック

初期化フック

初期化フックはスクリプトの初期化を行うための適切なタイミングで呼ばれるイベントフックで、特定の変数名（window.CBK.init）でJavaScript関数を定義しておくことでご利用いただけます。

また、このイベントフック内で初期化処理を実行後、更にイベント送信を行うことも可能です。 ページロード時にイベント送信を行う必要があるケースでご利用ください。

window.CBK = Object.assign({}, window.CBK, {
  init: function(CBK) {
    // この関数スコープ内では `CBK.tracker`は定義済み
    // `window.CBK.init`が実行された後は `window.CBK.tracker`が定義済みの状態になる

    // 初期化
    CBK.tracker.init(...);

    // 初期化後、イベント送信
    CBK.tracker.send([CBK.tracker.event(...)]);
  }
});

初期化フックを確実に実行するために、window.CBK.init関数の定義はスクリプトロード前に行ってください。

イベント

イベント種別

イベントオブジェクトの作成

スクリプトロード後、以下のようにイベント(Event)オブジェクトを作成することができます。

CBK.tracker.event({
  type: <type>, productId: <productId>, productGroupId: <productGroupId>, price: <price>, orderId: <orderId>, orderGroupId: <orderGroupId>,
  campaigns: <campaigns>, source: <source>, prevLocation: <prevLocation>, imageUrls: <imageUrls>, variation: <variation>,
})
type productId productGroupId price orderId orderGroupId userId campaigns source prevLocation imageUrls variation
impression 非必須 非必須 非必須 使用不可 使用不可 非必須 非必須 非必須 非必須 非必須 非必須
view_stock productGroupIdが空の場合は必須 productIdが空の場合は必須 非必須 使用不可 使用不可 非必須 非必須 非必須 非必須 非必須 非必須
add_to_cart 必須 非必須 非必須 使用不可 使用不可 非必須 非必須 非必須 非必須 非必須 非必須
order 必須 非必須 必須 必須 非必須 非必須 非必須 非必須 非必須 非必須 非必須

イベント送信（マニュアル）

CBK.tracker.send(<events>[, <callback>])

また、関数の呼び出し時にcallback関数を渡されなかった場合はPromiseオブジェクトが返却されるため、コールバック関数の代わりにこちらを使ってイベント送信後の処理を続行することも可能です。

イベント送信（自動）

リンクのクリック時やフォーム送信時にイベントを送信する場合はCBK.tracker.trackメソッドを利用することができます。

CBK.tracker.track(<target>, <event>)

スコープ

ネームスペースを複数指定して初期化を行っているが、特定のネームスペースに限定してイベントを送信したい場合は、以下のように scopeメソッドを使用してください。

CBK.tracker.scope(<namespace>).send([event1, event2])

Examples

impressionイベント

<script>
  window.CBK = Object.assign({}, window.CBK, { init: function(CBK) {
    // Trackerの初期化
    var assistantId = 7;
    var namespaces = ['user-tracking', 'demand-forecast'];
    CBK.tracker.init(assistantId, namespaces, { userId: window.userId });

    // `items`変数が存在する状況を想定
    if (!items) { return; }
    var events = [];
    items.forEach(function (item) {
      for (var i = 0; i < item.length; i++) {
        events.push(CBK.tracker.event({
          type: 'impression',
          productId: item.productId
        }));
      }
    });
    CBK.tracker.send(events);
  } });
</script>
<script src='https://cubki.jp/shopping_tracker.js' defer async></script>

view_stockイベント

<script>
  window.CBK = Object.assign({}, window.CBK, { init: function(CBK) {
    // Trackerの初期化
    var assistantId = 7;
    var namespaces = ['user-tracking', 'demand-forecast'];
    CBK.tracker.init(assistantId, namespaces, { userId: window.userId });

    // イベント送信
    var target = document.getElementById('some-id');
    var productId = target.getAttribute('some-product-id');
    var price = parseInt(target.getAttribute('price'));
    if (price <= 0) { price = null; }
    var source = 'mail_magazine';
    var campaigns = ['mail_magazine_coupon', 'vip_user_discount'];
    var imageUrls = Array.prototype.slice.call(document.querySelectorAll('some-image-class'));
    var variation = 'mobile';
    var eventAttrs = {
      type: 'view_stock', productId: productId, price: price,
      source: source, campaigns: campaigns, imageUrls: imageUrls,
      variation: variation,
    };
    CBK.tracker.scope('user-tracking').send([CBK.tracker.event(eventAttrs)]);
  } });
</script>
<script src='https://cubki.jp/shopping_tracker.js' defer async></script>

add_to_cartイベント

// `view_stock`送信後 (初期化完了後)、同一ページ内で「カートに入れる」のようなボタンが押された場合を想定
<script>
!function() {
  var target = document.getElementById('some-id');
  var productId = target.getAttribute('some-product-id');
  var price = parseInt(target.getAttribute('price'));
  if (price <= 0) { price = null; }
  var source = 'mail_magazine';
  var campaigns = ['mail_magazine_coupon'];
  var imageUrls = Array.prototype.slice.call(document.querySelectorAll('some-image-class'));
  var variation = 'pc';
  var eventAttrs = {
    type: 'add_to_cart', productId: productId, price: price,
    source: source, campaigns: campaigns, imageUrls: imageUrls,
    variation: variation,
  };

  CBK.tracker.send([CBK.tracker.event(eventAttrs)]);
}()
</script>

orderイベント

<script>
window.CBK = Object.assign({}, window.CBK, { init: function(CBK) {
  var assistantId = 7;
  var namespaces = ['media-plugin', 'demand-forecast'];
  CBK.tracker.init(assistantId, namespaces, { userId: window.userId });

  if (!orderInfo) { return; }
  var events = [];
  orderInfo.items.forEach(function(item) {
    for (var i = 0; i < item.length; i++) {
      events.push(CBK.tracker.event({
        type: 'order',
        orderId: orderInfo.orderId + '-' + (items.length + 1),
        orderGroupId: orderInfo.orderId,
        productId: item.productId,
        productGroupId: item.productId.slice(0, 6),
        price: parseInt(item.price)
      }));
    }
  });
  CBK.tracker.send(events);
}});
</script>
<script src='https://cubki.jp/shopping_tracker.js' defer async></script>