Event Tracking in Google Analytics Explained for Non-Coders

You just spent a bunch of money and time building out some cool new stuff on your site, but how do you make sure your visitors and interacting with it? Reader, meet Event Tracking; Event Tracking meet the reader.

I’ll say it upfront: This is a long post. I’m going over how to do event tracking in Google Analytics. For those of you who aren’t developers, get ready because you’re going to touch some code. Don’t freak, it’s actually really easy and you can learn a lot of great stuff. Also, here is a great resource that explains all the HTML Events with live demos - HTML Event Attributes.

The reason the post is long is because I use all real examples on ways to use different HTML events for tracking. I could explain it in one liners like “onchange fires the moment when the value of the element is changed” but for non-coders that might be hard to digest or think of why they would need it.

That said, there are a ton of HTML Events not mentioned here, either because their require a lot more code or because we wouldn’t typically use them for Google Analytics Event Tracking.

Event Tracking Background

In HTML you can add events that trigger javascript and make something happen. That something could be a prompt, an alert or in this case push information to Google Analytics!

Setting up

We’ve actually been asked multiple times how Google Analytics needs to be configured to receive events. Good news, everyone! There is no additional setup required in Google Analytics, just have your GA code on the page and add the gaq.push code below to the HTML events outlined in this post and BOOM you’re tracking, baby!

Note: in the free version of Google Analytics you are limited to 10 million event triggers a month. This is way more then enough for most sites but can get used up quick if you add a lot of onmouseover and onscroll events.

Event Tracking Code Structure

_gaq.push([‘_trackEvent’, ’Category’, ’Action’, ’Opt Label’, Opt Value, ’Opt non-interaction’])

‘_trackEvent’ - This is a JavaScript method that starts out the array.

’Category’ - the category that you want to show up, use something broad like external links, social links, images, videos, or form.

‘Action’ - This is the action that occurred; something the user did that you are tracking. For the ‘Action’ property use clicked, submissions, copy or whatever you are tracking from the user.

‘Optional Label’ - This is an optional field you don't need anything, but when you start tracking a lot of stuff you want to be able to segment it out. For this property think of it like a specific category for example, facebook, box 2, or headline picture.

Optional Value - This is a number value for the thing you are tracking. There is no need to put quotes around the numerical value because its a number.

‘Optional Interaction’ - This one is a little tricky, it’s a Boolean value which just means it can be either true or false. It’s default is false, so if you don't put anything it will be false. False means it won’t touch your bounce rate, but true means that it won't count that visit as a bounce.

Let’s say you have a landing page and the goal of that landing page is for people to come and download a whitepaper, when people come get your paper and leave that’s not a bounce so don’t count it as one.

Here are a couple examples:

_gaq.push([‘_trackEvent’, ‘button’, ‘clicked’]);

_gaq.push([‘_trackEvent’, ‘form’, ’focused’, ’row 2’,5]);

_gaq.push([‘_trackEvent’, ‘form’, ’submitted’, ’contact us’,, ’true’]);

For more examples about how to name your events check out Chris Le’s old post: Event Tracking Naming Strategy

The HTML Events

How can I tell if people are interacting with my site and clicking on the links?

onclick – This event fires when you click on an element, doesn’t even have to be something that you would click on. It can be a link, button, or image.
1. Use this for tracking clicks on links, buttons (like sign-ups), and adding the _link method for doing cross-domain tracking. Whenever you want something to happen as a result of a click (like firing the GA code) use this.
2. Other questions this answers:
  1. How many people click the different tabs in on my ecomm site?
  2. How many people click on the 1st carousel item?
  3. How many people click on a certain button?
3. <button type="button" onclick=_gaq.push([‘_trackEvent’, ‘button’, ’clicked’, ’contact us’,, ’true’])>Contact Us!</button>
onmousedown – This event fires when a user clicks down on an event.
1. This can be good for tracking amount of time people press down on a button but then get cold feet and don’t follow through. For example, you can press on a link and then move your mouse off of it so you don’t release on that link which would result in you not going to that link’s destination.
2. Don’t use this onmousedown when you actually want onclick. Mixing these two up could result in inflated data.
3. <button type="button" onclick=”_gaq.push([‘_trackEvent’, ‘button’,’pressed’, ’contact us’])”>Contact Us!</button>
onmouseup – This event is the opposite of onmousedown. Unlike onmousedown, this event fires when the mouse button is released. This can be a safer bet since you can’t inflate the numbers.
1. If you wanted to see how many people were clicking on something then pulling away you just compare onmousedown with onmouseup.
2. <button type="button" onclick=”_gaq.push([‘_trackEvent’, ‘button’,’click-released’, ’contact us’])”>Contact Us!</button>
onmousemove – This event fires when you enter an element and move your mouse. Anytime you move your mouse, if the x & y coordinates change then the event will fire. It gets pretty crazy so I would use this sparingly. Remember you are only allocated have 10 million events triggers a month and if you have a highly trafficked site using onmousemove can use that up soon.
1. If your site has interactive sections, such as a 360 view people can shift to check out all kinds of different views, you could use onmousemove. (Hat Tip to @ziesslerk for that example)
2. <img src="/images/pulpit.jpg" alt="my image" width="304" height="228" onmousemove=”_gaq.push([‘_trackEvent’, ‘image’,’moved over’, ’contact us’])”>
onmouseover – This event goes off when you put your mouse pointer over an element. Unlike onmousemove, onmouseover will only track once, so you won’t receive a flood of coordinates from the mouse being moved.
1. Use onmouseover to see if people are scrolling over certain links or images. Let’s say you have a signup box that’s not getting the love it deserves. You can set a square around it and then see if mice entering that element.
2. <img src="/images/image.jpg" alt="my image" width="304" height="228" onmousemove=”_gaq.push([‘_trackEvent’, ‘image’,’moved over’, ’contact us’])”>
onmouseout – This event gets triggered when the user moves the mouse pointer out of the element you are tracking. It’s the opposite of onmouseover.
1. You can track the time that someone interacts with a picture that zooms by starting a javascript timer when they mouse over it and stopping it when they move the mouse off it.
2. <img src="/images/image.jpg" alt="my image" width="304" height="228" onmousemove=”_gaq.push([‘_trackEvent’, ‘image’,’left image’, ‘image 1’])”>
oncontextmenu – This event occurs whenever the context [right click] menu pops up.
1. This will give you an idea of user behavior, why are they right clicking on your content? Do you have awesome pictures that people are right-clicking on and saving? Look at your content and the menu of a browser and try to tie them together.
2. <img src="/images/image.jpg" alt="my image" width="304" height="228" oncontextmenu=”_gaq.push([‘_trackEvent’, ‘image’,’context menu’, ‘image 1’])”>

Tracking with Keyboard commands

The onkeyup and onkeypress attributes can be used within ALL HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

onkeypress – This event fires when a key is pressed and continues to fire while its pressed down. I haven’t seen any great uses for this event in tracking sense. Also, in the case of tracking it’s pretty much the same as onkeydown.
onkeyup – this event triggers when a key is released and is a safer bet than the onkeypress & onkeydown because you can’t release a key for a while (you can hold down a key for a while).
1. One way I can see using this is to track how people navigate your site. Do your visitor’s tab [key] around and you use Page Up & Page Down or the arrow keys to scroll? You can also see how people use your forms do they click or tab on the boxes.

How are people interacting with my forms?

onfocus – This event occurs when the form box gets active by someone clicking or tabbing on to it . This is great for seeing what people clicked on and how they interacted with your forms.
1. Use this in any of these HTML elements: <label>, <input>, <select>, < textarea>, and <button>
2. <input type="text" name="firstname" onfocus="_gaq.push([‘_trackEvent’,’form’,’focused’,’name’])">
onblur – Similar to onfocus this event occurs when a form element loses focus meaning someone clicked off of it.
1. You can really learn a lot by seeing what boxes people are stopping and leaving at (the one people leave at will have the low numbers).
2. <input type="text" name="firstname" onblur="_gaq.push([‘_trackEvent’,’next input’,’focused’,’name’])">
onchange – The event fires when the content of a form element changes. This can be used for forms, checkboxes, and radio buttons.
1. This can show you if your forms are complicated and people need to go back and fields that they might have entered wrong. It also shows how indecisive people can be.
2. This can also show you if people are unchecking your newsletter sign up that was defaulted to check.
3. This can be added to any of these HTML elements <input>, <select>, and <textarea>
4. <input type="text" name="firstname" onchange="_gaq.push([‘_trackEvent’,’changed box’,’focused’,’name’])">
onsubmit – The event occurs when a form is submitted. Do you want to track form submissions that are actually submitted and not just filled in and abandoned? Use this.
1. Note this is added to its own input field.
2. <form name="input" action="html_form_action.asp" onsubmit=”_gaq.push([‘_trackEvent’,’form’,’submitted’,’name’])”>
  1. <input type="text" name="user">
  2. <input type="submit" value="Submit">
  3. </form>
onreset – This event triggers when one of your users resets the form. Resetting it could mean it’s complicated or too long. And people don’t like things that are complicated or too long.This can also be an indicator that the logical order for the buttons is backwards. If the event data in GA shows people interacting with all of the other fields, then hitting reset, they're likely trying to submit and hitting the wrong button. So fix up your forms.
1. You add it in to the form tag just like onsubmit.
2. <form onreset=”_gaq.push([‘_trackEvent’,’form’,’submitted’,’name’])”>
3. Note: This is not supported in HTML5
onselect – The event occurs when the user selects[highlights] some text in the boxes (aka input fields).
1. This can be added to the <input> and <textarea> fields.

Next Level Fun Events

onscroll - This event fires every time the window is scrolled down. But it tracks every increment of scroll. For example every click down the scroll bar and every scroll notch of the scroll wheel.
1. This can really inflate your numbers unless you set a way of tracking increments based on window size. But that's a topic for another post.
onerror - This event occurs when an error happens.
1. You could use this for tracking high quality pictures or other content that might cause an error.
2. <img src="image.gif" onerror="_gaq.push([‘_trackEvent’,’image’,’failed’,’bigImage’])">
onabort - This event fires when when someone stops something from loading. You can attach this to the attributes of big images or media.
oncopy - This event triggers when someone copies something from your site.
1. This is a good subtle way of seeing if people like your content.
2. This is added to the tags with information you want to track. For example, you can add this to the paragraph tags.
3. <p oncopy=”_gaq.push([‘_trackEvent’,’text’,’copied’,’paragraph 1’])>block of text</p>
onresize - This event goes inside the body tag and is triggered when someone resizes the page.
1. This could show you if there is a problem with the way your content is laid out and causing people to have to adjust the window size.

Try these events out on your site today! It's easy and can provide tons of great feedback to see how your visitors are using your online content. If you have any questions feel free to ask them in the comments or tweet @nicomiceli.

Do you have any cool ways that you used event tracking? Share them in the comments! If they are really cool, I'll update this post with your gems.