Google Adwords Conversion Tracking and Contact Form 7 integration

Having just started to use Google Adwords, I decided to try out the conversion tracking system. I wanted to track users that used my contact form. Below is a brief description of how I integrated the code into Contact Form 7.

First of all, I’m assuming you have an existing contact form created using the Contact Form 7 plugin. I’m also assuming that you have created a Google Adwords Conversion Tracking action.

We’ll need the code snippet generated by the Conversion Tracking tool. The code comes in three sections.
The first bit sets a few variables using javascript. The second loads the conversion.js file and the third bit handles the situation where javascript is not enabled. We don’t need the second ‘conversion.js’ bit so throw that away.

Edit your Contact Form 7 contact form and add the first and third bits of your code snippet to top of the form. Now scroll down to the ‘Additional Settings’ section and add the following line

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’);”

Update: Please note that WordPress is altering the apostrophes and quotes in the code above. You’ll need to correct them if you cut and paste.

Now save the form. If all went well, you should now have enabled conversion tracking on your contact form.

Update: For those of you who have read the article and the comments below and are still having trouble, here are some screenshots…

PLEASE LEAVE COMMENTS/QUESTIONS BELOW RATHER THAN VIA MY CONTACT FORM.


No related posts.

4 Responses to “Google Adwords Conversion Tracking and Contact Form 7 integration”

  1. Mike W says:

    I looked all over the support forum and couldn’t find an answer to this. Thanks so much. You da man!

  2. zigojacko says:

    When you state “add the first and third bits of your code snippet to top of the form”, I take it that means above the contact form actually in the Contact Form 7 plugin as opposed to the Contact Us page?

    It also causes the AJAX thank you message to disappear.

    Any help would be greatly appreciated, thanks.

  3. mark says:

    @zigojacko I have a working example on this site. Visit the contacts page at http://mark.hartigan-davies.com/contact/
    The first and third bits should be entered in to Contact Form 7 in the Form field just before the form text. Take the code snippet from the conversion tracking tool and remove the second ‘conversion.js’ bit then paste what remains in to Contact Form 7.
    Submitting a message on my contact page does result in the AJAX “thank you” message appearing.
    I hope that helps.

  4. divydovy says:

    Worked great for me, thanks. Had to swap out apostrophes to make it work, but that’s all. Thanks for sharing :)

Leave a Reply

You must be logged in to post a comment.