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:
Account ID
Page Title
Host Name
Page
Referring URL
.
.
.
Campaign Source
Campaign Medium
Campaign Name
.
.
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:
Tracking Id (known as ‘Account ID’ in the old GA tracking beacon)
Title (known as ‘Page Title’ in the old GA tracking beacon)
Location (known as ‘Host Name’ in the old GA tracking beacon)
Hit Type
.
.
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> (>m) 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:
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.
"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."
Here’s what we’re going to cover in this training…
#1 Why digital analytics is the key to online business success.
#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.
#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.
#4 Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.
#5 The number 1 reason why conversion optimization is not working for your business.
#6 How to advertise on any marketing platform for FREE with an unlimited budget.
#7 How to learn and master digital analytics and conversion optimization in record time.
My best selling books on Digital Analytics and Conversion Optimization
Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.
Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.
Attribution Modelling in Google Analytics and BeyondSECOND EDITION OUT NOW!
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.
Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.
About the Author
Himanshu Sharma
Founder, OptimizeSmart.com
Over 15 years of experience in digital analytics and marketing
Author of four best-selling books on digital analytics and conversion optimization
Nominated for Digital Analytics Association Awards for Excellence
Runs one of the most popular blogs in the world on digital analytics
Consultant to countless small and big businesses over the decade
Learn and Master Google Analytics 4 (GA4) - 126 pages ebook
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie
Duration
Description
cookielawinfo-checkbox-analytics
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional
11 months
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance
11 months
This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy
11 months
The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.