In the previous blog post, we created our own site, installed the GA code and verified it.
In this blog post, you will learn how to verify GA installation efficiently using:
- GA real-time report
- GA debugger
GA real-time report
If you read the previous blog article, we actually used the Behavior section under real-time report to check if our GA is working properly.
While real-time report could give us information like where the current users are based in physically, whether they are coming from ads or organic search, have they completed a specific event like submitting a form etc, it only shows a proportion of information being sent to GA. To view the full data sent to GA, you can use another plugin called Google Analytics Debugger.
GA debugger
To use the GA debugger, you will first need to learn about a hidden application in your Chrome browser: Console
To open a console, you can either:
- Right click > Inspect > Console or
- Press Ctrl+Shift+J (Windows/Linux) or Cmd+Opt+J (Mac)
Yes, I know what you are thinking, but stick with me, I will make this as human friendly as possible.
Simply put, the console is a mini-computer that can take input from users and output information for developers like errors and system log.
Now, let's go back to our Weebly site, open up the console and turn on the GA debugger by clicking the extension icon (the enveloper icon will have an "on" beneath it).
You should see something like this on the console:
(Your console might look different from mine because I am using a theme called Zero Dark Matrix)
(If you keep scrolling down, you might see another mysterious GA account. That's the GA account of Weebly, as long as you can find your GA account, you are good to go.)
On the console, you will see the information being sent to GA like hit type, location and GA tracking ID logged out.
If you look at the two lines that start with "Running command:", you will see these two commands:
ga("create", "UA-72835801-10", "auto");
ga("send", "pageview");
Look familiar? Remember the tracking code that we copied and pasted onto the header before?
(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-XXXXXXXX-Y', 'auto');
ga('send', 'pageview')
Those two commands are exactly what we put on the header of our website. In human language, the two commands translates to creates a tracker for the GA Property UA-XXXXXXXX-Y, use automatic cookie domain configuration (more on that later) and send a pageview.
Now check the "Preserve log" checkbox on the console and navigate to different pages of your site, you should see different pageview hits being sent to GA.
Remember we mentioned that the console, like a computer, can not only write, but also read?
Let's copy and paste the following line onto the console, also open up a new tab and go to GA > Realtime > Events.
ga('send', 'event','download button','click','booklet')
On your console, you should see something like this:
And your GA should look like this:
Unlike the previous pageview hit, the command that we just sent is an event with a category of download button, an action of click and a label of booklet.
Since our main focus here is the GA debugger, we will dive into GA events and goals later.
For now, you can think of an event as a non-pageview tracking item that tells you behavior like click, scroll or form submission.
If you read till here and get similar results on your GA, great work! You can now verify your GA installations with greater confidence and efficiency!