Creatable conversion pixel - setting up sales tracking for your Creatable campaigns

Article author
Matt Hanan
  • Updated

When running a Creatable campaign you will want to provide your Creators with trackable product links that they can include on their social post(s) to bring customers in to your website.

Screen_Shot_2022-08-17_at_2.26.56_PM.png

Getting set up for this is easy! You will simply need install the Creatable conversion tracking pixel on your ecommerce site's order confirmation page as described below:

NOTE: If you are using Big Commerce as your ecommerce platform, please skip to the Big Commerce section at the bottom of this article.

Requirements

The conversion pixel is installed on the final checkout page after the transaction is complete. Below is an example of a typical checkout process, with the final page that fires the Creatable Conversion Pixel.

Screen_Shot_2022-09-08_at_9.59.26_AM.png

The Creatable conversion tracking pixel is implemented as a stand-alone pixel or through tag management systems. Creatable has created integrations for Tealium, TagMan (Ensighten), and Google Tag Manager.

The conversion pixel must be configured to send Creatable the following properties:

  • Order ID
  • SKU
  • Quantity
  • Price
  • GTIN or UPC

Shopify Helper Script

In order to receive proper conversion data from Shopify, we need to add a helper script to the checkout process. If you are not using Shopify, you can skip this step.

This script leverages liquid tags to access the cart items and order ID so that it can be passed to the Creatable Conversion Pixel.

  1. From your Shopify admin console, click "Settings" in the lower left.
  2. Click "Checkout".
  3. Scroll down to the "Order processing" section.
  4. In the "Additional scripts" section, add the following javascript:
<!-- START TVPAGE DATA CAPTURE -->
<script>
var tC = [];var tCoid = "{{ order_number }}";
{% for line_item in line_items %}
tC.push({ sku: "{{ line_item.sku }}", price: "{{ line_item.final_price | money_without_currency }}", quantity: "{{ line_item.quantity }}" });
{% endfor %}
</script>
<!-- END TVPAGE DATA CAPTURE -->

Example

Currently, there are two supported functions. A mandatory config function and a "track" function. The track function requires the products that were purchased as well as the “ORDER_ID” (the unique ID from the eCommerce platform that was assigned to the order).

Below is an example of the final output that you would see on your “Checkout” or “Thank You” page.

<script type="text/javascript">
window._tvpa = window._tvpa || [];
window._tvpa.push(['config', {
    li: "YYY" // Account ID
  }]);

window._tvpa.push(['track', 'products', {
"tid": "ORDER-ID",
"orders": [
  { "sku":"bb8100", "price":"14.99", "quantity": "4"},
  { "sku":"8525PDA", "price":"59.99", "quantity": "1"},
  { "sku":"MM-A900M", "price":"5.00", "quantity": "3"}
]
}]);

  (function() {
    var tvpa = document.createElement('script'); tvpa.type = 'text/javascript'; tvpa.async = true;
    tvpa.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://a.tvpage.com/tvpa.min.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tvpa, s);
  })();
</script>

The conversion script is broken down into three separate parts:

1. The first part configures the analytics tracker to record data for your account. The value “li” will be provided by your Client Success representative.

 window._tvpa = window._tvpa || [];
window._tvpa.push(['config', {
    li: "YYY" // Account ID
  }]);

3. The second part tracks the products that were purchased, quantity & price. This JSON data object needs to be created based on the items that were purchased in the shopping cart.

  window._tvpa.push(['track', 'products', {
     "tid": "ORDER-ID",
     "orders": [
       { "sku":"bb8100", "price":"14.99", "quantity": "4"},
       { "sku":"8525PDA", "price":"59.99", "quantity": "1"},
       { "sku":"MM-A900M", "price":"5.00", "quantity": "3"}
     ]
    }
]);

3. This third part is the library that loads asynchronously and communicates with Creatable.

  (function() {
    var tvpa = document.createElement('script'); tvpa.type = 'text/javascript'; tvpa.async = true;
    tvpa.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://a.tvpage.com/tvpa.min.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(tvpa, s);
  })();

 

Testing & Verifying the Conversion Pixel

When an order is placed, the Creatable conversion pixel will fire off the product data from the order to our analytics for video conversion and video revenue reporting. When the pixel fires, you can see the relevant data being passed to our system.

tvpage_conversion.png

Validating the conversion data requires verifying that several variables are present. To see this data, before you place the test order, open up Chrome's Dev Tools and click on the "Network" tab. You can use the filter box to search all the network requests for "tvpa" this will return our library as well as any pixels that have been fired. When you look at the data you are looking for a pixel request like the one in the above screenshot. Note that "rt:pc" is the event we want to look at when validating the conversion pixel.

  • li: 1234567 (This is the account id that receives the conversion data)
  • rt: pc (This is the event code for a product conversion)
  • tid: XXX (This is the order id # from the order placed, it can be used for further offline analysis)
  • pr[]: AA,BB,CC (This represents 1 row of product data from the order. It is comma separated and contains the SKU, Quantity and Price)

Troubleshooting

When registering conversion, the browser performs a request to the Creatable Analytics Service. A request looks something like this:

https://api.tvpage.com/v1/__tvpa.gif?[additional request vars]

The service returns a 1×1 pixel gif along with an http code which verifies if the service is working properly. The codes are interpreted as follows:

Code     Message
200       Valid Request
201        Invalid Request Type
202       Valid Request
203       Not data registered
205       Invalid Data. Nothing data was registered 

If the service returns error codes other than 200 or 202, please review the data being passed to the tracker to ensure the formatting is correct. If the problem persists, contact us at support@creatable.co.

Big Commerce

If you are using Big Commerce as your ecommerce platform, the following snippet can be added directly. Simply add your Creatable account number between the quotes after "li":

<script>
(function() {
var ga = document.createElement("script");
ga.type = "text/javascript";
ga.async = true;
ga.src = "//a.tvpage.com/tvpa.min.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();

window._tvpa = window._tvpa || [];
    var analyticsConfig = {
      "li": "",
        "logUrl": "//api.tvpage.com/api/__tvpa.gif"
    };
window._tvpa.push(["config", analyticsConfig]);
fetch("/api/storefront/orders/%%ORDER_ID%%").then(res=>res.json()).then(order=>{
    const lineItems = order.lineItems;
    console.log("lineItems",lineItems);
    const items = [...lineItems.digitalItems, ...lineItems.giftCertificates, ...lineItems.physicalItems].map(product=>{
        return {
            price: product.salePrice,
            sku: product.sku,
            quantity: product.quantity
        }
    });
  window._tvpa.push(["track", "products", {
        "tid": %%ORDER_ID%%,
        "orders": items
        }]);    
});
</script>