I am writing this post because I had some frustrations getting my head all around this, followed so many tutorials online that didn’t work but after much trial and error I have a way that works for me and hope it will help you, learn how to setup event tracking for google analytics.
What are we trying to do?
We want to track in Google analytics whenever someone submits a contact form or clicks on telephone href link. We want to see how many submissions/clicks we have had and on what pages.
What have we set up already?
I assume that you already have analytics set up on your website and it is tracking your visitors.
Process
Step 1: Setup the events in analytics
So I am going to show you two ways to do this – the first is a plugin that makes this all so simple and the second how to add the code yourself in case you can’t add a plugin because it is not a WordPress website or you have some javascript issues.
Method 1 – plugin
Go over and install the plugin Gravitate Event Tracking – https://wordpress.org/plugins/gravitate-event-tracking/ – which is a lightweight plugin that adds all the code for you.
Next, go to Settings > Gravitate Event Tracking to set up the tracking.
Above you can see the settings page. You can disable or enable the tracking you require. Let’s just look at one to give you an idea of how it works and then you can replicate this on all or even create your own unique ones.
“All Form Submissions” will track all form submits on your website. You can see that the selector/element is set to “form”. You can change this to a specific form by adding the form class or id for example “form#diviform” and it will only track the form with the id “diviform” – if you want to track ALL form submissions, just leave it as it is. As we have a login form and other forms like our support tickets we ONLY want to track the contact form submission so we need to refine the selector. I have added the id “contact” to our module that has the contact form – you can see the way it is setup below in the screenshot of the code inspect – the form is housed in the div id called contact.
Therefore, to select only this form we want to change “form” to be “#contact form”.
Go ahead and save this now.
Next, we have the Category and Action which can be anything – it makes sense to keep it as best describes what the event is – this needs to be the same in analytics to properly track (see below). The Label section is not a requirement so just leave this as it is or blank if you don’t need to use this. We can get onto this in another post if we want to.
Ok, so I have an event fire that tracks the form submissions on the contact form “#contact form”, with the Category called “Form Submits” and the action called “Form Submitted”. This is great and it will now speak to analytics.
If you are using the plugin you can skip to the section where we setup analytics or read how to do it manually below.
Method 2 – Manually
I am going to put the jQuery code below for the form submission, then I will show you how to do the same for a telephone number click (which you can use to replicate for any other links like email click etc) – at the end I will put the whole code
NOTE:
– Change “UA-xxxxxxxxx-x” to be whatever your tracking number is in analytics
– We have added the code “event.preventDefault();” which stops the default functionality (like form submit for link click) – this allows us to send the tracking code, after 300 milliseconds we then let it carry on as normal.
So as you can see it can be coded but I find the plugin way easier and it is lightweight so don’t worry about it slowing down your site. I thought it would be useful to include the code for anyone wanting to do it manually. This is for advanced users really, a level of jQuery knowledge should be known to change the code to work with the setup that you want.
Step 2: Setup the events in analytics
Ok, so now we have the events firing and sending the data to analytics, we now need to set it up there to receive this information.
Go to your analytics account and click on admin > goals. In there you will see all the goals you have setup – you will most likely have none set up. Click on “New Goal”.
Select custom and press continue.
Next, add the name that describes the goal, select event and press continue.
On the next step you need to add the same category and action that you specified on your website – this way when your website speaks to analytics and says “I have had a trigger on the contact form, it has the category “xxx” and the action “xxx”, analytics knows it is referring to this one. Don’t worry about “verify this goal” as you have just added the tracking code on your website so it is unlikely that it has been sent to analytics yet.
Press save and that’s it – you now will have tracking on the contact form when it has been submitted.
Step 3: Test the event
It takes a while for analytics to start to show the information on your dashboard, so how do we test this? Navigate to Real-Time > Events. Here you can see the real-time tracking of your events. Because I am using the plugin for this example and have not disabled any of the trackings you can see some of the events being tracked (even though I have not added them as goals) – you can see Resized, Links and Scrolled (refer to gravitate admin settings).
So how do I test the form? Go to your contact form and make a form submission whilst on this real-time events page. Once you have made the submission, wait a few seconds whilst the event is being tracked and you will see it appear like the screenshot below. As you can see it has the name of the category and the action (these should match up with the goal you set in order to translate this to statistics).
If you see this then it is all working. If you dont see this appear within 10-20 seconds then there must be an issue.
Debugging
If you cannot see the test there may be a javascript error on your site, try disabling the plugins and child theme. You can try coding it yourself (using the example above), you can add “console.log(“submitted”);” just after the line “jqForm.submit(function(event) {“. Then in inspect console when you submit the form you should see the word “submitted. This means that the code should be firing correctly, if you dont see the word “submitted”, it is most likely a js error above this code.
Step 4: Statistics
Now you have it all setup and working, within a week or so you will start to get the data collaborated. By this time analytics will have enough data to show you information.
Go to Conversions > goals > overview to see an overview of all your goals. In the screenshot below you can see a very simple example of the form submit I have done above showing one submission for the week. I can see the goal name that was completed (form submits) and I can see where it was completed (contact page)
You can dive much more into using the data and there are a number of great resources out there, we would love to hear of any that you use or any that might of use for others. This is just setting it up – the rest is an adventure waiting for you to start!
Hope this helped 😀
Please let me know if I need to explain any of this in more detail
I would like to do this for a DIVI EMAIL OPTIN form. Can you help me out?
Hello!!!! It does not work for me with Google Analytics 4 also known as GA4. Help!
Have you got an update for this when using G4 properties?
As the message states below the form trigger once the form submits button is triggered not whether someone has actually filled in the data. (This is using the divi form) Thanks
Good article, but the form tracking doesnt work. It tracks every time the user clicks the Submit button, even if they havnt filled required fields. How can we make it so that it only tracks on successful submission?
It looks like the jqForm.submit() functiopn fire regardless.
Have a test and youll see what I mean.
Thanks
It should work only when the form completes (submits ) what are you using for your form?
Hi Divi. Thanks for your quick reply! 🙂
We’re using Divi’s contact module.
Hi Divi. Is there any update on this? I cant get this code to work with the Divi theme andDivi contact module. (detecting clicks on phone numbers works great, but just not the form submission bit). Thanks! 🙂
Sorry, not sure – we have not had time to look into this as super busy with updates for our plugins. If we get some time we can check but need to prioritize our time for the plugins and customers. Sorry
Hi,
I have a similar problem to yours with the Divi contact form module with the divi theme. Were you able to resolve this?
I get this weird error Uncaught TypeError: jsForm.submit is not a function
and the GA event also fires regardless of form submission.
This is great, but is there a way to only track successful contact form submissions? I’m able to do this with Contact Form 7, and I need to be able to with Divi forms too.
It should only track those as it sends the data on form submit. If not successful, submit won’t fire.
Hello, great tutorial thank you.
I can see the stat in events but not in goals.
Any idea to make it show in goals or should i just wait an undefined time ?
I think it takes a little time for it to come through. Check back in the next few days and let me know if it shows.
I would like to know if it would be possible to place a code to measure the clicks of any link/element. Your article is so brilliantly written, that only the first time I was able to do this measurement – on other pages over the months I found nothing more sensible. Thank you!
Thank you for the kind words! Please share the article.
To confirm you question, you want to measure how many people click the link? This would require some more development and even database code which is quite complicated. I would not really recommend it either as it could clog up your WordPress database and it will become huge and slow.
Maybe someone else has a good solution?
Thank you for the article. Works properly, but I have a question – the console displays yes:
event sent ok
XHR failed loading: POST
I’m asking for information on what this could mean?
This error has to do with Ajax I think not working. I believe it is when the page gets reloaded before the Ajax can fire. What are you adding this code on – a Ajax contact form?
Hi,
“I have added the id “contact” to our module that has the contact form – you can see the way it is setup below in the screenshot of the code inspect – the form is housed in the div id called contact.”
I don’t understand that part, I’m not familiar with Divi. Please can you explain where to do that more precisely.
Thanks in advance.
Regards
Not sure how I can explain it easier here. I suggest using the plugin that I mention and look at the screenshots above to copy
Fantastic code! Wondering if you’d need to change anything to track contact form submissions when they’re set to add the submission to a newsletter. In this case, submits are sent to MailChimp but the events are not showing up and there’s no console message.
Btw I love your theme design on the Divi Engine site.
Thank you for the kind words and the comment! Can you email he***@di********.com with the URL of your website where the newsletter sign up is, will try see what can be done
Hi thanks for this, I’m trying to do this manually as outdated plugins worry me a bit aren’t they a potential security flaw?
I want to track email clicks and phone clicks, but it doesn’t seem to be working, any idea why?
jQuery(document).ready(function($){
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga(‘create’, ‘UA-xxxxxxxxx-x’, ‘auto’); // change UA-xxxxxxxxx-x to be your tracking UA.
$( ‘a[href^=”mailto:”]’ ).click(function(event) {
var href = $(this).attr(“href”);
var target = $(this).attr(“target”);
var text = $(this).text();
event.preventDefault(); // prevent the form from submitting so we can sent the tracking code, then continue with the submission later.
ga(‘send’, {
hitType: ‘event’,
eventCategory: ’email’, // add any name for the category
eventAction: ‘Clicked’ // add any name for the action
});
setTimeout(function() { // now wait 300 milliseconds…
window.open(href,(!target?”_self”:target)); // …and open the link as usual
console.log(“email clicked”);
},300);
});
});
$( ‘a[href^=”tel:”]’ ).click(function(event) {
var href = $(this).attr(“href”);
var target = $(this).attr(“target”);
var text = $(this).text();
event.preventDefault(); // prevent the form from submitting so we can sent the tracking code, then continue with the submission later.
ga(‘send’, {
hitType: ‘event’,
eventCategory: ‘Phone Number’, // add any name for the category
eventAction: ‘Clicked’ // add any name for the action
});
setTimeout(function() { // now wait 300 milliseconds…
window.open(href,(!target?”_self”:target)); // …and open the link as usual
console.log(“tel clicked”);
},300);
});
});
True. Did you change the analytics code “UA-xxxxxxxxxx-x” to be your tracking UA?
Hi, thanks for the post, but I cannot see the code that would track phone calls, that I could enter manually, and the plugin seems outdated 🙁 Could you specify Step n. 2 in more detail?
Thank you!
Hey Jan,
Thanks for the comment – yeah the plugin is out of date but I have not had any issues with it and it works so well so keep using it on some sites. It is easy enough to code it.
The blog post above has some formatting issues so the code is not showing, I will fix this and let you know (tomorrow or the next day as been away for 4 days so need to catch up).
Is this ok?
Hey Jan,
We have fixed the formatting issues – please let me know if it works for you now?
Hello, thanks a lot for your response. I will test it and let you know how it works! I really appreciate your help!
I can confirm that the plugin works well and is helpful. Thank you.
Should be possible to use this for tracking clicks on outbound links?Do you have an example?
Thank you!
I would have to write a tutorial on how to do this manually but I know the plugin referenced in the post allows to track this. They add a class to the link called “.gtrackexternal” and then track it there. If you are using the plugin go the settings page and check for “All External Links”.
If you know code and want to do it manually, try adding this to the start so that it adds the CSS class gtrackexternal:
$('a').each(function() {if ((!host.test(this.href) && this.href.slice(0, 1) != "/" && this.href.slice(0, 1) != "#" && this.href.slice(0, 1) != "?" && this.href.slice(0, 10) != "javascript")) {
$(this).addClass('gtrackexternal');
}
});
Now you can use this to track the external links
Does this help?
Hi There,
I went to the plugin page and it has a big warning about compatibility issues, due to lack of updates etc
Do you know if its ok to use with recent versions of wordpress and divi?
Hi Kaite,
I had not seen this before – not sure why.
It works perfectly and actually used it last week so still think it is good. Alternatively, you can use the custom method above.
Thanks for the comment 😀