---
title: Generic tracking pixel instructions
slug: generic-tracking-pixel-instructions
description: Manually install Roster's link and order tracking pixels when you're not on a supported ecommerce platform, with step-by-step guidance.
docTags: 
createdAt: 2025-02-03T18:29:14.621Z
---

If your brand isn't using one of [these](docId:8Lvuc9wQSxLIrHykMp53K) ecommerce platforms, then you will need to manually install Roster's link tracking and order tracking pixels. 

This guild will cover installing Roster's link tracking pixel and Roster's order tracking pixel, both of which are required to be installed to use Roster's sales attribution features such as tracking link clicks, attributing referrals to ambassadors, and creating referral rewards. 

:::hint{type="warning"}
## 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.

::::WorkflowBlock
:::WorkflowBlockItem
Log into your Roster account.
:::

:::WorkflowBlockItem
Go to the API integration page by clicking on your brand's name in the left-hand navigation, then `Integrations` > `API integration`

![](https://api.archbee.com/api/optimize/mmAK_JBzN5YWZNnNvmD7r/umEJyWiyZ6TIWAeQIp6gM_cleanshot-2025-02-03-at-125959.png)
:::

:::WorkflowBlockItem
Copy the newest Public Access Token if one exists, or click New Access Token to create a new one.

![](https://api.archbee.com/api/optimize/mmAK_JBzN5YWZNnNvmD7r/V-F_SKIGoTC4MA-pYmNIM_cleanshot-2025-02-03-at-130154.png)
:::
::::



:::hint{type="warning"}
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. 

:::::WorkflowBlock
:::WorkflowBlockItem
Paste the Javascript tag just before the closing `</head>` tag in your e-commerce platform or website's global template.&#x20;

```javascript
<script type="text/javascript">
  window.roster = {
    config: {
      token: 'PUBLIC_ACCESS_TOKEN',
      forceShareableCodeFetch: true
    },
    onClickTracked: function() {
      // Optional callback. See table below for details.
      console.log('Click tracked');
    },
    onCodeRetrieved: function(discountCode) {
      // Optional callback. See table below for details.
      console.log('Discount code:', discountCode);
    },
    onError: function(error) {
      // Optional callback. See table below for details.
      console.error('Roster pixel error:', error);
    }
  };
</script>

<script async type="application/javascript"
  src="https://cdn.rostercdn.com/sa.js"></script>
```
:::

:::WorkflowBlockItem
Replace PUBLIC\_ACCESS\_TOKEN in the Javascript tag with the Public Access Token from Step 1 above.&#x20;
:::

::::WorkflowBlockItem
Verify the link trakcing pixel.

After your have published the changes to your storefront or website, verify that link tracking is working by using an ambassador's referral link from your Roster account.&#x20;

:::hint{type="info"}
See [Verify installation with Roster's Chrome Extension](docId:-J9KDLPJTCpDKR6ebLFWz) to speed up the verification process using Roster's Chrome browser extension.
:::
::::
:::::



:::hint{type="info"}
Be sure you install the link tracking pixel in a way that will allow it to run on each page load. This will ensure that regardless of which URL ambassadors share as their referral link, Roster will capture incoming link clicks and store the referral link IDs for purchases made by referred customers.
:::

***

## 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.)&#x20;

::::WorkflowBlock
:::WorkflowBlockItem
Copy the following Javascript tag to your clipboard.

```javascript
<!-- START: Roster Order Submission-->
<script type="application/javascript">
function submitOrder() {
 if (sAttribution) {
   sAttribution.set({
     orderDate: "2024-01-12T12:59:59", // Recommended; Format the date as YYYY-MM-DDT00:00:00; defaults to the current datetime if not provided.
     orderId: "123456", // Required
     orderNumber: "56789ABC", // Recommended if your platform has both a numeric ID and a user-friendly order number; defaults to orderId if not provided.
     currency: "USD", // Required
     subtotalPrice: 17.00, // Recommended; it should be the order total after discounts have been applied, but before taxes and shipping; this is used by Roster to calculate commissions; defaults to totalPrice if not provided.
     totalPrice: 29.99, // Required
     discountCodes: ["sale2020", "janedoe123"], // Recommended; Used by Roster to track code usage and sales attribution.
     email: "john.doe@email.com", // Required; this is used by Roster's sales attribution logic.
     customerId: "9876ABC", // Recommended; this is used to help determine if a customer is new or existing.
     firstName: "John", // Optional
     lastName: "Doe", // Optional
   });
   sAttribution.emitOrder();
 }
}

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

:::WorkflowBlockItem
Paste the Javascript tag just before the closing `</head>` tag on the order confirmation page or the page that loads upon a successful conversion.
:::

:::WorkflowBlockItem
Replace `PUBLIC_ACCESS_TOKEN` in the Javascript tag with the Public Access Token from Step 1 above.
:::
::::

***

## Step 4: Verify the installation process

It's imperative that you test the link tracking and order tracking upon completing the above steps.&#x20;

See [Verify tracking pixel installation](docId\:hSZdrYDoQ2cmTKv8CXbWP) for a video walkthrough and detailed steps and [Verify installation with Roster's Chrome Extension](docId:-J9KDLPJTCpDKR6ebLFWz).

***

## Need help?

If you have any questions about adding hidden products to product rewards, contact us at [support@getroster.com](mailto\:support@getroster.com).