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 asHeader, select pages where script will be addedOrder confirmation, selectAnalyticsas the script category, and set the script type toScript.Follow the instructions below to add the order tracking script and replace the
ACCESS_TOKENplaceholder 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>
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
Bypass Cookie Acceptance Banner
In BigCommerce, when using the Script Manager, visitors to your website need to click to "Accept Cookies" in order for any of the scripts to run that you've added to the script manager.
In some cases, you many want certain tracking systems to bypass this for more accurate referral tracking. In order to do this for the Roster scripts you'll need to inject our scripts directly onto the web pages. To do this, follow these instructions...
Remove our scripts from the Script Manager.
Edit the code within your BC theme directly by adding our top level tracking script within the site header (base.html file) and our order tracking script on the order confirmation page (order-confirmation.html).
