This article is in conjunction with the article: Beginners guide to Google Analytics Debugging where I explained about:

1. The various Google Analytics Debugging tools I use.
2. The concept of debugging with ga_debug.js and analytics_debug.js
3. Understanding _utm.gif

The present article is built upon the knowledge acquired through the previous article and covers:

1. Interpreting the GIF Request (tracking beacon)
2. Rewriting HTML and testing new JavaScript code on a live website without server access.

Interpreting the GIF Request (Tracking Beacon)

The tracking beacon is the query string of the GIF request.

A query string is the part of the URL which comes after the ? character.

For example if following is the GIF request:

https://www.google-analytics.com/__utm.gif?utmwv=5.6.0d&utms=2&utmn=534749212&utmhn=moz.com&utme=8(5!User-Type)9(5!visitor)11(5!2)&utmcs=UTF-8&utmsr=1600×900&utmvp=1583×775&utmsc=24-bit&utmul=en-gb&utmje=1&utmfl=15.0%20r0&utmdt=Moz%3A%20Inbound%20Marketing%20and%20SEO%20Software%2C%20Made%20Easy&utmhid=1579775948&utmr=-&utmp=%2F&utmht=1414164116844&utmac=UA-1870679-1&utmcc=__utma%3D181959355.587619628.1414163781.1414163781.1414163781.1%3B%2B__utmz%3D181959355.1414163781.1.1.utmcsr%3D(direct)%7Cutmccn%3D(direct)%7Cutmcmd%3D(none)%3B&utmjid=&utmu=qzAAACAAAAAAAAAAAAAAAAAE~

then the tracking beacon would be:

utmwv=5.6.0d&utms=2&utmn=534749212&utmhn=moz.com&utme=8(5!User-Type)9(5!visitor)11(5!2)&utmcs=UTF-8&utmsr=1600×900&utmvp=1583×775&utmsc=24-bit&utmul=en-gb&utmje=1&utmfl=15.0%20r0&utmdt=Moz%3A%20Inbound%20Marketing%20and%20SEO%20Software%2C%20Made%20Easy&utmhid=1579775948&utmr=-&utmp=%2F&utmht=1414164116844&utmac=UA-1870679-1&utmcc=__utma%3D181959355.587619628.1414163781.1414163781.1414163781.1%3B%2B__utmz%3D181959355.1414163781.1.1.utmcsr%3D(direct)%7Cutmccn%3D(direct)%7Cutmcmd%3D(none)%3B&utmjid=&utmu=qzAAACAAAAAAAAAAAAAAAAAE~

 

The tracking beacon is made up of multiple variables like: utmwv, utmn, utmhn etc.

Each variable has got special meaning.

For example:

• utmwv denotes the tracking code version.
• utmn denotes the unique ID generated for each GIF request.
• utmhn denotes the host name
• utmdt denotes the page title

You can get complete list of the tracking beacon variables from here: https://developers.google.com/analytics/resources/articles/gaTrackingTroubleshooting#gifParameters

You can see this tracking beacon by clicking on the ‘console’ tab of the Google developer console tool.

Following is the example of tracking beacon sent to Google Analytics server when I loaded the home page of moz.com in my chrome browser:

If you analyze this tracking beacon, you can determine the hit and browser data that is being sent to Google Analytics server:

The best way to analyse the tracking beacon is to read the table below the beacon.

The first thing that you would notice is that moz.com uses the old Google Analytics library (ga.js).

This is evident from following debugging information:

1. _gaq.push processing “_setCustomVar” for args: “[5,User-Type,visitor,2]”:

// in Universal Analytics, we don’t use the method _gaq.push.

2. ‘Tracking beacon sent!’

// in case of Universal Analytics the tracking beacon that is sent has got different parameters and is not even called ‘tracking beacon’ but is called ‘sent beacon’

The table just below the tracking beacon, breaks down the tracking beacon, so that it is easy to read.

If you read this table, you can dig out all the information that is being sent to Google Analytics server like:

1. Account ID
2. Page Title
3. Host Name
4. Page
5. Referring URL
6. .
7. .
8. .
9. Campaign Source
10. Campaign Medium
11. Campaign Name
12. .
13. .

If you don’t see a particular hit and/or browser data in the tracking beacon then it means that data is not being sent to Google Analytics server.

Any data that doesn’t pass to Google Analytics server, can’t appear in GA reports.

Following is the example of tracking beacon sent to Google Analytics server when I loaded the home page of okdork.com in my chrome browser:

If you analyze this tracking beacon, you can determine the hit and browser data that is being sent to Google Analytics server:

The first thing that you would notice is that okdork.com uses the new Google Analytics library (analytics.js) i.e. Universal Analytics. This is evident from the following debugging information:

1. Running command: ga(“send”, “pageview”)

// in Universal Analytics, we use the ‘ga’ method.

2. ‘Sent beacon’

// in case of Universal Analytics the tracking beacon is called ‘sent beacon’ and it has got different parameters than the tracking beacon sent by classic Google Analytics. 

The table just below the ‘sent beacon’ breaks down the ‘sent beacon’, so that it is easy to read.

If you read this table, you can dig out all the information that is being sent to Google Analytics server:

1. Tracking Id (known as ‘Account ID’ in the old GA tracking beacon)
2. Title (known as ‘Page Title’ in the old GA tracking beacon)
3. Location (known as ‘Host Name’ in the old GA tracking beacon)
4. Hit Type
5. .
6. .

The tracking beacon is sent for each hit (pageviews, screenview, event, transaction, etc).

So if I am triggering an event on a page load then two tracking beacons would be sent to the Google Analytics server. One for the pageview and one for the event.

For example, the following is the tracking beacon for the ‘Pageview’ hit type:

Following is the example of tracking beacon for the ‘event’ hit type:

If you read the table below the tracking beacon (I prefer to call it tracking beacon even when it is called ‘sent beacon in case of Universal Analytics), you can see the event data (event action and event category) being sent to Google Analytics server.

The parameter ‘&ea’ of the tracking beacon denotes the ‘Event Action’ and has got the value of ‘time on page more than 3 minutes’

The parameter ‘&ec’ of the tracking beacon denotes the ‘Event Category’ and has got the value of ‘Profitable Engagement’

Following is the example of tracking beacon for the ‘event’ hit type sent via Google Tag Manager:

How do I know that this is the tracking beacon sent by Google Tag Manager?

Look at the running command:

Running command: ga(“gtm1414168294717.send“, {hitType: “event”, eventCategory: “Profitable Engagement”, eventAction: “time on page more than 3 minutes”, eventLabel: undefined, eventValue: undefined})

// here ‘gtm1414168294717’ is the tracking object created for Google Tag Manager.

Look at the first parameter:

<unknown>        (&gtm) GTM-J85C

Now let us go back to moz.com and check whether they are tracking clicks on the button ‘Start my free 30-day trial’:

Step-1: Right-click on the button ‘Start my free 30-day trial’ and then select ‘Inspect element in your chrome browser’:

Step-2: You will now see the Google developer console. Look at the highlighted HTML code of the button:

 <a href=”/checkout/freetrial” class=” cta button-yellow cta-large” onclick=”_gaq.push([‘_trackEvent’, ‘home_index’, ‘button’, ‘start_my_free_30_day_trial’]);“>
Start my Free 30-Day Trial</a>

From the screenshot above, it is evident that the button is tagged with event tracking code with ‘home_index’ as the event category, ‘button’ as event action, and ‘start_my_free_30_day_trial’ as the event label.

Now let us determine whether or not this event tracking code will fire on button click.

Step-3: Click on the ‘Console’ tab of your ‘Google developer console’ window. Right-click on the console window and then select ‘Clear Console’ to remove all the previous debugging information:

Note: Make sure that you preserve the log information. Otherwise, the information would be lost when you navigate from one web page to another.

Step-4: Click on the button ‘Start my free 30-day trial’ and then look at the debugging information as it starts appearing in the console window:

I do not have access to the Google Analytics account of moz.com so I can’t see their real-time reports and verify their event tracking. But I can still say with confidence that their event tracking is working.

Rewriting HTML and testing new JavaScript code on a live website without server access

Often we need to test new JavaScript code on a client’s website to see whether it works. This usually involves uploading the code to the client’s web server.

But uploading the code repeatedly just for testing purposes is not easy especially if the website is big, there is a long approval process and/or millions of dollars are at stake.

Say you are implementing tracking on an airline website, no one would let you upload a new code just for testing purposes.

Even if you could, it won’t be easy. You may need several approvals from various departments/people before someone put your task in the ‘to do’ list.

Just because your task is now in the ‘to do’ list doesn’t automatically mean it will be carried out straight away. Your task may still be way down in the priority list and you may need to wait for several days/weeks before IT understands your requirements, test the code from their side, and then deploy it.

All of this pain just to test a bunch of new JavaScript code.

What if the code didn’t work as intended? Then you have to repeat the whole process all over again.

Even if you are not implementing tracking on a big website, you still corrupt your analytics data every time your test your code. The test data can easily skew your website metrics like ecommerce conversion rate, transactions, sales, etc if the website is a low traffic website and you are testing ecommerce tracking.

I can show a couple of methods for testing the new code without uploading it to the webserver.

Let us go back to the home page of okdork.com website and check whether they are tracking clicks on the button ‘Add me’:

Step-1: Right-click on the button ‘Add me’ and then select ‘Inspect element in your chrome browser’. You will now see the Google developer console.

Look at the highlighted HTML code of the button to find the event tracking code:

From the screenshot above, it is evident that the button is not tagged with any event tracking code.

Now let us suppose, guys at okdork asked me to add an event tracking code to the ‘Add me’ button so that they can track clicks on the button.

Now before I send them my event tracking code for upload, I would like to be sure that the code will actually work on the live website.

So what I will do next is, edit the HTML of the page and add my event tracking code.

Step-2: Right click on the highlighted HTML code of the button in Google developer console and select ‘Edit as HTML’:

Step-3: Now enter your event tracking code in the text box:

Step-4: Click on the ‘Console’ tab of your ‘Google developer console’ window. Right-click on the console window and then select ‘Clear Console’ to remove all the previous debugging information.

Step-5: Now enter an email address in the text box on the home page and then click on the ‘Add me’ button:

Once you clicked on the button, you can see the event data unfolding in the console window:

We can now conclude that my event tracking code is going to work if it is actually uploaded to the live website.

Note: I do not have any server access to the okdork.com website. Nor do I have actually sent any event data to their Google Analytics reports. This is all just a mock test of the event tracking code on a live website.

Google developer console can simulate the production environment (testing on a live website).

Now I can confidently send my event tracking code to the web developer of okdork for upload.

This is how you can test your new JavaScript code on a live website without actually uploading any code to the webserver.

Through Google developer console you can also rewrite the HTML of a web page without server access.

Let us change the home page of okdork.com.

Step-1: Select the text ‘Get access to 85% of my best business hacks…’ on the home page, right-click on it and then select ‘inspect element’:

Step-2: Right-click on the selected line of code, select ‘Edit as HTML’ and enter any text you like:

Reordering the HTML Elements

In order to reorder the HTML elements of the webpage, just open the Google developer console and drag and drop HTML elements:

Completely Rewriting the HTML of a web page

You can completely rewrite the HTML of the web page and see changes as they would look like on the live okdork website without actually uploading any code to their web server:

Note: Whatever changes that you are making on the website via Google developer console will appear only to you on your browser. You can’t actually change anything on the website without uploading new code to the webserver. So your changes won’t be for all the users of the website. It will be just for you. If you refresh the page, all the changes you have made would be lost.

Adding multiple lines of JavaScript code for testing purpose

You can also add multiple lines of JavaScript code to any web element or between any elements and test it like it was deployed on a live website.

For example, I could change the functionality of the Moz’s ‘start my free 30-day trial’ button by adding a Javascript code to it via ‘edit as HTML’ feature of the Google developer console:

Adding attributes to an element

Sometimes you need to add an attribute to a DOM element so that you can capture it in Google Tag Manager. You can do that via Google developer console.

Follow the steps below:

Step-1: Right-click on the element (say button) on a web page to which you want to add an attribute and then select ‘inspect element’. This will open up the Google developer console window.

Step-2: Right-click on the highlighted HTML code of the button and then select ‘Add attribute’ from the shortcut menu:

Step-3: Type the new attribute and its value:

Note(1): you can edit the attribute by selecting ‘edit attribute’ from the shortcut menu.

Note(2): Whatever changes that you are making on the website via Google developer console will appear only to you on your browser. You can’t actually change anything on the website without uploading new code to the webserver. So the new attributed that you have added will appear only to you. If you refresh the page, the attribute would be lost.

The next article in the Google Analytics debugging series focus on using the tool called ‘Fiddler’ for carrying out debugging tasks which are not possible through Google developer console.

Check out this article here: Google Analytics Debugging via Fiddler