Google AdWords Conversion Tracking with WooCommerce

16 Replies

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.

16 thoughts on “Google AdWords Conversion Tracking with WooCommerce”

  1. Pingback: Discover Which Traffic Sources Generate Your Ecommerce Revenue In Google Analytics | Ecommerce Double

  2. Amit

    Thanks for this nice article. I was struggling with while trying to implement this adwords tracking code for my woocommerce enabled site http://iosbasics.com.
    Inserting of code can be done in a better way by hooking into woocommerce thank you filter rather than inserting the code into thankyou page directly which gets overwritten on plugin update. I added the code using below hook:

    add_action( ‘woocommerce_thankyou’, ‘my_custom_tracking’ );
    function my_custom_tracking( $order_id ) {
    // Lets grab the order
    $order = new WC_Order( $order_id );

    /**
    * Put your tracking code here
    * You can get the order total etc e.g. $order->get_order_total();
    **/
    }

    But was struggling with the last part of greater than symbol getting converted to &gt and needless to say this article saved my life. Thanks a lot again.

    Reply ↓
    1. louco73 Post author

      Amit,

      Your way is more elegant and correct, so thanks for posting a comment for others to see. I’m just a bit lazy ;).

      Yes, that conversion of the “>” to “&gt” must be there for a good reason if they haven’t removed it after all this time, but it was very frustrating to debug!

      Reply ↓
    2. Joie

      Hi, would you please point me what file should i edit if i want to hook into woocommerce thank you filter ? as what you have done

      Thank you,
      Joie

      Reply ↓
      1. louco73 Post author

        Joie,

        You would put edit the functions.php file in your theme. Ideally you have a child theme so that you don’t get the main theme’s functions.php file overwritten when upgrading.

        Reply ↓
    2. James

      I know nothing about coding or anything similar, but I am running into this same problem with the 3rd party website developers we were using. How easy is this to do for someone who knows nothing?

      Reply ↓
  4. Lyndsey

    Thank you guys so much for posting this info. I was struggling for quite some time trying to get a 3rd party conversion tracking detected. I was finally able to get everything working perfectly with Amit’s suggestion for adding the hook and louco73’s tip on fixing the code in the post-template file.

    FYI – I’m was installing conversion tracking for a campaign with Vertical Search Works. Almost all of the plugin suggestions and articles reference Adwords, but the guide provided here worked for me as well.

    Thank again!

    ~Lyndsey

    Reply ↓
  5. Lee Honeycutt

    Great article, louco73. I very much appreciate your sharing this with the WordPress community. This solution is certainly going to make my clients AdWord’s campaign run a lot more efficiently.

    Next time WordPress is updated, though, we gotta comment out the angle bracket problem, right?

    — Lee

    Reply ↓
  6. kentzo

    Hi:

    I am trying to set up woocommerce to work with Google Analytics, and I follow the instructions highlighted here http://xd3v.com/woocommerce-and-google-analytics-ecommerce-setup/

    I am wondering what are the differences in what are highlighted in that tutorial and yours. One is settting up GA, yours is setting up conversion tracking code for Google Adwords.

    I have created an goal in GA, i noticed that I can actually import that goal into Google Adword to use that as my conversion tracking in Adwords. So if have done so, do I still have to add in the above conversion tracking code as suggested by you?

    Reply ↓
  7. Ian

    Hi,

    I’m trying to do the same thing, but for a Facebook Conversion Tracking pixel. I want to dynamically update the value in the tracking code based on the purchase amount. I’m assuming the code needs to go on the WC thankyou page, but I don’t understand how to edit the tracking code to dynamically update the value.

    Here is the raw code:

    var fb_param = {};
    fb_param.pixel_id = ‘6012968359181’;
    fb_param.value = ‘0.00’;
    fb_param.currency = ‘USD’;
    (function(){
    var fpw = document.createElement(‘script’);
    fpw.async = true;
    fpw.src = ‘//connect.facebook.net/en_US/fp.js’;
    var ref = document.getElementsByTagName(‘script’)[0];
    ref.parentNode.insertBefore(fpw, ref);
    })();

    Facebook tells me that the parts of the code which need to be replaced are:

    1. Replace the XX in fb_param.value=XX with the value you want the conversion pixel to have
    2. Replace the XX in src=”https://www.facebook.com/offsite_event.php?id=6006959661766&value=XX&currency=USD” with the value you want the conversion pixel to have.
    (taken from the article here: https://www.facebook.com/help/464828030234857)

    Any help getting this to happen with WooCommerce is greatly appreciated! And I promise to write a post about it 😉

    Thanks!

    Reply ↓
  9. Martin

    hi! i need paste this code int he thankyou.php and register the conversion.

    (function() {
    soicos.registerConversion({
    pid : 3507,
    data : "",
    trans : {
    orderID : "",
    store_name : ",
    total : "",
    tax : "",
    shipping : "",
    city : "",
    province : "",
    country : "",
    currency : ''
    }
    });
    })();

    I try using that, but dont work for me :

    add_action( ‘woocommerce_thankyou’, ‘my_custom_tracking’ );
    function my_custom_tracking( $order_id ) {
    // Lets grab the order
    $order = new WC_Order( $order_id );

    /**
    * Put your tracking code here
    * You can get the order total etc e.g. $order->get_order_total();
    **/
    }

    Help me please! ( sorry my english)

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *