In this article, we will cover:
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 TINT Web Galleries on your website.
How to implement tracking eCommerce metrics with TINT
Implementing TINT eCommerce is very similar to implementing Google Analytics on a website. To get started, add the following TINT 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:
- Go to team settings on your TINT account
- Click on 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 eCommerce Insights page on your TINT account to see how that looks and more information, click here.
Comments
Please sign in to leave a comment.