*Note: When following these steps be sure to begin by referencing the instructions outlined in the main article.
Step 1. Add the Click Tracking Script
Ensure you have admin access permissions within your Wix account
In your admin area, go to Settings > Custom Code and click Add Custom Code.
Type in the name of your script "Roster Tracking Script", then in the Add Code To Pages select "All Pages" and in the drop-down select "Load code once", then below the "Place Code in:" select "Head", In the Code Type tab select "Analytics"
Follow the instructions in Step 2 in the main article to embed the tracking script. You will copy/paste the code snippet into the text area in this custom code script.
Finally, replace the ACCESS_TOKEN with your token (generated from Step 1 in the main article) and save the new custom script.
Step 2. Integrate Order Tracking
First create a secret to store the access token:
From your Wix dashboard go to Developer Tools at the bottom of the left nav bar and select Secrets Manager (see: Wix Secrets Manager)
Once in the Secrets Manager select Store Secret in the top corner. Give it the name "RosterApiKey"
In Roster, go to the Integrations page in settings, then copy your Public Access Token.
Navigate back to the Secrets Manager in Wix and paste your Public Access Token in the Value input field and click Save.
Next, 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.
Here is the code for the Thank You Page:
Note: 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);
});
});Next, 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);
}
});Next, 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:
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 Wix 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