Tracking Google Adwords Conversions in Contact Form 7 for WordPress

  • April 29, 2013

Contact Form 7 is a fantastic WordPress plugin which simplifies the boring task of building forms on your WordPress website.

The out-of-the-box install uses an AJAX form submission. This means that users don’t get redirected to another page on your website following a form submission. Instead they are just shown a thank you message ¬†within the same page.

This is ideal for users as it makes it smooth and painless. However, this also means that there is no thankyou.html page where you can add your conversion tracking code for Google Adwords.

This is fairly straightforward to sort out. The new tracking code from Adwords looks like this:

<!-- Google Code for Enquiry Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXX;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "XXXXXXXXXXXX";
var google_conversion_value = 0;
/* ]]> */
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/XXXXXXXXXX/?value=0&amp;label=XXXXXXXXXXXXXXXXX&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

To get this working, you need to take the first part of the code and the third pharmacy-no-rx.net part of the code and stick it in the “Form” section of your contact form:

<!-- Google Code for Enquiry Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = XXXXXXXXX;
var google_conversion_language = "en";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "XXXXXXXXXXXX";
var google_conversion_value = 0;
/* ]]> */
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/XXXXXXXXXX/?value=0&amp;label=XXXXXXXXXXXXXXXXX&amp;guid=ON&amp;script=0"/>
</div>
</noscript>

<!--CONTACT FORM STARTS HERE...   -->

Further to this, you need to add a little script which gets fired every time the contact form is submitted. This needs to go in the “Additional Settings” field at the bottom of the contact form:

on_sent_ok: "jQuery(String.fromCharCode(60)+'img/'+String.fromCharCode(62)).attr('height','1').attr('width','1').css('border-style','none').attr('src','http://www.googleadservices.com/pagead/conversion/'+google_conversion_id+'/?value='+google_conversion_value+String.fromCharCode(38)+'label='+google_conversion_label+String.fromCharCode(38)+'guid=ON'+String.fromCharCode(38)+'script=0').appendTo('body');"

And that’s it. You should now be tracking conversions for your Adwords campaign.

If you are looking for the best place to host your WordPress site, knowing that it will run very fast and always be secure, be sure to check out WPEngine

About Emile

Emile is the director of Acroweb. He is a Wordpress and Drupal web developer and project manager with an extensive knowledge of web strategies and SEO. He lives on the South Coast UK with his wife and daughter and spends a lot of his time chasing waves and wind around the country.

Have a project that you want to talk about? Get A Quote