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.

This code will only track the form submissions



This code will only track the tel link clicks



This code will only track both the form and the tel link clicks



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