One of my favourite plugins for WordPress is Contact Form 7, a free and powerful plugin that allows developers to manage multiple contact forms on their WordPress site. However as the forms are processed within an AJAX application it’s not immediately obvious if and how you can track form submissions as goals in Google Analytics.
The great news is that you can and it’s very easy to setup. In this quick tutorial i’ll walk you through setting up a new goal and the code you’ll need for both ‘Classic’ and the shiny new ‘Universal’ Google Analytics.
Setting up the 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.
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.