Skip to content

Implementing Ecommerce Attribution on Client's Site HTML

Jump to bottom
HansMediaJel edited this page Jan 27, 2023 · 3 revisions

Ensure our Tracking Pixel is installed on your site’s tag:

Your tracking pixel may look something like this. This is a very important step as failure to add our tag on Your site’s headers will NOT instantiate our attribution SDK. Please note that this script should fire on all pages to ensure seamless attribution.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://tags.cnna.io/?appId={APP_ID_HERE}'> </script>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Tracking “Add to Carts”

Execute this javascript on an add to cart event in your website. The static values below are supposed to represent the variables that pertain to the context of data you would pass in programmatically from your site. You would swap out the static values with your own site’s cart properties during an add to cart event.

window.tracker('trackAddToCart', 
'000345',             // order ID - string
'blue tie',           // product name - string
'clothing',           // category - string 
3.49,                 // unit price - num
2,                    // quantity - num
'USD'                 // currency - string
);

Tracking “Remove from carts”

Execute this javascript on a remove from cart event. The static values below are supposed to represent the variables that pertain to the context of data you would pass in programmatically from your site. You would swap out the static values with your own site’s cart properties during a remove from cart event.

window.tracker('trackRemoveFromCart', 
'000345',             // order ID - string
'blue tie',           // product name - string
'clothing',           // category - string 
3.49,                 // unit price - num
2,                    // quantity - num
'USD'                 // currency - string
);

Tracking “Transactions & Transaction Items (Items in cart)”

Execute this javascript on a purchase/checkout event. When a checkout/purchase event occurs. You would likely have the transaction data as well as the transaction items data. On the addTrans method, you would pass in properties relevant to the order itself and on the addItem method, you would pass in properties relevant to the items that were included in the order.

You may notice that we have a trackTrans method below. This allows us to collect the data for the order & items within that order all at once.

// Transaction
window.tracker('addTrans',
    '1234',           // order ID - string
    'Acme Clothing',  // affiliation or store name - string
     11.99,           // total - num
     1.29,            // tax - num
     5,               // shipping - num
    'San Jose',       // city - string
    'California',     // state or province - string
    'USA',            // country - string
    'USD'             // currency - string
  );

// Transaction Items (items in checkout cart)
// It is assumed that the "items" variable represents
// an array of products that comprises the entire
// checkout

for(let i = 0; i < items.length; ++i) {
  window.tracker('addItem',
    '1234',           // order ID - string
    'DD44',           // SKU/code - string
    'T-Shirt',        // product name - string
    'Green Medium',   // category or variation - string
    11.99,            // unit price - num
    1,                // quantity - num
    'USD'             // currency - string
  );
}
window.tracker('trackTrans')

Frequently Asked Questions (FAQ):

Q: What if I am missing some variables for some methods? (I.E I don’t pass in city during a checkout event)

A: You may pass in default values. The default value for string types (text) is “N/A” and the default value for num types (numbers) is 0.00. Note however that some arguments are required which is listed in the table below:

Method Required arguments
trackAddtoCart ALL
trackRemoveFromCart ALL
addTrans Order Id, total
addItem Order Id, product name, unit price, quantity

Q: Does the type of data I pass in as arguments matter? (I.E. My order ID is an integer whereas the required data type is a string (text)

A: YES, the data types do matter. We have an enrichment process that checks the data that gets sent over to us. The enrichment process filters out “bad” data so to make sure the attribution does get through the enrichment process, it’d be best to observe the correct data types being passed in as arguments based on the above mentioned documentation.

There are javascript methods that can convert strings to integers and integers to strings

Clone this wiki locally