Troubleshooting Google Analytics Setup Issues – The GIF Request
This article is in conjunction with the article: Beginners guide to Google Analytics Debugging where I explained about:
- The various Google Analytics Debugging tools I use.
- The concept of debugging with ga_debug.js and analytics_debug.js
- Understanding _utm.gif
The present article is built upon the knowledge acquired through the previous article and covers:
- Interpreting the GIF Request (tracking beacon)
- 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:
- 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:
<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
Register for the FREE TRAINING...
"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 Beyond
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.
This article is in conjunction with the article: Beginners guide to Google Analytics Debugging where I explained about:
- The various Google Analytics Debugging tools I use.
- The concept of debugging with ga_debug.js and analytics_debug.js
- Understanding _utm.gif
The present article is built upon the knowledge acquired through the previous article and covers:
- Interpreting the GIF Request (tracking beacon)
- 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:
- 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:
<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
Register for the FREE TRAINING...
"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 Beyond
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.