A JavaScript Google Analytics event tracking plugin

In todays online world it is common for web developers to improve their websites by enabling a large amount of interactive functionality. Often this takes the form of JavaScript applications that no longer adhere to the simple page-by-page model but instead act more like a desktop program (Gmail, YouTube and Twitter for example).

If many interactions are happening in a single page without the URL changing, this experience is great for the user but can prove problematic when tracking for analytics. Traditionally analytics software such as Google Analytics is included in every web page of a site and each time a page is downloaded it is tracked back to Google. Obviously if the visitor never leaves that URL, this causes the aforementioned issue.

Google have a solution called "Events" that allow a developer to programmatically track an interaction via JavaScript. Events breakdown into the following components:

  • Category
  • Action
  • Label (optional)

For example, to track a customer checking out of an online store through a JavaScript form interface the following events may be used:

Format: Category / Action / Label

  1. Checkout / ViewCart
  2. Checkout / Country Selected / USA
  3. Checkout / Details Provided
  4. Checkout / Order Confirmed

From these tracked events, reports can be generated or funnels (called "Goals" by Google) setup to track conversion rates.

The method that Google provides to programmatically track an event looks as follows:

_gaq.push(['_trackEvent', 'Checkout', 'Country Selected', 'USA']);

This is simple enough, however, it is not wise to litter application code with calls to _gaq. If the Analytics script does not load due to a network issue this variable will be undefined and cause a potentially serious error. Also, if you someday remove Google Analytics it may be problematic to remove all occurrences of this throughout your code base.

For this reason I have created the following wrapper around the tracking code with a simple API and multiple advantages that can be plugged into any JavaScript application.

An effective LESS.js file include pattern

In the previous article I gave an introduction to CSS preprocessors and explained the potential advantages of using this technology. One of the mentioned examples was the ability to break down your stylesheet into multiple files and join them together to create a single final CSS file. This method provides a clean hierarchy for managing stylesheets.

My preferred pattern for the architecture of a preprocessed stylesheet is as follows:

  • Settings
  • Libraries
  • Modules
  • Views

First include the settings for my project (colours, fonts etc. in variables).

Secondly library code you have, for example, reset.css should be included.

Next I include my global styles and separate them into manageable modules. e.g. Links, Forms, Tables.

Finally I include my view related code for specific web pages and any overrides that are required. For example, a "view" could be the website home page as it usually differs from the rest of the website.

Example LESS.js Stylesheet

# screen.less

// Import settings
@include "settings/global.less";

// Import libraries
@include "libs/reset.css"; // Notice the .CSS extension

// Import global modules
@include "modules/core.less";
@include "modules/links.less";
@include "modules/forms.less";
@include "modules/site_header.less";
@include "modules/site_footer.less";

// Import views
@include "views/home.less";
@include "views/contact.less";
@include "views/admin.less";

Although the syntax is in LESS, this will also work with SASS using the import command

LESS/SASS: The Advantages of CSS Preprocessing Explained

CSS has a very powerful syntax but can easily become very verbose when working on non-trivial projects. In recent years the need to solve this problem has brought to life the concept of the CSS preprocessors such as SASS/SCSS and LESS.js. The former is written for the Ruby programming language whilst LESS is compiled using JavaScript.

A preprocessor allows additional leverage over CSS by providing additional syntax that delivers the following advantages:

  • Nested syntax

  • Ability to define variables

  • Ability to define mixins

  • Mathematical functions

  • Operational functions (such as “lighten” and “darken”)

  • Joining of multiple files

SCSS and LESS have very similar syntaxes, with SASS being a slight variant on SCSS. The similarities between them allows a developer to switch seamlessly if need be. In the following demonstration I will focus on the LESS syntax but all of the concepts can be transferred to the Ruby world.

Find and Replace across project with VIM

Many IDE's provide a function to find and replace across files in your project, of course VIM can do this too by using the "arg" commands, without switching to the terminal!

There are 2 steps to the task, first we provide a set of files for the replacement to happen on. The second part is telling VIM what to replace. Take a look at this example:

:args javascript/*
:argdo %s/foo/bar/g | update

Running these 2 commands in VIM will loop through all files in the "javascript" folder and replace all instances of "foo" with "bar".

Send command to all iTerm 2 panes

In the absense of having any time/thing to write about in the last months, here's another quick tip.

iTerm 2 is a replacement application for the default terminal on OSX. It's highly popular due to allowing advanced features such as tabs, split panes, simpler theming and custom keyboard bindings.

iTerm 2 split panes

If you find the need to enter the same commands into multiple panes at the same time, simply hit "Command + Shift + I". You will recieve a small notification about sending input to all panes, the next text you type will physically begin typing into all open panes for your current tab and is executed once you hit "⏎ Return".

Pretty neat!

I find this extremley useful when I have 4+ panes open in a working state, I don't want to close them but I need to reload my bash profile because of some new changes, so I simply hit "Cmd + Shift + I", type "source ~/.bash_profile", hit "Return" and I'm done.

The "ctrl + alt + delete" of RVM

When ever you are trying to install a Ruby, package or anything else with RVM it is not that uncommon to run into strange issues. Just like when you first go to smashing the Ctrl + Alt + Delete keys on Windows, I have found through experience that the first port of call should be to take the following simple steps.

For an example, imagine you are trying to install Ruby 1.9.2. I recently had to use this approach to get version 1.9.2 installed on OSX Lion.

Note: On OSX, Make sure you have either the GCC libraries or XCode 4.2+ installed to work best with RVM


  1. rvm get head
  2. rvm reload
  3. rvm remove 1.9.2
  4. rvm install 1.9.2

First we update RVM, reload the environment (important) remove whatever broken ruby/package you are trying to get working. Finally, Install it fresh. 

You would be suprised how often this resolves issues. Give it a try next time you are having issues.

Show git branch and directory in your shell

It's really handy to be able to see the current git branch in your shell prompt along with the directory name. This for a start removes many "git branch" commands from your history.

To enable this feature, you have to edit your .bashrc file on Linux or the .bash_profile on Mac. These files usually exist in your home directory (The default directory when you open a shell) and are executed when the shell logs in. You can edit this file with any text editor such as Gedit or Textmate.

Add the following 2 lines after any existing SP1 variables and then save your file. Open a new shell to see the changes.

export PS1='\[\033[1;36m\]\u at\[\033[00m\] \[\033[34m\]\W\[\033[31m\]$("__git_ps1")\[\033[00m\]  >  '

SP1 colour example

Changing colours

If you would like to update the colours of the prompt, then visit this article to get a grasp of the basics and you can find much more on Google from there.

© Blake Simpson, 2012 – 2018