BigCommerce

Supported Tracking Types & Features

Method and feature support notes are based on the custom setup in BigCommerce. If a feature is not included on the setup in this guide, you may require further custom setup for the tracking on your BigCommerce shop.

Installation and Configuration

We currently do not offer an Awin plugin for BigCommerce, but this guide can be used to set up client-side tracking on your BigCommerce store. If preferred, an alternative way of integrating the client-side tracking can be used instead.

To integrate with BigCommerce you will be required to complete the below steps on your BigCommerce website. Once integrated follow the final steps to run a test transition to ensure the client-side tracking has been set up successfully. After this, ensure that the mandatory server-side tracking is also completed.

Adding the MasterTag onto all pages

Step One: Go to Storefront > Script Manager. If you cannot find the Script Manager section under Storefront, then go to Channel Manager and click on the "Scripts" link in "Quick Links" section.

Step Two: Create a Script, and configure it as shown in the screenshot:

Step Three: Set the script contents to the code below:

<script defer="defer" src="https://www.dwin1.com/XXXXX.js"" type="text/javascript"></script>

Ensure the XXXXX has been changed to reflect your Advertiser ID.  If you’re unsure, you should have received this ID from your assigned integrator or you can find it in the Awin UI > Account > Overview. Make sure to save your changes.

Adding the Conversion tag to the confirmation page

Step One: Go to Advanced Settings > Web Analytics > Affiliate Conversion Tracking

Step Two: Paste the code below into the box:

<script type="text/javascript">

var price = %%ORDER_SUBTOTAL%%;

var AWIN = AWIN || {};

AWIN.Tracking = AWIN.Tracking || {};

AWIN.Tracking.Sale = {};
AWIN.Tracking.Sale.amount = price;
AWIN.Tracking.Sale.channel = "aw";
AWIN.Tracking.Sale.currency = "GBP";
AWIN.Tracking.Sale.orderRef = %%ORDER_ID%%;
AWIN.Tracking.Sale.parts = "DEFAULT:" + price;

 
var image = document.createElement("img");
image.src = "https://www.awin1.com/sread.img?tt=ns&tv=2&merchant=XXXXX&amount="" + price + "&ch=aw&cr=GBP&parts=DEFAULT:" + price + "&ref=" +"%%ORDER_ID%%";
document.getElementsByTagName("body")[0].appendChild(image);
</script>

Make sure to replace XXXXX with your Advertiser ID again. If your store currency is not GBP, replace this with the relevant currency, e.g. EUR (the currency appears twice in this code). Save your changes.

This setup will trigger the tracking tags on order confirmation pages and the tracking tags will include all client-side aspects of tracking. This includes our client-side Conversion Tag, Fallback Image Pixel, and the Awin Mastertag.

Stuck? Check out our BigCommerce Integration video tutorial:

Deduplication setup

Outlined below are three steps to a deduplication setup, implementing the cookie creation script, implementing the function to return the cookie value and finally testing the setup.

Implement deduplication cookie creation script

The script that creates the deduplication cookie can be implemented via the Custom Script, where we have added the Awin Mastertag in the installation guide above (Storefront > Script Manager).

Step One: Go to Storefront – Script Manager, click “Create a Script”, name it and set:
a. Location on page: Footer
b. Select pages where script will be added: All pages
c. Script type: Script
d. Script contents: This is where the script that creates the cookie will go.

Click on “Save“.

After clicking “Save“ the changes will be immediately live on your website, so make sure to check over the instructions before submitting the changes.

Implement function to return the cookie value

This function should be implemented in the Affiliate Conversion Tracking as part of the same script where the Conversion Tag is declared.

Step One: Go to Advanced Settings – Web Analytics, choose "Affiliate Conversion Tracking"

Step Two: Declare your function inside the script, just before the AWIN object is declared. Below is a basic example function that can be used, but please refer to the Deduplication guide if unsure about this.  

function getCookie() {
	const value = document.cookie;
  const parts = value.split(name);
  if (parts.length === 2) {
  	return parts.pop().split(';').shift().replace();
  } else {
  	return 'organic';
  }
};

Step Three: Pass the return value of the function to AWIN.Tracking.Sale.channel:

AWIN.Tracking.Sale.channel = getCookie('source');

Click “Save“, and the changes will be put live.

Testing the setup

Testing the added function for your deduplication setup is important, every deduplication scenario should be covered when testing, to make sure that there are no errors caused by your implementation. If unsure, please refer to the Deduplication guide or get in touch with your Awin technical point of contact.

Product Level Tracking

In BigCommerce Product Level Tracking can be implemented via the Fallback Image Pixel. To get the product data for the Product Level Tracking, an asynchronous call to an API using the order reference number needs to be made, and get the data from the response. Because the API call is async, this cannot work with the MasterTag, but the Fallback Image Pixel is used instead.

Fetch Product Data Using the Storefront API

After you’ve implemented the Conversion Tag as per the steps outlined above, in the same container (Affiliate Conversion Tracking), create a separate script below the Conversion Tag script. In this script add the code below, and make sure you customize the Image Pixel by updating the merchant id, and all variables. Click “Save“ and you are ready to test.

<script type="text/javascript">
//call storefront API to get product data, returns a Promise
async function logJSONData() {
	var response = await fetch('/api/storefront/order/'+orderId, { credentials: 'include' });
	var jsonData = await response.json();
    return jsonData;
}

var orderData = logJSONData();

orderData.then(function(response){
    //compile the PLT string when the Promise is fulfiled
	var products = response.lineItems.physicalItems;
	console.log(products);
	var sProductData = "";
	for (var i=0; i<products.length; i++){

		sProductData += '&bd['+i+']='
		+ 'AW:P|18311|'
		+ orderId+'|'
		+ products[i].id+'|'
		+ products[i].name+'|'
		+ products[i].listPrice+'|'
		+ products[i].quantity+'|'
		+ products[i].sku+'|'
		+ 'DEFAULT||';

		console.log(sProductData);
}

//fire Image Pixel request with PLT data
var image = document.createElement("img");
image.src = "https://www.awin1.com/sread.img?tt=ns&tv=2&merchant=18311&amount=" + price +"&ch=aw&cr=GBP&parts=DEFAULT:" + price + "&testmode=0&vc=&ref=" +"%%ORDER_ID%%"+sProductData;
document.getElementsByTagName("body")[0].appendChild(image);

//END
});
</script>

After clicking “Save“ the changes will be immediately live on your website, so make sure to check over the code thoroughly before submitting the changes.

The solution in the code example above is calling the Storefront API using the fetch JS function. The fetch function returns a Promise, and we are using its then method to get the data after the Promise is fulfilled, and compile the Product Level Tracking string and fire the Image Pixel. Because the fetch method is async, we need to make sure that we fire the Image Pixel only after the Promise is fulfilled, therefore, it needs to be done in the fetch function.

Server-to-server tracking

You’ve completed the client-side integration of Awin tracking! From here, we recommend that you test your integration and continue on with integrating the mandatory server-to-server portion of our tracking.

server-side GTM

server-side tracking via Conversion API

Testing your Tracking

Please see our article on testing your Integration for further instruction.