I finally had some free time to add Google AdWords Conversion Tracking to my baby products website, baby.laydu.com. As described before, this website runs WordPress with the WooCommerce plug-in and an associated free theme.
Creating a conversion metric and associated tracking code is straight forward on the Google AdWords site. You just need to log into your AdWords account, click on the Tools and Analysis drop-down menu and choose Conversions to get started. Once you’ve chosen what you want to track you end up with some code like this:
<!- Google Code for Purchase Conversion Page ->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "Purchase";
if (<? echo $totalValue ?>) {
var google_conversion_value = <? echo $totalValue ?>
}
/* ]]> */
</script>
<script type="text/javascript"
src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0
src="http://www.googleadservices.com/pagead/
conversion/1234567890/?value=
<? echo $totalValue ?>&label=Purchase&script=0">
</noscript>
</body>
Now you just need to add this to the Order Received page in WooCommerce. That’s easy, just go and add the code into the page definition below the [woocommerce_thankyou] tag, right? Not so fast! The code will get mangled by the editor that thinks it is dealing with HTML rather than JavaScript.
With the WordPress editor trying to be too clever you can add the code to the relevant PHP file on the server. For WooCommerce the best place is to put the in the /wp-content/plugins/woocommerce/templates/checkout/thankyou.php. I put my code just after the thank you message:
<p><?php _e('Thank you. Your order has been received.', 'woocommerce');
?></p>
<!-- Google Code for Purchase Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
...
Unfortunately there is still a problem with WordPress 3.5.1 that has been documented for 6 years which replaces the end of the CDATA section “/* ]]> */” with “/* ]]> */”. The quick fix for this is to comment out the offending code in /wp-includes/post-template.php.
function the_content($more_link_text = null, $stripteaser = false) {
$content = get_the_content($more_link_text, $stripteaser);
$content = apply_filters('the_content', $content);
/** $content = str_replace(']]>', ']]>', $content); */
Google has a neat little extension for Chrome, Tag Assistant, which allows you to check that your Google code snippets are working on the displayed page. I ran that on the Order Received page and everything was finally functioning. Now I just need to wait until a customer clicks on one of my ads and purchases something to see if the Google AdWords Conversion Tracking is working as intended with my WooCommerce site.
Credit to SIMON.SCHÖNBECK.DK for his post on a related CDATA problem with WordPress.
