Setting up Google Analytics

By March 23, 2016 August 3rd, 2016 Analytics
Google Analytics Superhero drawing by Indu Reddy

Why Google Analytics

Google Analytics is a godsend for marketers, webmasters, and consumers alike. Without it, website operators would be required to pay thousands (or in the case of larger websites, hundreds of thousands) of dollars for subscriptions to paid solutions like Adobe Analytics (formerly Omniture) or IBM Business Analytics. Make no mistake, those platforms are much more capable of capturing the nuances of web behavior. But for the average small to medium website, Google Analytics is perfectly fine.

Please note that this tutorial will be using the most recent version of Google Analytics, called analytics.js, which you should upgrade to if you haven’t already. If you’re using ga.js you’re not using the most recent version. The same rules apply though the syntax will differ.

Goals of Google Analytics

The goal of Google Analytics is, surprise, analysis of visitors behavior to allow for a) the optimization of a website or b) the strengthening of a conversion funnel, or c) understanding your customer. Below are some of the questions we’ll be able to answer after proper gathering and analysis of the data.

For the optimization of a website:

  • Where are the bottlenecks?
  • Which pages are most popular?
  • What is the load time of pages?

For sales conversions:

  • What are people buying?
  • What are the “Seller” pages (i.e., those that lead to sales)?
  • Where do people drop off in the conversion funnel?

For understanding users:

  • How are users finding the site?
  • Where are they located and what time do they visit?
  • How long do they spend on the site?

How it Works

Installing Google Analytics is the goal of this tutorial, but it would also be nice to understand how it works. By including the above script, we’re creating a javascript object, ga, that can be passed commands and parameters to capture the information we need. It does this by pinging Google Analytics servers, requesting a pixel containing our parameters and information, and receives the necessary pixel. It is this exchange, information for a pixel, that allows Google Analytics to process, categorize, and compile our data.

Setting Up Google Analytics

The beauty of Google Analytics is its simplicity; it was built with the novice in mind. All it requires is placing a small JavaScript script on your page, and calling a limited number of functions to capture various activities. It’s terribly difficult to mess it up, but this is a tutorial after all so I’ll explain step-by-step.

  1. Sign-up for Google Analytics here, or login to your existing account.
  2. Create a new property.
  3. Retrieve the snippet from Google Analytics, and paste it into the head of your site. (See pro-tip below)
  4. Sit back and relax! Google Analytics takes it from here and creates a new instance of Google Analytics.

Capturing Page views

Page views the absolute minimum information you should capture with your tracking. Do visitors make it past the landing page, or do they bounce? Since dwell (or time-on-site), bounce rate, and customer paths are by-products of page views, we thankfully capture those by default on any page with Google Analytics that requests a page view pixel.

The code:


ga('send', 'page view', titleOverride);

In the above example, we’re telling our ga object to send information regarding a page view (our command). The third parameter, which in my case is a variable called titleOverride, is unnecessary but makes processing your data a little easier. Without declaring a page name, ga will just take the current <title> tag as the page name. In some cases you’ll end up with stuff that makes sense to the site developer, SEO team, client services manager, etc., but which may be cryptic for the other users of Google Analytics.

For example, for SEO reasons, a title of an about page could be “We are Super Sales Agency, your go-to for Service A.” But, wouldn’t it be nice to just have, “About?” To that end, I usually override the default with something that is objectively easy to understand. For example:

function getPrettyName() {
  switch(document.title) {
    case 'We are Super Sales Agency, your go-to for Service A':
      newTitle = 'About Us';
    case 'Contact us for your solar energy consulatation':
      newTitle = "Contact Us";
    case 'Shop the largest solar panel inventory ever':
      newTitle = 'Shop';
    default:
      newTitle = document.title;
  }
  return newTitle;
}

titleOverride = getPrettyName();

Capturing Events

Even though we should now know which pages are being viewed, we still don’t know what they’re doing once they’re on that page. For that we need to track events, which is done in much the same way but with a bit more attention to detail.

The code:


ga('send', 'event', 'category', 'action', 'label');

Events are a bit tricker because they involve multiple arguments (only event, category, and action are required). In this case, it’s best to use variables as often as possible, allowing information already coded in your HTML do the work for you by capturing innerText, classes, IDs, attributes, etc. Our command is “send an event,” which requires us to define that event a bit. In some cases these parameters may seem like synonyms. The way I remember it is…

category = What received the interaction?
action = What was the interaction?
label = Which one was it?

If I click a purchase button, I would call the function as follows:


ga('send', 'event', 'Button', 'Buy Now', 'Buy Now Awesome Product 1');

With that function, I will be able to parse the data received by Google Analytics more easily.

Woot

Congratulations, you’ve just installed Google Analytics! Be happy. But, don’t think the hard part is over. We’ve only breached the world of analytics in general and Google Analytics in particular.

Tips.

  • Don’t use a plugin – If you’re using a plugin for Google Analytics on your WordPress or Drupal site, you’re doing it wrong. This is such an easy addition to a site that it doesn’t require a plugin of any sort. It’s a script for the structure and accompanying JavaScript for the functionality. Get your hands dirty and do it the real way for more control and greater accuracy.
  • Use a universal header (or footer) – You could copy this to every single page on your website, but that’s obviously a waste of time. Add it to the universal header of your pages. For any CMS or templating framework, you almost certainly have an include file that sets up the head of your website, or external javascript, or something that is common to all pages of the site. Just add it there and be done with it!
  • Utilize jQuery – I know so many developers who shun jQuery as being unnecessary bloat, but seriously, it’s a lifesaver when tracking events across multiple browsers.
  • If you’re using Chrome, I highly recommend installing Google Analytics Debugger  for troubleshooting common Google Analytics problems.

As always, contact me at hello[at]emsoff.com with any questions.

 

Original Post on Justin’s Blog here.

Justin Emsoff

About Justin Emsoff

I'm a twenty-something USC grad living in sunny Southern California with my dogs, a camera, and terrible allergies. Though mostly splitting my time between marketing and web development, I appreciate minimalism, Austrian economics, Eastern European history, and Objectivism.