IMPORTANT UPDATE!
After December 1st 2020, the Roster pixel is now auto installed when Shopify is connected on the integrations page in the brand settings. To know what action you need to take (if any) you likely fit into one of the following buckets:
If you are new to Roster and have connected your store after this date, you are good to go!
If you connected your Shopify store to Roster before this date, but didn't install the pixel manually, simply reconnect your store with Roster and you'll be good to go!
If you previously followed the instructions in this article to manually install your pixel, we need you to reconnect your Roster account with Shopify (which now auto installs the Roster pixel to your store!) and then remove the manually added pixel from your store. (it's easier than it sounds :-)
If you need to remove the Roster pixel from your store that was installed manually, follow these steps. Note: depending on your access levels you may need your Roster admin doing steps 1 & 2 and your store admin completing steps 3, 4 & 5.
*DO THESE STEPS IN ORDER! Don't remove the manually installed pixel before reconnecting with Shopify to auto install the new pixel.
Login to the brand portal to go to the integrations page and then disconnect Shopify.
Stay on the integrations page and reconnect your Shopify store with Roster. Note: this will auto install the pixel for you.
Now you need to remove the old pixel you manually installed in the past. To do this, we'll basically have you follow the instructions in the article below but in reverse. Start by logging in to your Shopify store. (here's a helpful video on pixel removal)
Go to Online Store > Themes > Edit code and open the "theme.liquid" file and remove the Roster script that should be within the <head> tags and closer to the closing </head> tag towards the end if you followed our instructions accurately when it was added. Click save.
Next navigate to Settings > Checkout > Additional Scripts and remove the Roster script that is there. Click save.
Thank you for doing this. You're done!
DO NOT PROCEED! FOR SHOPIFY BRANDS, THIS PROCESS HAS BEEN REPLACED WITH AN AUTO INSTALLED PIXEL -- unless you have multiple stores pointing to one Roster account or need to enable cookie tracking. You can follow these instructions to manually install the pixel on the other stores.
*Note: When following these steps be sure to begin by referencing the instructions outlined in this article about setting up the pixel.
Video Overview
Step 1. Add the Link Tracking Pixel
1. To add link tracking to your Shopify store in your admin portal navigate to Online Store > Themes > Edit code.
2. Open the "theme.liquid" file for editing the code.
3. Follow the instructions on Step 2 in the main article to embed the tracking pixel just before the </head> tag in your HTML.
<!-- Roster Analytics -->
<script async type="application/javascript" src="https://sa.getroster.com/wooly-analytics.js?token=ACCESS_TOKEN&source=shopify_checkout"></script>
Step 2. Integrate Order Tracking
1. Navigate to Settings > Checkout
2. Scroll down to the Order processing section and paste the following code into the Additional scripts box and be sure to replace the ACCESS_TOKEN placeholder with your public access token you can get from your brand settings.
Note: this approach which includes the main tracking script is recommended because we've found that many Shopify store templates don't include the main website template which loads the top level tracking library.
<!-- Roster Order Submission: START -->
<script type="application/javascript">
function submitOrder() {
if (WoolyAnalytics) {
WoolyAnalytics.set({
orderId: "{{ order.id }}",
discountCodes: [{% for discount in order.discount_applications %} "{{ discount.title }}", {% endfor %}],
currency: "{{ shop.currency }}",
subtotalPrice: {{ order.subtotal_price | money_without_currency }},
totalPrice: {{ order.total_price | money_without_currency }},
firstName: "{{ order.customer.first_name }}",
lastName: "{{ order.customer.last_name }}",
email: "{{ order.email }}"
});
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 -->
Are you enabling cooking tracking across sub domains?
If so, also update your order tracking pixel by replacing the "saScript.src" value as follows:
saScript.src = "https://sa.getroster.com/wooly-analytics.js?token=ACCESS_TOKEN&cookies=true&domain=ROOT_DOMAIN";
*Set your Root Domain: be sure to replace the ROOT_DOMAIN placeholder with your domain. For example: mystore.com
Review this article for more information on enabling cooking tracking.
Testing
Reference Step 4 in the main article to make sure you have everything setup properly.
Congrats, You're Done!!
You're all set up and your Shopify 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