Posted by Aimee Cozza on August 2nd, 2017

This blog post has been a long time in the making. There are a variety of Contact Form 7 “fixes” to get submissions to show on Google Analytics, but seemingly none of them work. It used to be as simple as dropping a bit of code into the “additional settings” in the contact form, but no longer. It’s taken some time to figure out exactly how this can be done — and actually work — so I’d like to share the various solutions for fixing this. This blog post is dated July 20th, 2017; changes may occur in the future that may make this solution defunct. Please be aware of this.

Solution #1: Manual Code

Step 1. Make sure that you have Google Analytics code in your header of your site. You can do this by viewing the source code of your page and searching for “GoogleAnalytics” or “UA”. It should look like this:

<script>
(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-1', 'auto');
ga('send', 'pageview');

</script>

Step 2. Insert the tracking code listener into the header of your page. Here is the code:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga( 'send', 'event', 'contact', 'submit' );
}, false );
</script>

You can add this to footer.php with this code:

function mycustom_wp_footer() {
?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga( 'send', 'event', 'contact', 'submit' );
}, false );
</script>
<?php
}

Step 3. Give your contact form a test. If it’s working, it should show in Google Analytics under Behavior > Events > Overview as “contact”. It can take 24 hours for this to show.

Things to remember: Check and make sure when you’re copy pasting the code that it’s not utilizing smart quotes. HTML, Javascript, etc won’t work properly with smart quotes.

Solution #2: WP Google Analytics Events plugin

Step 1. Make sure you have the Google Analytics code in your site by following the same steps as step 1 above.

Step 2. Install WordPress plugin “WP Google Analytics Events“.

Step 3. Set up “click tracking” with the following information:

Element Name: wpcf7mailsent (this will track ONLY when the form is successfully sent; this is the preferred method)

OR
The wpcf7mailsent feature does not appear to be properly working any longer. I have confirmed that the wpcf7-submit method does, in fact, work with the setup and plugin I am describing.

Element Name: wpcf7-submit (this will track when the user clicks on “submit”)
Type: class
Event category: Contact Form (or however you want your label to show up)
Event action: submit
Event label: Contact form submission

Step 4. Click “add”

Step 5. Give your contact form a try. If it’s working, you should see it in the real-time Google Analytics, or under Behavior > Events > Overview. It can take up to 24 hours for this information to show.

Well hold on… I have more than one contact form. Isn’t this a catch all?

You’re right. The method above IS a catch all for if you either a. don’t care about differentiating your contact forms or b. only have one contact form. If you want to set up contact form tracking differently on each contact form, here’s how you can do it.

In this example, we have a “quotes” form and a “contact form”. We want to track them individually to find out whether people are writing in for quotes or otherwise.

I’ll set up WP Google Analytics Events plugin the same as above. I’m going to define two classes, though. It will look like this:

Element Name: quote-submit
Type: class
Event Category: Quotes
Event Action: submit
Event Label: Quote Submission

Element Name: contact-form
Type: class
Event Category: Contact Form
Event Action: submit
Event Label: Contact Form Submission

Once you set this up, go into your contact form and make changes to the submit code.

My quotes page submit button now looks like: [submit class:quote-submit “Send”]

My contact form page submit button now looks like: [submit class:contact-form “Send”]

There is a bug within Contact Form 7 that if you place an ID or class after the submission text (in this case, “Send”) it will not take or show. Make sure you place your ID or class before the submission text.

Give your contact form a try. If it’s working, you should see it in the real-time Google Analytics, or under Behavior > Events > Overview. It can take up to 24 hours for this information to show.