Single Page Apps

User Tracking

Tracking user behavior on single page apps can be done in a similar way to the general way of user tracking.

You simple have to load the Fanplayr tracking script:

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

And then wait for Fanplayr to load by supplying a function "fanplayr_ready":

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

Before directly calling the tracking as follows:

window.fanplayr.reinitialize(DATA);

An example is below. You can use this on your site. The tracking calls are there simply as an example of how it would work. The first two calls would wait for Fanplayr to load, and the third would be called right away (given that Fanplayr is likely to have loaded within 2 seconds).

<script>
  // You can use this code on your site to cache calls to Fanplayr before it has loaded.
  // Note that "window.fanplayr_ready" should be defined before loading the Fanplayr JS
  (function(){

    var trackingCache = [];
    var isReady = false;

    // this is called when the Fanplayr platform is ready
    window.fanplayr_ready = function ( fanplayr, platform ) {
      isReady = true;
      var i;
      // track any cached tracking calls
      for ( i = 0; i < trackingCache.length; i++ ) {
        fanplayr.reinitialize(trackingCache[i]);
      }
      trackingCache = [];
    };

    window.fanplayr_track = function( data ) {
      if ( isReady ) {
        // track
        window.fanplayr.reinitialize(data);
      } else {
        // cache this tracking call
        trackingCache.push(data);
      }
    };
  }());
</script>

<script>
  // This script block is here to demo how tracking would work.
  // Note the data itself is valid for the call but will not track anything.
  window.fanplayr_track({
    data: {}
  });
  window.fanplayr_track({
    data: {}
  });
  setTimeout(function(){
    window.fanplayr_track({
      data: {}
    });
  }, 2000);
</script>

<!-- This is the script that you need to include AFTER setting the "window.fanplayr_ready" function -->
<script src="https://cdn.fanplayr.com/client/production/loader.js"></script>

The data is of the following format, and is the same as is set in normal user tracking.

{
    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: {
      // ...
    }
  }

Order Tracking

Order tracking relies on the same script to be loaded as in user tracking. In a single page app it is likely that this will already be loaded.

To set data for order tracking you need only to set the "window.fp_sales_order" variable, including the same data as in general order tracking.

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

You can then track the order by calling:

// track the order using details in fp_sales_order
window.fanplayr.platform.trackOrder();
// clears the current state, in case we make another order in the same session
window.fanplayr.platform.state.clear()