skip to navigation skip to content

Google Analytics – The Basics of Web Analytics

Google Analytics is based on a very simple form of data collection. A tracking pixel, beacon, pixel tracking tag etc.. you may have heard these terms before and these are all interchangeable terms that essentially mean the same thing.

How it works

Known as client side tracking because the tracking is made possibly by the visitors web-browser, Google Analytics relies on 3 different elements to successfully track a visitor and collect statistics. These 3 components are images, javascript and cookies. Let’s take a look at how each of these elements makes tracking possible:

Images

When you place a reference to a file like an image in the HTML of your website, your web browser queues up this file to be downloaded or requested from the location specified in the HTML document.

Let’s assume your website is: www.gavindoolan.com and on this website (in the HTML source) you place the following image tag:

<img alt=”image” src=”http://www.example.com/pixel.gif” width=”1″ height=”1″ />

When your web browser encounters this HTML it will attempt to download the file located at: http://www.example.com/pixel.gif in order to do this it will send a request to example.com, if a successful connection is made the image is downloaded and displayed on the page.

The image could technically be located on the same server as the website (www.gavindoolan.com) but in the case of Google Analytics all requests go to Google’s servers, specifically (www.google-analytics.com) for data collection the reason for this will make more sense later for now all you need to know is that these requests (raw data) are then processed and converted into the useful reports you see in the Google Analytics interface.

A free ride

Looking at the example above hopefully you can see that the width and height attributes of the image are set to a value of 1, this essentially means we are using a 1×1 size image (a pixel) and placing it on the page at www.gavindoolan.com. Also worth noting is that this image is a .gif image format.

The reason for this format is simple, .gif files support transparency i.e it can be see through (like glass). So not only is it extremely small (1 pixel) but it’s also invisible. Why would it be useful to have an invisible image on our webpage you may be thinking?

The reason is not because seeing the image itself is important, in fact we don’t want visitors to see it or have it play a part in our website’s design. The image is useful because it’s the mechanism that allows communication between a web-browser and a web-server and it’s during this communication that information is able to be packaged up and sent from browser (client) to web-server (i.e Google Analytics) for collection and processing. The data is appended to this image request and gets the free ride. It’s the hitch hiker. The data is appended to the end of the request using something known as query parameters.

Query Parameters

What’s a query parameter? You can think of these like variables each parameter can contain a value that is different for each visitor. For example our original image request is: http://www.example.com/pixel.gif but let’s say we wanted to add 2 variables to the end of this request, let’s call them fruit and colour, our image request might look like this:

http://www.example.com/pixel.gif?fruit=apple&colour=green

Note: The nomenclature used, the first parameter is always sigified by a question mark (?) and all additional parameters are separated by ampersands (&). The values to the left of the equals sign is the name of the parameter and the values on the right hand side are the values.

Hopefully what you can see here is that each request for the pixel.gif image can be different depending on the parameters (variables) attached to the end of the request. But you may be wondering how do we make each request unique? That’s where the following comes in….

JavaScript

If you read the wikipedia description you may be somewhat confused. JavaScript has evolved to be many things but in it’s most basic form it’s a language that is primarily used by the client (browser) to help validate, manipulate and present a HTML document.

Some uses for javascript include validating form data, changing the appearance of the html document or manipulating elements inside of it, providing the ability for users to interact with the webpage eg: clicking a button and doing something after this (event) takes place.

JavaScript helps Google Analytics collect everything from basic details about the web browser itself, all the way through to detailed information about the visitor (which may require the assistance of cookies – we’ll cover this later). For now though we will just go over some of the most basic examples:

  1. Screen resolution
  2. Browser type and version
  3. Operating system
  4. The page being viewed
  5. The pages title
  6. The page domain
  7. How the visitor found the website (referring source)

You may hear the word DOM (Document Object Model) – which is really just a fancy name for the HTML document and the components that make it up. If HTML was a building, the DOM would be the blueprints. It’s through the DOM and JavaScript that we can access much of this information.

For Example:

The javascript method document.location returns the information in the address bar of your web browser.

To prove it and see it for yourself, lets quickly try this out, if you have the Google Chrome Web Browser, open the developer tools console. (Access to developer tools will be different depending on your Operating System).

If you navigate to the console tab (far right side), this is where you can test JavaScript on a live page, don’t worry we are not going to do anything scary here or mess anything up, all we are going to do is enter the following bit of JavaScript (refer to screenshot):

alert(document.location);

Javascript console in Chrome

Chrome Developer Tools Javascript Console

If you enter this text and hit return, you should see a dialog pop up that states the value you see in the address bar of the browser. The alert function creates the pop up and the document.location method returns the value in the address bar.

This is just 1 property that can be accessed about the current page using JavaScript and there are many many more, if you’re feeling adventurous you can try some others, here are some you might want to try yourself:

  1. document.location.search (try it on a page with query parameters).
  2. location.hostname
  3. document.referrer (try it on a website after arriving from Google Search Result page)

The key thing I want you to take away here is the fact that a lot of information is readily available thanks to JavaScript and it can be accessed relatively easily via variables such as those above. There are simply too many to cover them all in this article however.

So far I’ve talked about 2 things that make tracking with Google Analytics and other web analytics software possible, images and JavaScript and I hope you are getting an idea of how all this is coming together, but there is a third and important component to all of this we haven’t covered yet which will hopefully start to complete the puzzle for you.

Cookies

Contrary to popular thinking, cookies are actually very simple and of course: no I’m not talking about the ones you can eat, I’m talking about the ones stored on your computer. In the case of Google Analytics the particular type of cookies we use are referred to as first party cookies. These cookies are stored on your browser at the request of your website, well more specifically the Google Analytics JavaScript puts them there.

A cookie is really a fancy word for a plain text file that can store a relatively small amount of information. Some examples of why cookies are used might include:

  • Keeping track of a logged in user
  • Storing user preferences
  • Session tracking (think of your online banking website)
  • Customising user experience on a website (think of eBay’s recently looked at items etc.)

A cookie is useful because it helps a website identify a given visitor, you may have heard that several users can share the same IP address? Well a cookie can help you distinguish between visitors even if they share the same IP address. It can open up your website to lots of new functionality and enhance the user experience.

First Party Vs Third Party

The other thing you will hear about cookies is the terminology first party and third party cookies. Cookies don’t identify themselves as first party or third so there is no distinguishable difference in the way they look that can help you identify a first party vs third party cookie. This had me confused for longer than I care to admit.

The difference is in the way the cookie is set, a first party cookie is set by the website you are currently visiting. For example www.gavindoolan.com, a third party cookie is a cookie set by another web-service in the background. For example imagine you are on www.gavindoolan.com but on this website is a reference to www.example.com for a file (like JavaScript) or an image etc… Example.com could also potentially set a cookie on your machine (for example.com itself), but because you haven’t directly visited example.com it would be less obvious to you as to why you have an example.com cookie. Hence it’s referred to as third party.

Most web browsers support first party cookies without issue, however third party cookies are more susceptible to being blocked simply because of unscrupulous web-services that have abused their use in the past. Ad-blocking software products and browser security settings tend to impact third party cookies and block them being set.

Since Google Analytics uses first party cookies (plural not singular) this tends to be less of an issue and most browsers accept Google Analytics cookies without issue. If you have Google Analytics installed on your website you can view these cookies relatively easily. Open up Chrome Developer Tools again.

This time navigate to the resources tab and on the left hand side you’ll see an item called cookies, expand this item to see the cookies associated with the current website. (refer to screenshot)

Cookies in Chrome Developer Tools

Viewing Cookie Information in Chrome Developer Tools

Hopefully you can see the cookies used for gavindoolan.com. You can easily identify Google Analytics cookies as the ones (prefixed with __utm). This view is extremely useful because you can see the values in the cookies along with the domain they are set against, the cookie path and the expiry dates (Expires / Max Age column).

In the next post I’ll talk about what these cookie value represent and then show you how it all comes together (images, cookies and javascript) to send data to Google Analytics.

2 Responses to “Google Analytics – The Basics of Web Analytics”

  1. Using the console to test the JS and view the cookies is great. That will save lots of time – right now I’m basically changing GA script around and then waiting half a day for something to (not) track in GA. Will check back for more analytics goodness 😉

  2. Hey Matt,
    Good to see you made it here. Will try and update my blog soon. Glad you found this useful.

Leave a Reply