Tracking - General [3.0]

In this section you will learn how to add the tracking component for the Cylindo 360 viewer.

Examples

The following examples can be used to get a quick start if you are fairly confident with the 360 Viewer

• Add to cart on existing viewer
• Simple add to cart
• Detailed add to cart
• Checkout

Add to cart tracking

Implementing add to cart tracking is very easy. Since the 360 HD Viewer is already keeping track of the selected configuration then all you need to do is invoke the addToCart function in the viewer with price, currency and quantity in order for it to track the event.

Checkout tracking

The checkout tracking should be implemented as part of the checkout confirmation process on your online retail site. Although it is included in the viewer.min.js then we recommend you use the lightweight tracking component checkout.tracking.min.js. While checkout tracking is most commonly used in conjunction with online purchases then even if you do not have online checkout capabilities you can stil implement checkout tracking for a custom site event such as when the user downloads and image, pdf or click an email address or send a message through the site. It is however required to associate a product with a checkout. If you do not have pricing information on your site then we recommend to assign an abitrary value of 1 as the price of the product in the checkout data.

Checkout tracking placement

The checkout tracking should be implemented on your checkout confirmation page to ensure the most accurate data. This is because if something fails during the checkout process e.g. payment or similar then you will get faulty data if implemented before the confirmation page.

Tracking Script

In order to implement tracking you can either use the viewer.min.js script that is already on the product page which is recommended for adding the “add to cart” tracking so you avoid an extra javascript file (please see the addToCart function), but for the checkout tracking on your checkout confirmation page we recommend you use our lightweight tracking component by itself. This can be done by including the script checkout.tracking.min.jswhich is located in the same folder as the viewer.min.js. The checkout component is however also included in the viewer.min.js script if you want to reuse this.

<script>
	src="//clients.cylindo.com/viewer/3.x/latest/checkout.tracking.min.js">
</script>

Instantiating

Just like the Cylindo 360 HD Viewer object, it is required to instantiate the tracking component. When it has been instantiated it is ready to be called using the tracking API.

The checkout component can be instantiated by calling the create method on the cylindo.tracking.checkout module like the following.

var tracker = null;
if (cylindo) {
   cylindo.on('ready', function () {
      tracker = cylindo.tracking.checkout.create();
   });
}

Parameters

accountID

• Type: Integer
• The account id for the client (this is the same value you are using when constructing the Cylindo 360 HD Viewer).

Tracking functions

getItem( sku, quantity, price, retail_price, array_of_features )

• Type: string, integer, float, float, array of strings
• Create an item that can be used as a parameter in the checkout function. The difference between the price and the retail_price parameter is the retail price is not discounted while the price might be. The array_of_features parameter is an array of string using the same approach as in the initialization of the Cylindo 360 HD Viewer and setFeatures function.

checkout( array_of_items, total_price, currency )

• Type: array of objects, float, string
• Notify the tracking component of the items that was purchased. You can use the getItem function to generate the items like the following example:

• if (cylindo) {
     cylindo.on('ready', function () {
        var tracker = cylindo.tracking.checkout.create(4404);
        var items = [];
        items.push(tracker.getItem("DINING_CHAIR", 1, 99.88, 110, 
           ["Color", "White"]));
        items.push(tracker.getItem("DINING_CHAIR", 2, 88.70, 88.70, 
           ["Color", "Red"]));
        tracker.checkout(items, 277.28, "USD");
     });
  }

• The total price parameter should be the total price of the purchase and the currency parameter should be the currency which the prices are in. Although there is no restriction on the currency format then we highly recommend using the three letter ISO 4217 format e.g. USD, EUR etc.