Tracking Website Usage [Quick Tutorial]

Posted on - Last Modified on

Tracking website usage is a very important part of website development because the entire marketing strategy of some online products depends on the user tracking and statistics created for the website. From a user experience (UX) and marketing point of view, tracking what website visitors do is one of the most important inputs. This tutorial will teach you how to track website usage statistics using Google Analytics.

Referencing Google Analytics

There are two ways to integrate Google Analytics (GA) into a website. The first option is to use the script below (this can be found on this page too).

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

This script tag can be put in the <head> element or at the end of the <body> element of your main/index.html HTML file.

The code above has a self-executing function that receives the window object and the document object. The third parameter is the ‘script’ string, which will be an element created and added to the DOM. The fourth parameter is the source of the script file. The fifth parameter (ga) is the name of the global function that will hold the loaded content from the source (//www.google-analytics.com/analytics.js).This function is also called the command queue because it does not send all the requests immediately to the server, but it queues these up and sends them in batches.

After this immediately-invoked function, the ga function is invoked with the create parameter and the property/tracking ID (UA-XXXXXXX-Y). This ID is unique to the account for which Google Analytics is set up. The create method initializes a new tracker for the given ID.

A pageview operation is sent to the analytics engine in the last line of the script tag.

 

The second way to load GA into the website is using an async method.

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

<script async src='//www.google-analytics.com/analytics.js'></script>

There are 2 script tags, the first one handles the creating of the global ga function and sends the create and pageview stats to the GA server. The second script tag specifies the source of the analytics.js file on Google’s servers, and it specifies that it be loaded as async.

Trackers

When using GA, it's possible to use Tracker objects. For a website, there can be more tracker objects defined. Trackers can be created using the create command:

ga('create', 'UA-XXXXX-Y', 'johndoe.com', 'maleClothesTracker');
ga('create', {
	name: 'maleClothesTracker', 
	cookieDomain: 'johndoe.com',
	trackingId: 'UA-XXXXX-Y',
	cookieName: 'ga_maleClothesTracker',
	cookieExpires: 63072000, // cookie is valid for 2 years
	
});

Posted 11 November, 2015

Greg Bogdan

Software Engineer, Blogger, Tech Enthusiast

I am a Software Engineer with over 7 years of experience in different domains(ERP, Financial Products and Alerting Systems). My main expertise is .NET, Java, Python and JavaScript. I like technical writing and have good experience in creating tutorials and how to technical articles. I am passionate about technology and I love what I do and I always intend to 100% fulfill the project which I am ...

Next Article

Why You Should Delegate Your Less Important Tasks