Tag Archives: WooCommerce

Google AdWords Conversion Tracking with WooCommerce

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 “/* ]]&gt; */”. 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(']]>', ']]&gt;', $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.



WooCommerce – WooFramework Update mkdir Failure

Over the last week or so I’ve been moving a few WordPress web sites to a new server, upgrading different plug-ins, themes and the WordPress versions as I go. One of my websites uses WooCommerce, as I have discussed before. When I used the automatic updating function for the WooFramework I received the following error: “Failed: mkdir Failure”.

I wasn’t sure how or where the WooFramework fitted into the whole WooCommerce environment, so I thought it might just be a permission problem. Looking at the top level directories everything seemed fine though. I decided to Google, but couldn’t come up with any useful answer.

I ended up downloading the WooFramework and unzipped it in the /tmp directory to check what files are included. I then used the find command to match some of the file names from the downloaded archive to determine the location of the WooFramework in my WordPress installation. The location is in the theme directory under the functions directory:

 /var/www/html/<site_dir>/wp-content/themes/wootique/functions

I then saw what the problem was, the theme directory and files were owned by root. Thus the automatic update function didn’t have permissions to create the necessary directory to download and unzip the updated WooFramework. A quick chown -R of the top level theme directory and the problem was solved!

Hopefully this will help anyone else who faces a similar problem with a mkdir error when updating their WooFramework.