From MozillaWiki
Jump to: navigation, search

Though this is written for Webmaker, this guide can be used for any Mozilla Foundation website looking to add further tracking into your Google Analytics data.

Google Analytics Events Tracking

‘Events’ in GA are any interaction we want to track that isn’t recorded as a pageview (i.e. the user does something, or we do something interactive, but the URL the user is on doesn’t change). They are particularly useful for tracking what users do in interactive tools.

By default, GA records page loads which is fine for a static website, but everything else we want to track needs to be ‘logged’ as a custom 'Event' by firing some extra JavaScript.

Guidelines for tracking events

  • If in doubt, track more events rather than less.
  • Tracking events is cheap (just a few additional lines of code throughout an app) but it adds a wealth of data to our records.

Never track personal information

This applies to all GA tracking, but double check you don’t log any email addresses or user_ids in event descriptions for example (the module provided for this has some safety checks in it, but keep this in mind).

Distinguish between events driven by the user, and events driven by us

If an event is driven by us, e.g. displaying an alert or sign-up prompt with JavaScript, this should be recorded as a ‘non-interaction’ event because events are part of the bounce-rate calculation.

  1. If a user does something active on the site, like editing a page in Thimble, they should not be attributed as a bounced visit just because they stayed on a single URL while on the site.
  2. However, sometimes we want to record events for our analysis that are driven by us (such as displaying an alert, or auto playing something on a page), and as this is not driven by the user these are ‘non-interaction’ events.

Naming convention

Events have 3 levels of naming: category > action > label

This allows us to record quite granular data, and do all sorts of analysis later (e.g. complexity of popcorn videos made by referring URL)


Using our webmaker-analytics module, the category will automatically be set to the hostname (e.g. thimble.webmaker.org) to help us distinguish between similar events (e.g. Publish) across our tools.


The action field allows us to record what was done, e.g. "Set Font Size", "Show Hints" etc.


The label is an optional field to break the action down further, so the action "Set Font Size" could have the label "Large", "Medium" or "Small". And the action "Show Hints" could have the label "Enabled" or "Disabled"

If you're unsure on how we should name a particular event, feel free to ask adamlofting, or talk it through on the #webmaker channel in IRC.

Non-interaction events

An example of a non-interaction event would be tracking when we display the JavaScript Alert message "Are you sure you want to leave the page?".

Annotations (being a good GA citizen)

When you add new GA tracking like Events to any GA property, it’s helpful to add an annotation in GA so people looking at reports know why a new event suddenly appears/disappears in the data. If you have reporting access you can do this directly, or otherwise give someone who does have access a note of the change in tracking and the date it went live.

Dev Guide: How to track GA Events in your code

We have developed a bower module to simplify the process of recording custom events. The module, and instructions on how to use this can be found at: github.com/mozilla/webmaker-analytics