Custom Conversion Tracking in WooCommerce

If you integrate any third-party services with your WooCommerce site (for ads, analytics, marketing, drop shipping, or A/B testing), it’s often helpful or necessary to provide conversion data through javascript.

A lot of the big services, like Google Analytics (tutorial) or Facebook ads, have off-the-shelf extensions you can use. But for smaller services, you often have to write some custom code to send them the conversion information.

Generally the easiest way to do this is by using the woocommerce_thankyou hook. This action is only fired on the order confirmation page and also provides the $order_id variable, which gives access to all the order details.

Using the Hook

Basic Conversion Information

Here’s an example of how you might pass data like order id, order total, and customer e-mail to a third-party service using the woocommerce_thankyou hook:

function prefix_service_conversion_tracking( $order_id ) {
// Lets grab the order
$order = new WC_Order( $order_id );
// Order ID
$order_id = $order->get_order_number();
// Order total
$order_total = $order->get_total();
// Order e-mail
$order_email = $order->billing_email;
?>
<script>
window['service'] = window['service'] || [];
window['service'].push(['track', 'order',
{
order_id : '<?php echo $order_id; ?>',
order_total: '<?php echo $order_total ?>',
order_email: '<?php echo $order_email ?>'
}
]);
</script>
<?php
}
add_action( 'woocommerce_thankyou', 'prefix_service_conversion_tracking' );

Product Conversion Information

Occasionally you might also want to send specific information about which products were purchased. That information is also available. If you’re outputting it into a javascript variable, it might look something like this:

function prefix_service_conversion_tracking( $order_id ) {
// Lets grab the order
$order = new WC_Order( $order_id );
// Products
$products = $order->get_items();
?>
<script>
window['service'].push(['track', 'products', [
<?php
$count = 0;
foreach( $products as $item_id => $item ) {
$count++;
$product = $order->get_product_from_item( $item ); ?>
{
sku: '<?php echo $product->get_sku(); ?>',
price: '<?php echo $order->get_line_subtotal( $item ); ?>',
quantity: '<?php echo $item['qty']; ?>'
}<?php if ( count( $order->get_items() ) > $count ) { echo ","; } ?>
<?php } ?>
]]);
</script>
<?php
}
add_action( 'woocommerce_thankyou', 'prefix_service_conversion_tracking' );

Additional Information

Depending on the service you’re integrating with, you may also need to send address information, tax amounts, or coupon information. You can always look through the WooCommerce docs to figure out how to get this. A var_dump of $order can also be really helpful when looking for specific pieces of data.

Alternates to the Hook

I recently had a project where the conversion data needed to be output in the footer markup (using the wp_footer hook) rather than inline after the order markup, which is where the woocommerce_thankyou hook places it.

This was a bit tricker to implement since I didn’t have immediate access to the $order_id variable in wp_footer. I also now needed to add some conditional logic in order to display the script only on the thankyou page.

But, after a bit of digging I found a solution. To output the script only on the order confirmation page, I used the WooCommerce function is_order_received_page. And to get access to the order information, I used $wp->query_vars[‘order-received’].

Here’s what an example of this method looks like:

About Devin

I'm a WordPress developer based in Austin, Texas. I run a little theme shop called DevPress and work for a startup called Nano. Find me on twitter @devinsays.

10 Responses

  1. Thanks for this :)

    I’d suggest one change: $order = new WC_Order( $order_id ); to $order = wc_get_order( $order_id ); so the order object has all order details, i.e., subscription meta, in case you need to check / include additional details in the conversion script.

  2. Jon

    That’s pretty useful information. I was not aware of the is_order_received_page function when I made my own solution back in January. (Maybe it wasn’t available then?)

    I used the woocommerce_thankyou hook to redirect to a specific thank you page and then checked for the right page ID in my wp_footer action. In my case, I was able to use global $order; to get the order object. Does this not work in your code as well?

    Another thing I noticed is that the call to $wp->query_vars[‘order-received’] on line 4 of wc-footer-conversion-tracking-example.php is redundant. This is already confirmed as part of is_order_received_page, so you should know that if that function returns true, which it would have to to get this far in the code, then this condition is already met.

    I almost forgot: The link to documentation on the woocommerce_thankyou hook in the third paragraph is broken.

  3. Hi,

    I’ve js tracking code from various affiliates and from past 2 weeks it has stopped logging sales in affiliates db, though the code has remained the same.
    I am using simple woocommerce thanks page hook with following code, any clues where I am going wrong or how to debug this to get the correct result?

    [redacted]

    Urgently need this help! Please

    Thanks
    Amit.

  4. Just wanted to say that the last alternate hook was EXACTLY what I needed. Was trying to integrate GrowSumo on my WooCommerce install and your code worked perfectly. So, thank you!

  5. Great tutorial. I actually thought it would be really difficult to pull order details for then to insert them in custom tracking. You made it easy.
    Now I just need to learn how to do it this Google Tag Manager.

Leave a Reply