Google Analytics Event Tracking on Form Submission

Event Tracking in Google Analytics is a very useful way to analyze and monitor certain user behavior.

What is Event Tracking?

First thing first, certainly start with Google documentation on event tracking. Google does a great job explaining everything on their documentation. Basically, Event Tracking allows Internet Marketers to keep an eye on any mouse-click on the webpage. Say, you have link, or a form, or an image where you would need to track how many times, the specified html element receives a click.

Uses of Event Tracking

Here are some typical uses, I’d use Google analytics event tracking for:

  • To track how many outbound visitors am I sending to an affiliate site
  • To track effectiveness of copy on the hyperlink – e.g. Get 10% Off Now or Get Free Shipping
  • To count form submissions on Google Analytics
  • To test effectiveness of an image – would image A urge visitors to click on it or image B
  • PDF or White Paper download counter – simple +1 counting
  • Well, not sure has it these days, but oh well, if you have a Flash driven websites, you will find it quite useful as well.

Event Tracking on Google Analytics

events-on-google-analytics Within Google Analytics, Events can be accessed under Content > Events.As you can see on the image on the left, under events we can drill down to top events, pages or the events flow.Overview screen summaries the information.For our purpose, let’s start with top events which would show the most active events within the Google Profile.

As the image below shows, the top events within any given time period would be listed on Google Analytics where we can see the events category, total events, unique events, event value and average value of the event.

top-events-on-google-analytics

 

Event Tracking on Form Submission

Now, let’s focus on real life example. Say, you have a form which you would want to track in Google Analytics.

There are 2 parts of it – Part A: Generate the Event in Google Analytics and Part B: Use the JavaScript to tie this newly created event with the form we want to track.

Part A: Generate the Event in Google Analytics

  1. Login to Google Analytics
  2. Go to Admin and you will see all the profiles. Select the profile where event needs to be created. Most likely, the profile is called “Complete Website”. You must have the administrative access.
  3. Click on Goals. Click on +Goals to add a new goal.
  4. Now, select Event based Goal. On the next screen, you would need to enter a Goal Name while the Goal Type is already selected to be an event. Under goal details, you would need to select followings as suggested
    • Category – that matches – FormName
    • Action- that matches – FormSubmit
    • Label- that matches – FormSubmissionCompleted
    • Value – that matches – 1
  5. Value can be accepted from the form or can be overridden in #2 item of Goal Details. Either way is fine.
  6. Hit Save. Aha, big task completed.
  7. A minute to get technical now
    Google Events uses _gaq.push to capture what we just created, here is a typical structure.

    _gaq.push(['_trackEvent', 'category', 'action', 'label'])
  8. Finally, the screenshot of the page we were working on #4. To edit an event, just click on the event name and you will be on the following screen:
    admin-events-with-goals-on-google-analytics

 

Part B: Tie the Event with the <form> element in HTML
The HTML of a form typically looks as follows:

<form id=”form-name” name=”form-name” action=”submission-url-goes-here” method=”post”>


</form>

Now, it’s the time to tie the Form Submission with the Events we built in Part A.

Now, let’s build our _gaq.push as follows:

onSubmit="_gaq.push(['_trackEvent', 'FormName', 'FormSubmit', 'FormSubmissionCompleted']);"

With this, the <form> html should look like:

<form id="form-name" name="form-name" action="submission-url-goes-here" method="post" 
 onSubmit="_gaq.push(['_trackEvent', 'FormName', 'FormSubmit', 'FormSubmissionCompleted']);">



</form>

Please note the values we are passing in the javascript should match the values we created in within the Goal, however, the values can be anything.

Use onClick on or onSubmit?

The first question I have been asked why it is on onSubmit and not on onClick on the submit button. It depends on the purpose of your event tracking. If you are indeed trying to count how many times the submit button is clicked-upon regardless of successsuful submission of the form, they button is the way to go; however given all forms have some form of client side validation (to make sure name, address, phone are not empty as well as email address is valid and so on), if you are trying to track how many successful form submissions have taken place, apply the javascript code on the form submission. That’s all there to it.

I understood the Form Submission, but what about tracking the link click?

Now, very easily, anyone can figure it out how to do if you want to capture a link click instead of a form submission. In other words, you are trying to capture in Google Analytics(GA), how many times a particular link is clicked upon, simply move to onClick event.

So html for typical link looks like:

<a href="target-url">Anchor Text<a>

All you need to do is add the _gaq.push javascript code on onClick(), so the html looks like:

<a href="target-url"
onClick="_gaq.push(['_trackEvent', 'FormName', 'FormSubmit', 'FormSubmissionCompleted']);">Anchor Text<a>

That’s it on _gaq.push with _trackEvent method. Now, all you need to do sit sit back watch Google Analytics capture data so you can analyze.


Possible Use Case for Events Tracking

What are various ways you can think of use Event Tracking on your website? Please share those with me, so I can learn from your experiences.

 

 

About Ujjwal Bhattarai

Ujjwal is an engineer by education, a programmer by hobby, and an internet marketer by choice. Other than 1 minute chess, and biking, his passion includes SEO, SEM/PPC, CRO, and Web Development. As a lifelong student of Internet Development, he is hopelessly addicted to Internet, and sincerely believes after fire, wheel, and decimal point, internet is the fourth most important invention in the human history. Catch up with him on Twitter at @uj2wal or at his Google+ .

, , , , , , ,

Leave a Reply

66,700 Spam Comments Blocked so far by Spam Free Wordpress

HTML tags are not allowed.