Development 22 Posted by Aaron

Event tracking in WordPress Contact Form 7 (Universal Analytics)

WordPress Contact Form 7 - Universal Analytics event tracking

Tracking Form Submission goals with Google's Universal Analytics

Tracking goals through contact forms in WordPress is important for a lot of businesses. It’s been possible now for some time, but with many businesses now moving to Google’s recently out of Beta ‘Universal Analytics‘, many code snippets need updating.

After creating a form within the user interface, click into the edit view and scroll to the bottom. Past the standard response messaging, there is an additional settings box. This area can be used to fire JavaScript calls upon different form states. We’re going to focus on the on_sent_ok hook, as that fires once the form has validated successfully and triggered the email send.

Google (Universal) Analytics provides a good event tracking guide here. In essence, the send event that Google is expecting looks like this;

ga('send', 'event', 'category', 'action', 'label', value); // where value is a number.

Of these, the label and value attributes are optional, but sometimes useful if you are tracking goal values – the value you pass in to this event will be used in your reporting.

To translate this into WPCF7 events, we’ll need to wrap this in the ready-provided hook we discussed earlier. The end result looks something like this – though note I have removed the optional values for our tracking.

on_sent_ok: "ga('send', 'event', 'category', 'action');"

Be careful to note the usage of single and double quotes, otherwise you may run into unexpected issues. Once pasted in, you should see something that looks like this, below.

universal analytics wordpress contact form event tracking

Once this is configured, you’ll need to set up your event within Google Analytics. Log into your account, select the profile your goal should apply to, and select Admin from the top menu. You should see the following. Select goals from the third menu;

Impression Google Analytics (Universal)

When presented with a list of your already set up goals, select New from the action buttons, then select ‘Contact us’ from under the Inquiry goal type. Under the next setting, you’ll be asked to set the type of Analytics event that triggers the goal. We’re using events in this example, but you could easily change out the Analytics code above to fire page views instead (for instance you might open a thank you page in a pop up or something similar).

Once ‘event’ has been selected from this step, move onto the next step to set up your event conditions. If you are following this example exactly, you should set up your goal like so;

Universal Analytics Goal Setup

If not, then copy your attributes across from the event firing code you entered into the WordPress Contact Form 7 ‘Additional settings’ box above.

The final step will allow you to verify the goal and finalise the setup. If you are completing this tutorial in one go, then the goals historical conversion rate will be 0%, so don’t be alarmed.

If you’ve found this post useful, please let me know in the comments.

  • Optimix

    Thank you for usefull article :) Just right I was searching for.

  • Joanne G

    Agh this isn’t working for me – do you think me adding the demographics snippet to the UA code would have affected anything? Racking my brains..

    Thanks :)

    • Aaron Dicks

      Hi Joanne
      Can you paste in the code that’s rendering in the page’s source code? Are you seeing any errors in console? Also specifically, which bit isn’t working – the event tracking?
      Thanks
      Aaron

      • Joanne G

        Thanks for your reply Aaron,

        UA code is..

        (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’,’ga’);

        ga(‘create’, ‘UA-xxxxxxx-x’, ‘auto’);
        ga(‘require’, ‘displayfeatures’);
        ga(‘send’, ‘pageview’);

        and in contact form 7 additional settings I’ve tried..

        on_sent_ok: “ga(‘send’, ‘pageview’, ‘/your/url’);” and on_sent_ok: “ga(‘send’, ‘event’, ‘contact’, ‘enquiry’, ‘ContactForm’);”

        tried to set these as goals (destination and event) and it’s just not tracking.

        Thanks :)

        • Aaron Dicks

          That looks ok to me… Do you want to send me the URL privately?
          Also, where is your code placed in the template?
          Can you see any errors in console?
          If you type ga into the console dialog, is the GA object returned?

          Aaron

  • http://www.brianswanick.com/ Brian Swanick

    This worked really well, thanks for the info!

  • Robert Essien

    Great detailed article! Unfortunately like Joanne G, it’s not tracking for me. Used exact code and GA setting from this article. Any ideas?

    • https://www.impression.co.uk aarondicks

      Hi Robert. Where in your HTML is your GA code? Are you getting any errors in the browser console when this is firing? Aaron

      • Robert Essien

        Thanks for your reply Aaron! I’m using Super Simple Google Analytics WP plugin – checking the source code it’s just before the closing head tag. Yes in the Browser Console I’m getting an error when submitting forms “ReferenceError: ga is not defined”

        • https://www.impression.co.uk aarondicks

          Hi Robert. What that means is you’re firing your event call before the GA code is running. Are you definitely using Universal analytics?

          https://support.google.com/analytics/answer/4457764?hl=en-GB

          If you are, then it’s to do with the priority in which you’re loading the scripts on to your website.

          Hope this helps?
          Aaron

          • Robert Essien

            Thanks Aaron! Yes that link helped me realise that the plugin I’m using was inserting the old analytics code and not universal anayltics. I’ve changed plugin, which should hopefully solve the issue now. Thanks again for your help – much appreciated!

  • Hemilton Tuco

    Thanks!!! Worked perfectly!

  • Chad Warner

    Thanks! I used this for the contact form on a landing page.

  • http://www.xenonis.nl/ John-Pierre Cornelissen

    Weird

    This original code stopped working, it produced the error “ga is not defined” again. Ihad to replace the first part to get it working again.

    Original (stopped working)
    on_sent_ok: “ga(‘send’, ‘event’, ‘category’, ‘action’);”

    New one
    on_sent_ok: “__gaTracker(‘send’, ‘event’, ‘category’, ‘action’);”

    Not sure when this happened, maybe after an update of the yoast analytics plugin.

    • http://www.dangelos.it/ Tiziano D’Angelo

      Thanks a lot, I have the same issue, but the error keeps going: __gaTracker is not defined

      • http://www.xenonis.nl/ John-Pierre Cornelissen

        Hi Tiziano, after writing the above I found out that it indeed was caused by an update of the Yoast Google Analyitics plugin. Recent versions (I use the most recent v5.2.8 version) use __gaTracker which you can see in the code they insert in the source code of the page.

        • http://www.dangelos.it/ Tiziano D’Angelo

          Sorry John-Pierre, you are indeed right. My CF7 form had already __gaTracker while I thought it was ga.
          I checked the script code and it has indeed __gaTracker while on Analytics admin the script code shows ga.

  • http://www.businessa2z.co.uk/ businessa2z

    This is an absolute pain to setup with a catalog of issues it begs belief that google makes something so fundamental to their product so difficult to setup. Do you have any examples of tracking success with this particular goal setting using WP and CF7 ?

  • Phillip Lind

    Hello,

    Thanks for a great article!

    I just did these things, but cf7 dosen’t show me the “message sent” anymore – and the data in the form dosen’t reset.

    And furthermore i can’t see if it shows the goal in GA.

    The site is: isoteamet.dk

    I made attached some screens.

    Hope you can help me out here :)

  • http://www.madalana.com/ Thibaud CLEMENT

    We encountered the same problem as many people, i.e. the “Thank you” message was not appearing any more as soon as we were pairing the contact form with Google Analytics.

    Here is how we solved it:

    1. We made sure we used a double quote between on_sent_ok and __gaTracker (thanks @aarondicks:disqus for your help on this)

    2. We replaced ‘sent’ by ‘submit’ in our code.

    Here is the code we ended up using:

    on_sent_ok: “__gaTracker(‘send’, ‘event’, ‘Contact’, ‘Submit’);”

    Hope that may help someone.

  • http://www.remi-bonnaud.fr Rémi Bonnaud

    Hi,

    I am kind of lost after testing 10 differents codes and goals as I have no conversion data in my Google Analytics.

    I am going to try exactly what you said in this article and hope it works.

  • Keesjan Deelstra

    Hi, do you guys also know of a way to collect the GA Aquisition sources to the emails send? I found https://wordpress.org/plugins/contact-form-7-analytics-by-found/ but that one is not for universal analytics. I did found a tutorial a few days ago but cannot find it anymore ;-( Something with hidden fields.