REFERRALS
Pixel tracking installation
Wix 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 wix 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 wix account log into your wix admin account navigate to settings > custom code click add custom code and enter the following values script name roster link tracking script add code to pages all pages place code in head code type analytics 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 snippet into the custom code text area 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 ) in wix, create a shared secret from your wix dashboard go to developer tools at the bottom of the left nav bar and select secrets manager once in the secrets manager select store secret in the top corner give it the name rosterapikey paste in the roster public access token you created in step 1 add the tracking script to the thank you page from the home tab in wix click on edit site in the top right corner once you're inside the edit mode ensure that dev mode is turned on by clicking dev mode in the top nav bar and clicking turn on dev mode in the left nav bar find the shop folder then click into the thank you page copy/paste the script below into thank you page the element with the id #mythankyoupage is the default name for the entire page so that should be left as is unless it has been renamed in your store // velo api reference https //www wix com/velo/reference/api overview/introduction import {captureorder} from 'backend/roster jsw' import {local} from 'wix storage'; $w\ onready(function () { $w('#mythankyoupage') getorder() then((order) => { const orderid = order id; const ordernumber = order number tostring(); const orderdate = order datecreated; const discountcodes = \[order discount appliedcoupon code]; const currency = order currency; const subtotalprice = order totals subtotal tostring(); const totalprice = order totals total tostring(); const customerid = order buyerinfo id; const firstname = order billinginfo firstname; const lastname = order billinginfo lastname; const email = order billinginfo email; const referalid = local getitem("wreferrerid"); const payload = json stringify({ "externalorderid" orderid, "externalordernumber" ordernumber, "orderdate" orderdate, // format yyyy mm ddt00 00 00 "customer" { "externalcustomerid" customerid, "firstname" firstname, "lastname" lastname, "emailaddress" email }, "referrallinkid" referalid, "discountcodes" discountcodes, "currency" currency, "subtotalprice" subtotalprice, "totalprice" totalprice }); return captureorder(payload); }) then((captureresponse) => {console log(captureresponse)}) catch((error) => { console error(error); }); }); update the masterpage js file to ensure the referrerid is included in the order submission payload, add the following code to masterpage js // the code in this file will load on every page of your site import {local} from 'wix storage'; import wixlocation from 'wix location'; $w\ onready(function () { const referrerid = wixlocation query rstr; if(referrerid) { local setitem("wreferrerid", referrerid); } }); create a backend web module click into public & backend on the left side of the screen hover over backend and click the + that appears then click new web module and in the input field type roster jsw copy the code below and paste it in the roster jsw file import {getsecret} from 'wix secrets backend'; import { fetch } from 'wix fetch'; export async function captureorder(payload) { return getsecret("rosterapikey") then((secret) => { const requesturl = 'https //api getroster com/v2/orders/capture?access token=' + secret; let myheaders = { 'content type' 'application/json' } let requestoptions = { 'method' 'post', 'headers' myheaders, 'body' payload }; return fetch(requesturl, requestoptions); }) then((httpresponse) => { if (httpresponse ok) { return httpresponse json(); } else { return httpresponse json() then((httpresponsebody) => {return promise reject(httpresponsebody)}) } }) catch((err) => {return promise reject(err)}); } when you are finished the result should look like this 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