1. Help Center
  2. Referral Tracking

BigCommerce Instructions - Pixel Referral Tracking

 

*Note: When following these steps be sure to begin by referencing the instructions outlined in this article about setting up the pixel.

 


Step 1. Add the Link Tracking Pixel

  1. In your admin area, select Storefront and then Script Manager.
  2. If you already have other scripts, please click on "Create a Script". If you don’t have any scripts yet, you will automatically land on the Create Script screen.
  3. Type in the name of your script "Wooly Analytics", select location on the page "Head", Select pages where script will be added "All pages", select script type "Script".
  4. Follow the instructions on Step 2 in the main article to embed the tracking pixel.  You will copy/paste the code snippet into the text area in this new script you're adding to the store front and replace the ACCESS_TOKEN with your token.


Step 2. Integrate Order Tracking

  1. In your website code files, go to the order-confirmation.html page where you will edit the code and add the order tracking script.
    1. Alternatively you can add a new script in the BigCommerce "Script Manager" as displayed in the screenshot below the code script.
  2. Follow the instructions on Step 3 in the main article to embed the order tracking script and replace the placeholders with code variables from the order object. 
  3. Don't forget to save your changes!

Here's an example of the Wooly pixel with BigCommerce order object variables set in the proper places. (except discount codes hasn't been implemented in this example. If you need to support discount codes be sure to update the script for that)

 

// Get the order data from the BC API
async function getOrderData() {
  const orderURL = "/api/storefront/orders/";
  const response = await fetch(orderURL);
  const data = await response.json();
  return data;
}

function submitOrder() {
  if (WoolyAnalytics) {
      getOrderData().then((orderData) => {
            const orderCoupons = orderData.coupons.map((coupon) => coupon.code);

          // Push orderData to API
          WoolyAnalytics.set({
              orderId: orderData.orderId.toString(),
              discountCodes: orderCoupons,
              currency: orderData.currency.code,
              subtotalPrice: orderData.baseAmount,
              totalPrice: orderData.orderAmount,
              firstName: orderData.billingAddress.firstName,
              lastName: orderData.billingAddress.lastName,
              email: orderData.billingAddress.email,
            });

          //console.log("Submit order", WoolyAnalytics);
          WoolyAnalytics.emit();
      });
  }
}

var woolyScript = document.createElement("script");
woolyScript.addEventListener("load", submitOrder);
woolyScript.src =
  "https://saa.wooly.com/wooly-analytics.js?token=ACCESS_TOKEN";

if (document && document.body) {
  //console.log("woolyScript", woolyScript);
  document.body.appendChild(woolyScript);
}

 

If you choose to add the pixel via the "Script Manager" here's an example of how this is done.

 


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 BigCommerce store is now able to track referral links and discount codes within Wooly.

 


Troubleshooting Tips

Some tests are failing? Go here for help with troubleshooting