Google Analytics is very popular for measuring how users interact with your website. Most of the times, simply follow the instructions, and copy the following codes to every page you intend to track. It just magically works.

<!-- Google Analytics -->

(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

<!-- End Google Analytics -->

However, sometimes we have to dig deeper to achieve our goals. For example, how do we track each virtual page in Single Page Application (SPA)?

In order to answer this question, we have to understand how the script above works. From the reference, as quoted: “The above code does four main things:

  1. Creates a element that starts asynchronously downloading the analytics.js JavaScript library from https://www.google-analytics.com/analytics.js
  2. Initializes a global ga function (called the ga() command queue) that allows you to schedule commands to be run once the analytics.js library is loaded and ready to go.
  3. Adds a command to the ga() command queue to create a new tracker object for the property specified via the 'UA-XXXXX-Y' parameter.
  4. Adds another command to the ga() command queue to send a pageview to Google Analytics for the current page.”

The reference also points out, as quoted: “Custom implementations may require modifying the last two lines of the JavaScript tracking snippet (the create and send commands) or adding additional code to track more interactions. ”

Back to our tracking each virtual page of SPA question. I will use an example here. There are six menu items, ‘Home’, ‘About’, ‘Services’, ‘Projects’, ‘Qualifications’, and ‘Contact’ in this website, http://www.hdsoftwareconsulting.com, which is a SPA. Under normal circumstance, if we simply insert the script above to the page, it only logs “/home” to tracking. However, we do want to know the users browser navigation to other menu items as well.

Luckily, Google Analytics API is flexible and powerful. We can create a solution like this:

  1. Insert the following script to the page.


(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');

<!-- End Google Analytics -->

2. Attach an onclick event handler to each menu item. For example, we attach the following script to ‘About’ menu item, and will do the same for the other menu items.

ga('set', 'page', '/about'); 
ga('send', 'pageview');

In this 5-minute crash course, we introduce Google Analytics API, and show how to apply it to a SPA.

Bonuses:

  1. Look at network tab of Chrome to inspect what’s going between your browser and Google Analytics API
  2. The API exposes an object ‘ga’ as mentioned above. We can also inspect its internals.
ga(function() {
  // Logs an array of all tracker objects.
  console.log(ga.getAll());
});
ga(function(tracker) {
  // Logs the trackers name.
  console.log(tracker.get('name'));
});

 

 

References:

https://developers.google.com/analytics/devguides/collection/analyticsjs/

Advertisements