Setting up Referral Tracking Pixel (links and discount codes)

Shopify Store Owners: you don't need to complete these steps. The tracking pixel is automatically installed when you connect your store in Roster.

Overview

The Link Tracking Pixel is the mechanism by which Roster is able to track referral link clicks and referred orders on your store. In order for Roster to provide your brand and advocates with the most accurate sales attribution data, complete each of the following steps in this guide:

Step 1: Get Your Access Token
Step 2: Add the Link Tracking Pixel
Step 3: Integrate Order Tracking
Step 4: End to End Testing

See Additional Help Articles by eCommerce Platform

Shopify (The pixel is automatically installed when you connect your store in Roster. No action is required.)
WooCommerce
BigCommerce

Step 1. Get Your Public Access Token

Generate a "Public Access Token" to be included in your JavaScript code. Go to your brand settings to create a new token.

Step 2. Add The Link Tracking Pixel

To add the tracking pixel to your store you'll need to add the following JavaScript snippet on every page of your site so the Roster system can capture referred visits. Embed this just before </head> tag in your HTML. (this is typically done in the main site template so it's auto-magically applied to every page)

<!-- Roster Analytics -->
<script async type="application/javascript" src="https://sa.getroster.com/wooly-analytics.js?token=ACCESS_TOKEN"></script>

*Set your access token: be sure to replace the ACCESS_TOKEN placeholder with your public access token.

*Track across sub domains: does your eCommerce setup involve multiple sub domains? If so, you'll need to enable cookie tracking.

Step 3. Integrate Order Tracking

Send specific order data to us so we can capture the order data and, optionally, the new customer's information. Sending Roster the customer information is valuable in forming an attribution data graph of who referred who. Roster also links social listening and campaign participation data to customers along with other useful information that can all tie back to how the customer first joined your herd.

JavaScript Code on Order Confirmation Page

Add the following JavaScript code on your order confirmation page and replace the placeholders with variables/properties in your code. The minimum required parameters to capture an order is the order Id with a referral Id or discount code. The referral Id is sent automatically by the main tracking pixel so you don't have to worry about it in this script. All other fields are optional but recommended. The more you send us the more valuable your data is in the Roster CRM and analytics. It's important to note that if you do send the customer info (name and email) then the pixel will auto create new contact profiles in Roster for new customers who were referred. For more details see our API Documentation.

This first example is a preferred option by many developers. Be sure to replace the mocked data in this script with proper objects provided by your eCommerce platform.

<!-- Roster Order Submission: START -->
<script type="application/javascript">
function submitOrder() {
  if (WoolyAnalytics) {
    WoolyAnalytics.set({
      orderId: "123456",
      orderNumber: "56789ABC", // optional, used to capture a 3rd party order identifier
      orderDate: "8/5/2020",
      discountCodes: ["sale2020", "janedoe123"],
      currency: "USD",
      subtotalPrice: 17.00, // order total minus discounts, but before taxes and shipping
      totalPrice: 29.99, // order total minus discounts plus taxes and shipping
      firstName: "John",
      lastName: "Doe",
      email: "[email protected]",
      isNewCustomer: true // Optional. Can be excluded if not supported in your platform
    });
    WoolyAnalytics.emit();
  }
}

var saScript = document.createElement("script");
saScript.addEventListener("load", submitOrder);
saScript.src = "https://sa.getroster.com/wooly-analytics.js?token=ACCESS_TOKEN";
document.body.appendChild(saScript);
</script>
<!-- Roster Order Submission: END -->

*Set your Access Token: be sure to replace the ACCESS_TOKEN placeholder with your public access token.

For more complex scenarios you may need to set each property value individually in different parts of your code as shown in this example. Again, be sure to replaced mocked data with objects provided by your eCommerce platform.

WoolyAnalytics.set({orderId: "123456"});
WoolyAnalytics.set({discountCodes: ["sale2020", "janedoe123"]});
WoolyAnalytics.set({currency: "USD", subtotalPrice: 17.00, totalPrice: 29.99}); // Example: 3 fields at a time
WoolyAnalytics.emit();

Step 4. End to End Testing

You're done with the integration! Next it's time to test and verify things are setup properly.

View this article for steps on how to test your pixel installation.

Troubleshooting Tips

Some tests are failing? Go here for help with troubleshooting