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
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.
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:
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….
- Screen resolution
- Browser type and version
- Operating system
- The page being viewed
- The pages title
- The page domain
- How the visitor found the website (referring source)
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 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.
- document.location.search (try it on a page with query parameters).
- document.referrer (try it on a website after arriving from Google Search Result page)
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.
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)
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).