A guide on how to implement eCommerce Insights

In this article, we will cover:

• Overview
• How to implement tracking eCommerce metrics

Overview

Our eCommerce Insights is a powerful feature that allows you to track and analyze the behavior of your customers and how they interact with different Shoppable UGC.  This article will give you a guide on how to implement this on your Web Galleries on your website.

How to implement tracking eCommerce metrics

Implementing our eCommerce tracking is very similar to implementing Google Analytics on a website.  To get started, add the following eCommerce metrics collection script to your website: 

<scriptsrc='https://www.tintup.com/app/dist/tint.js'></script>

Then you would add the next section to initialize the client. Please note that this only needs to be implemented once for the page/view. 

client = new Tint.TintEcommerceMeasure(TEAMID);
// See below on how to get the team ID and this should be on every page

client.init()
// records page load, should be on every page

To find your team ID:

1. Go to team settings on your account
2. Click on the team profile if it doesn't take you there automatically

To track actual eCommerce checkout and add-to-cart events, add the following section:

client.addToCart([{ price: "1.0000", quantity: 1, sku: "213", currency: "USD" }], "optional_transaction_id"); 

//needs to be called when a user adds an item to their cart. It’s mean to track that add to cart event. Optional transaction id can be added. The price, quantity, SKU and currency are values added by the team implementing the code as this will vary from client to client. The above is only an example.

client.checkout([{ price: "1000.01", quantity: 1, sku: "213", currency: "USD" }], "optional_order_id") 

// is meant to track the checkout after the user has paid. The price, quantity, SKU and currency are values added by the team implementing the code as this will vary from client to client. The above is only an example.

If you would like to track non-eCommerce events such as form submissions or any other arbitrary CTA, you can use the checkout API to track that. We recommend the following API call to do this.

client.checkout([{ price: 0, quantity: 1, sku: "contact-us-form", currency: "USD" }])

Once this has been implemented, you will start to see the data in the eCommerce Insights page on your account to see how that looks, and for more information, click here.   The above has to be changed to suit your website, as elements may not be found or may differ.

If you have any questions on e-commerce Insights, please don't hesitate to contact Technical Support at support@trueloyal.com.