*Note: When following these steps be sure to begin by referencing the instructions outlined in the main article.
Step 1. Add the Click Tracking Script
Ensure you have admin access permissions within your WooCommerce account
To add click tracking to your WooCommerce store in your Wordpress admin portal, navigate to Appearance > Theme Editor > header.php
Follow the instructions on Step 2 in the main article to embed the tracking script just before the </head> tag in your HTML.
Replace the ACCESS_TOKEN placeholder with your public access token created in Step 1 of the main article.
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.
To track orders, copy the code snippet below . Edit file wp-content/plugins/woocommerce/templates/checkout/thankyou.php and place the code below line:
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.
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 (sAttribution) {
sAttribution.set({
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(); ?>"
});
sAttribution.emitOrder();
}
}
var saScript = document.createElement("script");
saScript.addEventListener("load", submitOrder);
saScript.src = "https://sa.getroster.com/sa.js?token=ACCESS_TOKEN";
document.body.appendChild(saScript);
</script>
<!-- Roster Order Submission: END --><br>
*Set your access token: be sure to replace the ACCESS_TOKEN placeholder with the public access token created in Step 1 of the main article.
Option 2: Include the order tracking script in the functions.php file.
NAVIGATE to Appearance > Theme Editor > functions.php
See this Wordpress article to learn more about the scripts/hooks used in the functions.php code
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.
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.
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.
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_attribution' );
function roster_attribution( $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 (sAttribution) {
sAttribution.set({
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()}\"
});
sAttribution.emitOrder();
}
}
var saScript = document.createElement(\"script\");
saScript.addEventListener(\"load\", submitOrder);
saScript.src = \"https://sa.getroster.com/sa.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 the public access token created in Step 1 of the main article.
*This is what the end result should look like:
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 WooCommerce 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
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 tracking script fully integrated properly. See their help article for more details.