Skip to main content
All CollectionsReferrals & TrackingReferral Tracking Setup
BigCommerce Referral Tracking Script Installation Instructions
BigCommerce Referral Tracking Script Installation Instructions
Libby Serra avatar
Written by Libby Serra
Updated over a week ago

When following these steps be sure to begin by referencing the instructions outlined in this article.


Step 1. Add the Click Tracking Script

  1. Ensure you have admin access permissions within your BigCommerce account

  2. In your admin area, select Storefront and then Script Manager.

  3. If you already have other scripts, please click on "Create a Script". If you don’t have any scripts yet, you will automatically land on the Create Script screen.

  4. Type in the name of your script "Roster Tracking Script", select location on the page as "Header", select pages where script will be added "All pages", select "Analytics" as the script category, and set the script type to "Script".

  5. Follow the instructions on Step 2 in the main article to embed the tracking script. You will copy/paste the code snippet into the text area in this new script you're adding to the store front and replace the ACCESS_TOKEN with your token.

  6. Don't forget to save your changes!

Review this article learn more about the BigCommerce Script Manager.


Step 2. Integrate Order Tracking

  1. Create another script in the Script Manager

  2. Type in the name of your script Roster Order Submission, select location on the page as Header, select pages where script will be added Order confirmation, select Analytics as the script category, and set the script type to Script.

  3. Follow the instructions below to add the order tracking script and replace the ACCESS_TOKEN placeholder with your token.

  4. Don't forget to save your changes!

Copy/paste this script into the script contents in your script manager. Here's an example of the Roster script tag with BigCommerce order object variables set in the proper places. Also see the BigCommerce API reference for the storefront orders for additional information on what order data points are available to add to the integration.

<script async type="text/javascript">
// Get the order data from the BC API
async function getOrderData() {
const orderURL = "/api/storefront/orders/" + {{checkout.order.id}};
const response = await fetch(orderURL);
const data = await response.json();
return data;
}

function submitOrder() {
if (sAttribution) {
getOrderData().then((orderData) => {
let orderCoupons = [];

if (orderData.coupons && orderData.coupons.length > 0) {
orderCoupons = orderData.coupons.map((coupon) => coupon.code);
}

// Roster uses subtotalPrice when calculating referral rewards. Most brands subtract discounts from this amount so that they pay commissions on the discounted amount.
let subtotalPrice = orderData.baseAmount;
if (orderData.discountAmount > 0) {
subtotalPrice = subtotalPrice - orderData.discountAmount;
}

// Push orderData to API
sAttribution.set({
orderId: orderData.orderId.toString(),
orderNumber: orderData.orderId.toString(),
discountCodes: orderCoupons,
currency: orderData.currency.code,
subtotalPrice: subtotalPrice,
totalPrice: orderData.orderAmount,
firstName: orderData.billingAddress.firstName,
lastName: orderData.billingAddress.lastName,
email: orderData.billingAddress.email,
});

sAttribution.emitOrder();
});
}
}

var saScript = document.createElement("script");
saScript.addEventListener("load", submitOrder);
saScript.src = "https://sa.getroster.com/sa.js?token=ACCESS_TOKEN";

var observer = new MutationObserver(function() {
if (document.body) {
document.body.appendChild(saScript);
observer.disconnect();
}
});

observer.observe(document.documentElement, {childList: true});
</script>


When you are finished the result should look like this:


Testing

Reference Step 4 in the main article to make sure you have everything setup.


Congrats, You're Done!!

You're all set up and your BigCommerce store is now able to track referral links and discount codes within Roster.


Troubleshooting Tips

Did this answer your question?