シングルページアプリ

ユーザー追跡

シングルページアプリでのユーザー行動の追跡は、一般的なユーザー追跡と同様の方法で行うことができます。

Fanplayrトラッキングスクリプトをロードするだけです。

https://cdn.fanplayr.com/client/production/loader.js

そして、「fanplayr_ready」という関数を提供することで、Fanplayrがロードされるのを待ちます。

window.fanplayr_ready = function (fanplayr, platform) {
  // ...
};

追跡を直接呼び出す前に、以下のようにします。

window.fanplayr.reinitialize(DATA);

以下に例を示します。これはご自身のサイトで使用できます。トラッキング呼び出しは、どのように機能するかを示す単なる例です。最初の2つの呼び出しはFanplayrがロードされるのを待ち、3番目の呼び出しはすぐに実行されます（Fanplayrが2秒以内にロードされる可能性が高いため）。

<script>
  // このコードをサイトで使用して、Fanplayrがロードされる前に呼び出しをキャッシュできます。
  // 「window.fanplayr_ready」はFanplayr JSをロードする前に定義する必要があることに注意してください。
  (function () {
    var trackingCache = [];
    var isReady = false;

    // これはFanplayrプラットフォームの準備ができたときに呼び出されます。
    window.fanplayr_ready = function (fanplayr, platform) {
      isReady = true;
      var i;
      // キャッシュされたすべてのトラッキング呼び出しを追跡します。
      for (i = 0; i < trackingCache.length; i++) {
        fanplayr.reinitialize(trackingCache[i]);
      }
      trackingCache = [];
    };

    window.fanplayr_track = function (data) {
      if (isReady) {
        // 追跡
        window.fanplayr.reinitialize(data);
      } else {
        // このトラッキング呼び出しをキャッシュします。
        trackingCache.push(data);
      }
    };
  })();
</script>

<script>
  // このスクリプトブロックは、トラッキングがどのように機能するかをデモするためのものです。
  // データ自体は呼び出しに対して有効ですが、何も追跡しないことに注意してください。
  window.fanplayr_track({
    data: {}
  });
  window.fanplayr_track({
    data: {}
  });
  setTimeout(function () {
    window.fanplayr_track({
      data: {}
    });
  }, 2000);
</script>

<!-- これは、「window.fanplayr_ready」関数を設定した後に含める必要があるスクリプトです。 -->
<script src="https://cdn.fanplayr.com/client/production/loader.js"></script>

データは以下の形式であり、通常のページトラッキングで設定されるものと同じです。

{
    version: 3,
    accountKey: '',
    applyToCartUrl: '',
    sessionOfferUrl: '',
    data: {
      lineItemCount: 0,
      numItems: 0,
      subTotal: 0.00,
      total: 0.00,
      discount: 0.00,
      discountCode: '',
      pageType: '',
      categoryId: '',
      categoryName: '',
      productId: '',
      productName: '',
      productSku: '',
      productPrice: 0.00,
      productUrl: '',
      productImage: '',
      currency: '',
      products : [
        {
          id: '',
          sku: '',
          price: 0.00,
          qty: 1,
          name: ''
        }
      ],
      cartAction: 'override'
    },
    custom_data: {
      // ...
    }
  }

注文追跡

注文追跡は、ユーザー追跡と同じスクリプトがロードされていることに依存します。シングルページアプリでは、これはすでにロードされている可能性が高いです。

注文追跡のデータを設定するには、一般的な注文追跡と同じデータを含めて、window.fp_sales_order変数を設定するだけで済みます。

window.fp_sales_orders = {
  version: 3,
  accountKey: '',
  storeDomain: '',
  data: {
    orderId: '',
    orderNumber: '',
    subTotal: 0.0,
    total: 0.0,
    discount: 0.0,
    discountCode: '',
    shipping: 0.0,
    tax: 0.0,
    currency: '',
    orderEmail: '',
    firstName: '',
    lastName: '',
    customerEmail: '',
    customerId: '',
    products: [
      {
        id: '',
        sku: '',
        price: 0.0,
        qty: 1,
        name: ''
      }
    ],
    cartAction: 'override'
  }
};

その後、次のように呼び出すことで注文を追跡できます。

// fp_sales_orderの詳細を使用して注文を追跡
window.fanplayr.platform.trackOrder();
// 同じセッションで別の注文を作成する場合に備えて、現在の状態をクリア
window.fanplayr.platform.state.clear();