Configure Google Analytics Conversions Track Events Contact Form 7

Posted on | updated:
EventsjavascriptWordPress

How To Configure Google Analytics Conversions Track Events Contact Form 7

Tracking conversions in Google Analytics using Contact Form 7 requires setup on Google Analytics Conversion Goals control and in the Contact Form 7 contact form Additional Settings.

The Additional Settings tab requires you to customize your button event to send Google Analytics the expected values.

This setup was quite a challenge for me to overcome because their were several factors preventing success that I had to work through. Apparently, this is a common need for many WordPress administrators but an even more common problem getting to work. I will explain in three steps:

  1. Obtaining your Google Analytics tracking code
  2. Preparing your Google Analytics account to track incoming data
  3. Configuring your Contact Form 7 “send” button to send Google Analytics the data
  4. Testing/Verification

Step 1:

Google has a javascript function for you to send the data. This is probably already on your site for general statistics tracking. Open an Incognito Window, open your website, then right click your page and View Page Source, then perform a Find or Search for “analytics” and you should jump to the javascript code. If you found it, then you can go to the next step, otherwise check out this article for adding the GA code.

Step 2:

In your Google Analytics account, click Admin, Goals, +New Goal. Now Custom, enter a name for the Goal, Event for type,

  1. Category (Equals to) “contact form”
  2. Action (Equals to) “submission”
  3. Label (Equals to) “my contact form”
  4. Create Goal to save

 

Step 3:

Edit your contact form, click the Additional Settings tab, and add this code:

on_sent_ok: "__gaTracker('send', 'event', 'contact form', 'submission', 'my contact form');"

Now here is where many admins seem to be having trouble and I did as well. The issue is determining what your Google Analytics function is then making sure it is used here. In this case, __gaTracker is the function.

You will find your function back in Step 1. Perform your View Page Source search again for “analytics” this time at the end of the javascript look for the function name. Common names I’ve seen are “ga”, “__gaTracker”, “gaq.push”, and “gaq”. Just replace __gaTracker with the function name you happen to have.

gaq.push is a little different:

on_sent_ok: "_gaq.push(['_trackEvent', 'contact form', 'submission', 'my contact form']);"

Testing/Verification:

In Google Analytics, at the top, click Reporting, expand Real Time, and click Conversions. This interface is displaying real-time data that GA is receiving from your website. So in another window, goto your Contact Form, fill it out, and hit send. Switch back to your GA, Real Time tab and you should see a hit!

If you see a hit then you’ve properly configured your form! Congrats! If not, please re-read the steps to verify you did everything and check that you didn’t overwrite a ( or ‘ in the button tracker code.

Many WordPress administrators have the need to track Contact Form 7 conversion data in Google Analytics. Configuring the button code to use the proper javascript function is vital.

Tips: When I was working through my troubleshooting, I eventually took the Contact Form 7 out of the formula by making a simple html page that had two things: 1. The GA javascript in the <head> and 2. a hyperlink with the GA tracking code. Here is an example:

<html>
<head>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');

__gaTracker('create', 'UA-34343434-34', 'auto');
__gaTracker('set', 'forceSSL', true);
__gaTracker('require', 'displayfeatures');
__gaTracker('require', 'linkid', 'linkid.js');
__gaTracker('send','pageview');

</script>

</head>
<body>
<a href="/c.html" target="_blank" onClick="__gaTracker('send', 'event', 'contact form', 'submission', 'my contact form');">Test</a>
</body>
</html>

The idea is to have a test link that I could use to verify that my tracking code and function were even working because I had the suspicion (I was correct) that the Contact Form 7 code needed tweaking. If you use this example, you MUST change the UA-343434′ line with your Tracker ID, check your View Source for this or you can find it in Google Analytics, Admin, Tracking Info, Tracking Code.

Finally, you should be aware that it takes a day or two for GA to start displaying your conversions in the normal area where you can run reports and analysis (not the Real-Time area).

Thanks for reading How To Configure Google Analytics Conversions Track Events Contact Form 7