*Note: When following these steps be sure to begin by referencing the instructions outlined in this article.
Step 1. Add the Click Tracking Script
Ensure you have admin access permissions within your BigCommerce account
In your admin area, select Storefront and then Script Manager.
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.
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".
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.
Don't forget to save your changes!
Review this article learn more about the BigCommerce Script Manager.
Step 2. Integrate Order Tracking
Create another script in the Script Manager
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".
Follow the instructions below to add the order tracking script and replace the ACCESS_TOKEN placeholder with your token.
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>
*Set your access token: be sure to replace the ACCESS_TOKEN placeholder with the public access token created in Step 1.
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
Some tests are failing? Go here for help with troubleshooting