*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. To add link tracking to your WooCommerce store in your Wordpress admin portal, navigate to Appearance > Theme Editor > header.php

  2. Follow the instructions on Step 2 in the main article to embed the tracking pixel just before the </head> tag in your HTML.

  3. Replace the ACCESS_TOKEN placeholder with your public access token. Your public access token can be obtained within your Roster brand settings.

Step 2. Integrate Order Tracking on the Thank You page

You have 2 options to accomplish this. Whenever possible we recommend doing option 1. (see this article for more details on the WC_Order object)

Option 1 (recommended): Include the order tracking script directly on ALL the "Thank You" page .php files you have.

  1. To track orders, copy the code snippet below . Edit file wp-content/plugins/woocommerce/templates/checkout/thankyou.php and place the code below line:

  2. Using a custom WooCommerce theme and the thankyou.php file is located there as well? You have to integrate the script there instead of the default one.

    1. Usually located here: (/themes/your_custom_theme/woocommerce/checkout/thankyou.php)

First, find this line of code in the thankyou.php page:

<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>

Then, copy/paste the following script just below that line above and replace the ACCESS_TOKEN placeholder with your public access token.

<!-- Roster Order Submission: START -->
<script type='application/javascript'>
function submitOrder() {
if (WoolyAnalytics) {
orderId: "<?php echo $order->get_id(); ?>",
orderDate: "<?php echo $order->get_date_created(); ?>",
discountCodes: <?php echo json_encode($order->get_coupon_codes()); ?>,
currency: "<?php echo $order->get_currency(); ?>",
subtotalPrice: <?php echo $order->get_subtotal(); ?>,
totalPrice: <?php echo $order->get_total(); ?>,
firstName: "<?php echo $order->get_billing_first_name(); ?>",
lastName: "<?php echo $order->get_billing_last_name(); ?>",
email: "<?php echo $order->get_billing_email(); ?>"
var saScript = document.createElement("script");
saScript.addEventListener("load", submitOrder);
saScript.src = "https://sa.getroster.com/wooly-analytics.js?token=ACCESSTOKEN";
<!-- Roster Order Submission: END --><br>

Option 2: Include the order tracking script in the functions.php file.

  1. NAVIGATE to Appearance > Theme Editor > functions.php

    1. See this Wordpress article to learn more about the scripts/hooks used in the functions.php code

  2. IMPORTANT: if you are using a custom theme, in the dropdown labeled "Select theme to edit" make sure you have your custom theme selected. You likely don't want to edit the primary theme's code.

  3. SAFETY FIRST: copy the code that is currently in functions.php and save it somewhere on your computer in case you accidentally break something and need to revert the code.

  4. THE CODE: copy/paste the code snippet below at the end of the functions.php file. Replace the ACCESS_TOKEN placeholder with your public access token.

  5. FINALLY, don't forget to click "Update File" to save your changes

*Code snippet to copy

* Add Roster analytics code to the thank-you page
* Ref: https://docs.woocommerce.com/wc-apidocs/class-WC_Order.html
add_action( 'woocommerce_thankyou', 'roster_analytics' );

function roster_analytics( $order_id ) {
$order = wc_get_order( $order_id );

if ( $order ) {
$usedCoupons = json_encode($order->get_used_coupons());

echo "<!-- Roster Order Submission: START -->
<script type='application/javascript'>
function submitOrder() {
if (WoolyAnalytics) {
orderId: \"{$order_id}\",
orderDate: \"{$order->get_date_created()}\",
discountCodes: {$usedCoupons},
currency: \"{$order->get_currency()}\",
subtotalPrice: {$order->get_subtotal()},
totalPrice: {$order->get_total()},
firstName: \"{$order->get_billing_first_name()}\",
lastName: \"{$order->get_billing_last_name()}\",
email: \"{$order->get_billing_email()}\"

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 );
<!-- Roster Order Submission: END -->";

*This is what the end result should look like:


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

Troubleshooting Tips

Are you using a 3rd party plugin for your checkout flow?

  • The "XL Plugin" is an example where additional work is needed to get the pixel fully integrated properly. See their help article for more details.

Did this answer your question?