Development 33 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.

For those of you using Yoast’s WordPress SEO plugin, or those with implementations where the ga variable has been renamed, please note that you will need to reflect this new name in your function call. I.e. If you’re using Yoast’s excellent plugin, the line above would actually be this;

__gaTracker('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.

    • zgall1

      I used your suggestion but my goals are still not registering. I have tweeted @aarondicks:disqus in the hopes that he might be able to take a look.

    • Aaron Dicks

      Thanks, Thibaud Clement, I’ve only just seen this comment. Thanks for explaining your solution here for everyone to see.
      Aaron

    • nm

      is Submit the name of your action?

  • 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.

    • Aaron Dicks

      Hi Rémi, sorry I didn’t reply sooner. Are you using any plugins that might mean you are renaming your GA object. For instance, if you’re using Yoast’s Analytics Plugin, the ga object is renamed to prevent it clashing with manual code insertions. Perhaps try using this new name for ga() -? __gaTracker()
      Thanks,
      Aaron

  • 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.

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

    Here is some trouble shooting information with issues I ran into myself when configuring this:

    1) In Google Analytics, make sure you have an ‘unfiltered’ view. I have for example a view that filters traffic from my own IP address, so whenever I test a contact form goal completion from my own computer, the goal completion won’t be registered in that view. Therefore, to test goal completion I also have an unfiltered view where the goal completion will be registered. Needles to say that when you look at your report you’ll need to look at the data from the unfiltered view!

    2) Verify that that the words you use for ‘category’ and ‘action’ in the contact from 7 settings are the same as the once you have entered in the Google Analytics Event conditions.

    3) If you use the WordPress Plugin Analytics by Yoast with the Univeral Analytics setting enabled, you’ll need to enter a code in contact from 7 settings that is different then the one mentioned in this article.
    This article says:
    » on_sent_ok: “ga(‘send’, ‘event’, ‘category’, ‘action’);”
    With Yoast Universal Analytics you need to use
    » on_sent_ok: “__gaTracker(‘send’, ‘event’, ‘category’, ‘action’);”

    If you’re unsure, have a look at the page source and search for the part where it says “This site uses the Google Analytics by Yoast”. If you see something like the following you’ll know you need to use the __gaTracker code.
    » (window,document,’script’,’//www.google-analytics.com/analytics.js’,’__gaTracker’)

    4) Again, if you use the WordPress Plugin Analytics by Yoast, there is an ‘ignore users’ setting on the general tab where you enter the WordPress roles that should be ignored. If you have entered your role there, e.g. administrator, and you submit the contact form while you are logged in to that WordPress website, then Yoast has stripped the Google Analytics code from the page. CF7 will trigger the on_sent_ok but since the analytics code doesn’t exist on the page it results in an error (you only see that in the console of your browser) so the goal is not registered. The only thing you see when that happens – or actually not see – is that you don’t see the CF7 confirmation message.

    I hope this helps solving most issues with CF7 and GA.

    Regards,
    John-Pierre

  • acg2891

    Hello,

    Thanks for your article. I am experiencing some technical problem with it though. If I add:

    on_sent_ok: “ga(‘send’, ‘event’, ‘Contact Form’, ‘sent’);”

    when contact form is sent, there’s no “Thank you message” like it used to be, therefore users think they didn’t submit properly. Not sure what to do and I am also wondering if when the contact form is submitted the url should change to something like example.com/contact/thanks

    This is the second time I try to add this code. First time I did the entire process described but nothing was tracked on GA either.

    Can anyone help, please? Really struggling here.

    Thanks very much, Alexandra

  • Guest

    I just want to say, that i also had the problem like the rest of you.. The Thank you message would not appear after i added the code.

    I ended up trying all kind of stuff. The thing that got it working for me, was to move the double quote one to the left, so it would not be placed before the closing tag ;

    my code ended up being:
    on_sent_ok:”ga(‘send’,’event’,’Contact’,’Submit’)”;

    or for people using Yoast

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

  • Jannik Boldsen

    I just want to say, that i also had the problem like the rest of you.. The Thank you message would not appear after i added the code.

    I ended up trying all kind of stuff. The thing that got it working for me, was to move the double quote one to the left, so it would be placed before the closing tag and not after.

    my code ended up being:
    on_sent_ok:”ga(‘send’,’event’,’Contact’,’Submit’)”;

    or for people using Yoast

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