Adding Google Ads and Microsoft Advertising conversion tracking tags to WooCommerce powered E-commerce shops can seem confusing at first: WooCommerce templates are like a huge Russian nesting doll and it’s unclear where to put the tags. On top of that Google wants their tags as close to the top of the document as possible, but many tutorials suggest using the woocommerce_thankyou hook, which dumps its output right in the middle of the body.
Use Any WordPress Hook
Luckily we can just use WordPress hooks to insert conversion tags where we need them, so long as we make sure we’re on the “Thanks for your order” page, and check that the order is a status that we want to count as a conversion. Here’s how we can do that:
/**
* This function can be hooked onto any normal WordPress hook. Maybe wp_head,
* or wp_footer, or even a sidebar if you really want.
* @return [type] [description]
*/
function jb_do_stuff_on_order_complete_page() {
// is_order_received_page() is part of WooCommerce
// if there's a possibility that the page is loaded without WooCommerce
// you could check to make sure it exists:
if(!function_exists('is_order_received_page')) return;
if(is_order_received_page()) {
global $wp;
$order = wc_get_order($wp->query_vars['order-received']);
if($order && !$order->has_status( 'failed' )) {
// Do what we need here.
}
}
}
Set Up Conversion Tracking
Both Google and Microsoft have two parts to their tracking tag: a global tag that goes on every page of the website, (Microsoft calls this a UET tag, for “Universal Event Tracking“), and a conversion snippet. Both companies ask that that the global tag appears first in the document’s source. For Google this is because the gtag() function used by the conversion snippet is defined by the global tag.
Google Ads
Google really likes their global tag to be as high in the page’s source as possible – right after the opening <head> tag if possible. Because of this I often put the global tag right into header.php. A more portable solution is to use the wp_head hook so we’ll do that here:
function jb_set_up_google_tags() {
// Start with the global tag.
?>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXX-1'); // sets up Google Analytics - Google will give you the exact value
gtag('config', 'AW-XXXXXXX'); // added for the conversion - Google will give you the exact value
if (window.performance) {
var timeSincePageLoad = Math.round(performance.now());
gtag('event', 'timing_complete', {
'name': 'load',
'value': timeSincePageLoad,
'event_category': 'JS Dependencies'
});
}
</script>
<?php
// Add the conversion tag IF this is an Order Complete page.
if(is_order_received_page()) {
global $wp;
$order = wc_get_order($wp->query_vars['order-received']);
if($order && !$order->has_status( 'failed' )) {
?>
<!-- Event snippet for Sales conversion page -->
<script>
gtag('event', 'conversion', {
'send_to': 'AW-XXXXXXX/XXXXXXXXX__XXXXX', // Google will provide this value.
'value': <?php echo $order->get_subtotal(); ?>,
'currency': 'USD', // Change you deal with a different currency. Or set it dynamically.
'transaction_id': '<?php echo $order->get_order_number(); ?>'
});
</script>
<?php
}
}
}
// Set priority 1 to appear as soon as possible in the wp_head.
add_action( 'wp_head', 'jb_set_up_google_tags', 1 );Boom! That’s it for Google.
Microsoft Advertising
Microsoft advertising is very similar, except they seem to suggest that they want the conversion snippet before the closing </body> tag, and don’t seem to mind about the UET tag, so let’s just put them both in the wp_footer:
function jb_add_microsoft_advertising_tags() {
// Start with the UET tag that goes on every page.
?>
<script>(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"XXXXXXX"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");</script>
<?php
// Then add the conversion tag IF this is an Order Complete page.
if(is_order_received_page()) {
global $wp;
$order = wc_get_order($wp->query_vars['order-received']);
if($order && !$order->has_status( 'failed' )) {
$order_info = [
'revenue_value' => $order->get_subtotal(),
'currency' => 'USD'
];
?>
<script>
window.uetq = window.uetq || [];
window.uetq.push('event', '', <?php echo json_encode($order_info); ?>);
</script>
<?php
}
} // end if this is an order received page.
}
add_action( 'wp_footer', 'jb_add_microsoft_advertising_tags', 90 ); // Priority 90 to appear near the end.Microsoft’s documentation on adding the conversion snippet is somewhat confusing. It talks about adding extra Javascript functions to supply the conversion value and doesn’t say what data type the conversion value should be, (let me know if you know). A Javascript function to extract the conversion value from the DOM might be a good idea when there’s no server-side access to the purchase data, but if you’re developing a WooCommerce theme or plugin you have the access you need to just print the conversion value in the tag with PHP, (as we did above).
Conclusion
That’s it. I heard that some people have trouble getting Bing working, (probably because of the extra-confusing directions from Microsoft), and I had trouble finding resources on adding conversion tags to the header for Google Ads. Hopefully this helps people with one, (or both), of the same questions.