Goal Tracking with Contact Form 7 in Universal/Classic Analytics

The famous Contact Form 7, one of the most used plugins to create contact forms, being download more than 15.5 millions time by the day this post was created.

However tracking conversions on Analytics has been an issue lately. Since Google have changed their GA code from the classic way to the Universal code, the script that we have set up on the Additional Settings is not longer valid; therefore the user once they hit submit to the form button the ajax confirmation is not displaying and the form it doesn’t clear.

So here is the code for both type of Analytics Code.

Setting up a Goal in Google Analytics

So let’s start by setting up the goal in our Google Analytics account. Login to GA and head over to the Admin panel of your select domain profile. Select Goals from within the View (Profile) menu:

Next click on ‘Create a Goal’ to begin setting up the new goal that you’d like to track for Contact Form 7. In Step 1 click on ‘custom’ rather than ‘template’ from the initial set-up option. Now within Step 2 simply choose a name for your goal like ‘Contact Page’ and choose ‘Destination’ from the ‘Type’ options:

Finally in step 3 choose ‘Equals to’ for the destination and set a ‘fake’ URL that we can use to track the goal. I’ll explain later on why this Goal Destination is ‘fake’ but for now, simply pick a URL that doesn’t exist (and would therefore 404) that you can assign to the goal.

Complete the goal as necessary to finish the set-up of your new goal. Remember your ‘fake’ Destination URL as we’re going to ‘ping’ this imaginary path in the Contact Form 7 plugin next.

Pinging the GA Goal from Contact Form 7

As I mentioned earlier, CF7 forms work as AJAX applications – which means the data is submitted and processed within an AJAX event. When users successfully complete a CF7 form, they’re not taken to a new ‘thank you page’ URL by default, which can make tracking the event tricky.

However, both the Classic and the new Universal Google Analytics provide functions that allow you to trigger or ‘ping’ page-views whether you’re actually on that specific page or not. To take advantage of these functions, Contact Form 7 includes a really useful JavaScript Action Hook called ‘on_sent_ok’ that can trigger custom JavaScript events when the form has sent successfully. Depending on whether you’re using Classic (ga.js) or the new Universal (analytics.js) Google Analytics code, you’ll need either one of the following lines of code:

Universal Analytics Code

on_sent_ok: "ga('send', 'pageview', '/your/url');"

Classic Analytics Code

on_sent_ok: "_gaq.push(['_trackPageview', '/your/url']);"

Remember that Goal URL that we created earlier in Google Analytics? Swap /your/url in the code above for the path that you set up. If you now navigate to your individual Contact Form 7 form settings, scroll down to the bottom to to the ‘Additional Settings’ field:

 

Paste in the line of code like in the example above. Now, once our form is successfully completed, the on_sent_ok Action Hook will trigger our ga() or _gaq.push() functions that will ping our goal within Google Analytics.

That’s it!