REFERRALS
Pixel tracking installation
BigCommerce tracking pixel instructions
9 min
when following these steps, some brands' developers have found it helpful to first review the docid\ k bu jeo2sm5 2g7lpo9g and then comparing with the bigcommerce specific instructions in this guide this guide will walk you through the steps to install roster's two tracking pixels, both of which are required to enable roster's sales attribution features, such as link tracking and referral commissions google tag manager we strongly discourage installing roster's tracking pixels through google tag manager (gtm) more and more browsers and extensions block gtm from loading, thereby blocking roster's tracking pixels from working we recommend installing roster's tracking pixels directly in your e commerce platform or website's global theme/template step 1 get a public access api token each of the two tracking pixels require a public access token in order to securely send tracking data from a customer's browser to your roster account you can use the same public access token for both tracking pixels log into your roster account go to the api integration page by clicking on your brand's name in the left hand navigation, then integrations > api integration copy the newest public access token if one exists, or click new access token to create a new one never use private access tokens with roster's tracking pixels public access tokens are safe to use in a browser environment, but private access tokens are only intended for server side usage as they allow full access to all roster api endpoints step 2 install the link tracking pixel roster's link tracking pixel tracks link clicks from ambassadors' referral links and stores ambassadors' referral link ids in the browser to track subsequent purchases ensure the person performing the following steps has admin access to your bigcommerce account log into your bigcommerce account navigate to storefront > script manager click create a script and enter the following values script name roster link tracking script location header pages all pages script category analytics script type script https //support bigcommerce com/s/article/using script manager learn more about the bigcommerce script manager copy the following javascript tag to your clipboard \<! roster > \<script async type="application/javascript" src="https //sa getroster com/sa js?token=access token">\</script> paste the javascript tag into the textarea of the new script replace access token in the javascript tag with the public access token from step 1 above save the changes you made to the script step 3 install the order tracking pixel roster's order tracking pixel is an order aware javascript pixel that needs to be installed on the order confirmation page (the page that loads immediately after a customer completes a purchase ) create a new script in script manager like you did in step 2 above script name roster order tracking script location header pages order confirmation script category analytics script type script copy the following javascript tag to your clipboard see https //developer bigcommerce com/api reference/f40f1f75f3e00 get order in the bigcommerce api reference for information on the order data points referenced in the script below \<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> paste the javascript tag into the textarea of the new script replace access token in the javascript tag with the public access token from step 1 above save the changes you made to the script step 4 verify the installation process it's imperative that you test the link tracking and order tracking upon completing the above steps see docid\ hszdrydoq2cmtkv8cxbwp for a video walkthrough and detailed steps need help? if you have any questions about adding hidden products to product rewards, contact us at mailto\ support\@getroster com