I have recently tried to implement Google Analytics on a web I’m working on. And it has been an awful experience because there’s so little documentation for people who wants to use multiple trackers. I can’t give a thorough, detailed, and full of picture tutorial about this because that would cost so much time. But I’ll try to cover as much and as detailed as I can.
I’ll assume you know the basic common sense of the internet, have an at least very basic knowledge about Javascript.
Google Analytics
What is Google Analytics? In short, this is a free statistic service offered by Google to analyze the visitors behavior your website. This service can record everything you supply, from how much a page is opened, to what page element the user interacted with, for example, how many the play video button is clicked. Some people finds statistic boring, but in the hands of people who understand statistic, these data can be used to inform which part of the website needs to be improved, or need focus. For example, if we can get the data that user click 1000 times on promotion A banner, and 5000 times on promotion B banner, then that means promotion B banner is more interesting, thus we need more promotion like promotion B than promotion A.
Google Analytics (GA) vs Universal Analytics (UA)
Google Analytics (ga.js) is the obsolete and out of date implementation. The Universal Analytics (analytics.js) is the new and modern implementation. Both developed by Google, and both are Google Analytics. Mindblown? Me too. But just refer them as ga.js and analytics.js, and people around the world will know which one you’re talking about. For this tutorial, we will stick to the newest implementation, analytics.js.
Basic Steps on Implementing Google Analytics
- Applying for Google Analytics account.
- Setting up the tracking account(s).
- Create the tracking object.
- Putting all the information you want to send on the object.
- Sending other kind of information to Google Analytics.
- Working with the report data.
I won’t explain some steps because there are enough resources already on the web about that. I’ll only cover what I felt need hasn’t been covered properly on the internet.
1. Applying for Google Analytics account.
2. Setting up the tracking account(s).
This website has a good tutorial for these two first steps.
After that, you will get the code that load analytics.js into memory, like this.
(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');
Paste this inside that <script> </script> tag on your website, and it doesn’t have to be in the <head> tag.
3. Create the tracking object.
Okay, now we can use the function ga() under our disposal. If you noted, you’ll also get basic tracking implementation like this (put this after the code above):
ga('create', 'UA-XXXXXXX-1, 'auto');
ga('send', 'pageview');
Where XXXXXXX-1 is tracking account number. Your tracking account number and mine will be different, so that’s why I masked the code so you won’t be confused.
What this code does is actually create a tracking object with a default name (which is nameless, by the way). After that, we send a ‘pageview’ hit information to Google Analytics. What we see here is a metric. ‘pageview’ is a metric. But more about that later. For now on, let’s just think that this is the way we send data to Google Analytics that the page is opened, which means there’s a user on the site. You can look the data later at Google Analytics as a real time data (how many users are currently online on your website, or as a aggregate report per day, or per month, or per year). How cool is that?
Now, some people maybe have more than one tracking account. For example, some people might have two websites. Then he sets two tracking account for each website. And he sets one more tracking account which tracks those two website in aggregate. So if tracker for web A gets 1000 pageview hits, and tracker for web B gets 2500 pageview hits, then the third tracker will get 3500 pageview hits. This is called Rollup Account. This is why people have more than one tracking account. So, in case of web A, how should we implement the code?
For example, if the tracker for web A account number is XXXXXXX-1, tracker for web B is XXXXXXX-2, and rollup tracker for both website is XXXXXXXX-3, then the code for web A will be:
ga('create', 'UA-XXXXXXX-1, 'auto');
ga('send', 'pageview');
ga('create', 'UA-XXXXXXX-3, 'auto', {'name': 'MyRollup'});
ga('MyRollup.send', 'pageview');
And the code for web B will be:
ga('create', 'UA-XXXXXXX-2, 'auto');
ga('send', 'pageview');
ga('create', 'UA-XXXXXXX-3, 'auto', {'name': 'MyRollup'});
ga('MyRollup.send', 'pageview');
What we see here is that we can create multiple objects for multiple trackers. But we need to name it, so we know to which tracker account we going to send those data. We have to supply the name on the ‘create’ command, and then we need to supply the name as the prefix on the ‘send’ command. Remember this, because we’re going to use this a lot in this tutorial, because this tutorial emphasizes on multiple trackers.
4. Putting all the information you want to send on the object.
One size doesn’t fit all, people says. And on this instance, it’s very true. Different people needs different data, and Google Analytics tries to be the jack of all trades, which fortunately is also the master of all trades. The data you send to Google Analytics can be ‘tagged’ by dimension, and stored by metrics. Just think of it as rows and columns in Excel, where the dimension is the column which you can categorize your report, and metrics is the individual data on each line. For example, you can tag a ‘pageview’ hit data with information on whether this ‘pageview’ hit is send by a logged in user or an anonymous user who open the page.
The dimensions and metrics can only be sent with an existing hit, by which that’s what I meant when you can ‘tag’ the data you sent to Google Analytics. To name the dimensions or metrics, you write dimension followed by number, or metric followed by number. For example, to send a ‘pageview’ hit with custom dimension 3, you write:
ga('send', 'pageview', {'dimension3': 'logged in'} );
In here, you send along additional information dimension3 = logged in. This data will become associated with that featureless ‘pageview’ hit. Later you will be able to differentiate this pageview entry when you choose to group your report based on dimension3, you’ll see ‘logged in’ entry will has the count of 1. That means there is one pageview entry that has the value ‘logged in’ on category ‘dimension3’. This number will increase as more ‘pageview’ hit data with dimension3 = logged in is sent to the Google Analytics.
Sometimes you may send data more than one for the same tracker. Or maybe you just want to split the implementation. For this purpose, you can set the data first before send it.
ga('set', 'dimension3', 'logged in');
ga('send', 'pageview');
If you set it like this, then all the subsequent ‘send’ command will have dimension3 set to logged in even though it’s not implicitly set. Beware, this will also continues onto the next page, until the cookies expire (yes, this is saved on cookie). So if you don’t want to send this dimension data on the next page, don’t forget to unset it using this:
ga('set', 'dimension3', '');
Now how to do this in multiple tracking account?
Continuing the MyRollup object example above, we can send the dimension along with the pageview in one go like this:
ga('MyRollup.send', 'pageview', {'dimension3': 'logged in'} );
If we want to split the implementation with set and send, this is how it’s done:
ga('MyRollup.set', 'dimension3', 'logged in');
ga('MyRollup.send', 'pageview');
And finally, to unset the dimension, we use this:
ga('MyRollup.set', 'dimension3', '');
There are a couple of other things we can send to Google Analytics in the same manner as dimension. The metrics and contentgroup. We can send just like dimension, for example:
ga('send', 'pageview', {'metric17': 'data'} );
or
ga('send', 'pageview', {'contentgroup2': ''} );
For the multi tracker version, you can just also add the tracker object prefix before the send, like MyRollup.send.
5. Sending other kind of information to Google Analytics.
You can also send data as event. For example, you can record how many a video is viewed. So you can call ga function on onmousedown javascript event. The send event has different parameters than the usual send.
ga('send', 'event', <category>, <action>, <label>, <value>);
For example, if we want to record how many times the video has been watched event, we would write:
ga('send', 'event', 'Video', 'View', 'Youtube Funniest Home Video', 1);
Where:
- ‘video’ is category. Required.
- ‘view’ is action. Required.
- ‘Youtube Funniest Home Video’ is label. Optional.
- 1 is additional value to separate. Optional. Value is a number, therefore don’t put any apostrophe around it.
Another example, if we want to record how many time a button pressed, we code:
ga('send', 'event', 'Button', 'Click', 'Checkout Button');
How if we want to send multi trackers event? Simply add the prefix before send.
ga('MyRollup.send', 'event', 'Button', 'Click', 'Checkout Button');
This page has a great in depth tutorial about Event.
6. Working with the report data.
- Watch your pageview report in realtime.
- Setup custom dimensions and metrics on your report.
- Setup content group on your report.
That’s will be it for this tutorial. I know this tutorial is short, but I get stuck because of this multiple tracker issue, that I can’t find information about it anywhere, albeit the solution is relative simple. Hope this helps you too! If you have question or correction, feel free to write in the comment section below.
Life in a Nutshell 