Quantcast

Debugging Google Analytics code (II): A Tutorial Video on Fiddler’s Inspector and AutoResponder functions


Fiddler is a tool that many web developers are common with. It is my favourite tool for debugging existing tracking code and testing new code.  This video shows two useful functions for this purpose: Inspectors and the AutoResponder. 

Fiddler is a free Web debugging tool. You can download it at fiddler2.com. Fiddler logs all HTTP traffic between your computer and the internet. That means you can view just about everything that is exchanged in the background while you’re browsing the web.


What makes Fiddler so great

Apart from the functions shown in the video below, I love Fiddler because of at least one more reason: It is not dependent on any browser. Tools like Firebug, Chrome’s Web Developer Tools or the Chrome Extension “Google Analytics Debugger” (see the first article on how to use these tools) all just work within one or the other browser. But Web Analytics code is usually JavaScript code. And JavaScript works differently from browser to browser. That does not mean that Fiddler should be seen an alternative to Firebug. Both tools have their purposes and go very well together.

The following video shows how to use Fiddler for Web Analytics purposes. You will learn:

  • How to test existing code with Fiddler’s “Inspectors” feature. The use case will be the test whether a click on an application button really triggers the desired Virtual Pageview call
  • How to try out new or different tracking code without having to upload anything to your server (no IT needed!).

 

Basics of Debugging Google Analytics Code: GA Chrome Debugger and other tools

**7th Feb 2012 – you can now watch the second instalment A Tutorial Video on Fiddler’s Inspector and AutoResponder functions**

Is that Virtual Pageview really being sent to Google Analytics when someone submits my registration form? Does the Event Tracking Call for outbound links get to GA in time before the visitor has left my website? Why do I not get any data for clicks on my teaser links? Questions that can drive a Web Analyst mad. Not if you know how to debug.

When I started using Web Analytics tools, there always was this huge black box: I’d put the tracking code on each and every page, and from then on, I usually waited and hoped the code would work as intended. Often, it didn’t, but I wasn’t able to see that until hours or sometimes a day later when the reports poured in to Google Analytics. Sometimes, it seemed to work, but only in some browsers. And so on. The more complex the code got (like when using Event Tracking for Flash applications), the harder it was to find out whether the code actually did what I was hoping it did. Luckily, that time is over.

Why is tracking code debugging so tedious?

  • Time lag: It usually takes several minutes to hours for the data to pour into the reports (even real-time analytics is never really real-time)
  • It was me, wasn’t it? You sometimes wonder whether the data in that report was caused by you or someone else that accidentally did the same thing on your website
  • No access to IT resources: Web Analysts may know some JavaScript, but we mostly are not IT people, so if you are testing web analytics code you sometimes have to wait for your IT guy to upload every little code change. An absolute killer for continuous improvement!
  • Testing on a test system isn’t the same as on a live system: There might be other scripts that are being loaded on the live system, the test system might be on another subdomain etc… Things that can be crucial for your code to function.
You can certainly name several more reasons why debugging the old-fashioned way is a very frustrating and time-consuming exercise.
 
Common Debugging Tools 
There are some good tools out there to switch on the light in the tracking code’s black box:

Fiddler2
My absolute favorite (see next post on how to use this HTTP traffic monitoring tool). Fiddler2 makes it easy to view every request to Google Analytics (and any other javascript-based Web Analytics tool). You can even try out changes to your tracking code on your live system before releasing them to everyone, the tool is independent from browsers – and it is free!

Web Analytics Solution Profiler (WASP)
A well-known Firefox add-on by Stéphane Hamel that now belongs to iPerceptions. It recognizes a wide array of Web Analytics Tools’ tracking codes and shows you if your tracking code is successfully being executed (or not), crawls your site to find untagged pages, and so on.

A drawback is that it only works in Firefox, although it allows you to fake another user agent (like “iPad” or “Internet Explorer” which can be cool.

The basic version is free, but to be honest, it doesn’t help me that much for my use cases. Maybe I am too stupid to use it the right way, my use cases aren’t the ones the tool is made for (like using several web analytics solutions on one website), or I should try the paid versions.
So feel free to share your experience with WASP here in the comments.

Charles Debugger
A tool similar to Fiddler2, see this blog post on how to use it for Web Analytics Code Debugging.

Firebug/Chrome Developer Console:
A tool that makes any JavaScript Debugging so much easier, so it is a must-have for Web Analysts, too. And if you use Chrome, you don’t even have to install anything, not even a browser add-on (see this video by a Google Chrome Developer with 12 tricks to get the most out of the Developer Tools). That helps when you have to debug on someone else’s computer for example.

The function I use most of the time apart from the Console (where errors are being logged) is the Network Tab. It can tell us if the tracking beacon has been sent to Google Analytics successfully. To find out, look for the __utm.gif request. If it displays a “200 OK” status code (see the green light in the screen shot), you know that Google Analytics has received the current Pageview or Event. You can take a look what is inside that request in the “Headers” tab (Cardinal Path’s Kent Clark’s marvelous “Cheat Sheet” helps interpreting the values).


Chrome GA Debugger / ga_debug.js
Google’s recommended debugging tool for Google Analytics is Chrome’s Add-On “GA Debugger”. It is basically a form of using the “ga_debug.js” script without having to alter your page’s code at all (if you use ga_debug.js, you will have to change ga.js into /u/ga_debug.js on every page you want to debug). Chrome GA Debugger is a nice and easy-to-use tool that logs every Pageview and Event that you send to Google Analytics in your Chrome Developer Console (right-click on any part of the page => “Inspect Element” → go to tab “Console”):

Chrome GA Debugger shows you in an easy-to-read format what is being sent to Google Analytics without having to understand or inspect cookie variables or the Network Tab of your Console. It gives you hints like:

  • Does my visit have the correct source/medium/campaign?
  • Are there pages that accidentally override those sources?
  • Are there pages where conflicting JavaScript or other reasons hinder the Tracking Code from being executed?

I am not using Chrome GA Debugger much anymore though because:

  1. It does not help with most cases of Event or Virtual Pageview Debugging. Events or Virtual Pageviews are most often tied to a click on a link (if you want to track the clicks on outbound links for example). If you click on a link though, you usually get to a new page, in which case Chrome’s Console is being cleared – and the Event Tracking call with it. So before you can take a look at what is being logged, it is gone.
  2. It is Chrome-only. What works on Chrome doesn’t necessarily work on Firefox or Internet Explorer.
  3. It breaks down sometimes, especially if you click quickly from page to page. And once it has broken down, nothing is being logged anymore even if you click slowly again to ensuing pages. That freaked me out because it always made me wonder whether my code wasn’t working well. You can easily restart the tool though by reloading the current page, but, even so, that is one factor that caused me to rarely use Chrome GA Debugger.

So much for a brief overview on the matter and a deeper look into Chrome GA Debugger. In my next article, I am going to show you how to effectively use Fiddler2 on some real-life examples.

Options to Track Your 404 Errors

There are many debates as to the best way to track 404 errors. The range of tools and functions range from just being able to count the 404 errors, all the way up to tracking your 404 errors, then helping you remedy the 404 errors. As always, there is never one fix that applies to all websites. The best fit for a 404 tracking tool depends on what type of site you have, how often errors occur, and whether you need a quick way to fix these 404 errors. Once you answer those questions, take a look at this list of 404 error tracking tools.
  1. Google Analytics is a great option if you already use Google Analytics on your website. If you do decide to use Google Analytics, first you would install a small piece of code onto a custom 404 error page for your site. This code will track the amount of times the error page occurs, and then embed this information into the “Top Content” section of your Google Analytics report. Another awesome feature is the ability to tell you the URL that generated the 404 error and the link that sent the user to that error page. Something to keep in mind, however, is that using Google Analytics to track 404 error pages cause your 404 metrics to be included in your reporting. 404 numbers are great to have when they are bigger than most of your other content, but these numbers may not be great to include in other web metrics, such as pageviews. Also, Google Analytics does not offer a way to remedy the 404 error page. Once the 404 error occurs, it’s up to the webmaster to write code to create a 301 redirect to send the user to the new, working page. Therefore, Google Analytics is perfect for websites that 1. Already use Google Analytics 2. Are small and/or static sites and therefore do not generate too many 404 errors. 3. Your custom 404 error page follows 404 error page Best Practices, and is very good at keeping visitors on the website. If your website does not meet these criteria, then you may want to look to another tool to fix your 404 errors.
  2. Linkgraph is a webmaster tool that makes use of a widget to let the user know that the page they requested no longer exists and then after mini animation, it provides the new URL to the content the user was looking for. Linkgraph works through logging a website’s page index, and then tracking changes to any of the pages. The Linkgraph service is free to try for the first month, then after that it’s £150 (which converts to about $224) for the first year. To see the widget in action before you decide, there’s an online demo of the Linkgraph widget. This widget seems to work best for sites that have a lot of changing content. If your site has extensive archives then this may be the best tool for you. Just keep in mind that Linkgraph does not remedy 404 errors. The 404 error count will continue as usual, which may have a negative impact on SEO.
  3. Alex King’s 404 Notifier is a wordpress plug-in that tracks 404 errors. Looking at this tool, the only downfall is that it only works for WordPress and it is only a tracking tool. 404 Notifier tracks 404 errors on your website and creates a table that logs all the 404 erros that occur on your WordPress blog. Another great feature is that you can set up a 404 Notifier RSS feed or get email updates, so you can get all your 404 information without having to always log into your WordPress Admin Page. On top of all the benefits, Alex King’s wordpress plug-in is free to use on your site.
  4. Errorlytics is a SAAS (software as a service) application that has a couple additional features compared to other 404 error tracking tools. Not only does Errorlytics collect information on all 404 errors that occur on your site, but it also provides an opportunity to set up rules to handle the 404 error if it occurs again. These rules generate 301 redirects, which have great SEO benefits, seamlessly send the user to a relevant working web page. The sources of your 404s are also shown on Errorlytics. 404 error source information is helpful because it gives you the opportunity to try and get these bad links fixed to reduce the number of times a 404 error shows up on your site. Errorlytics also adopts some features from other 404 trackers, such as an RSS feed and email notifications.

Here are just some of the tools to track your 404 errors. If you decide, as a webmaster, that it’s time to take action against pesky 404 errors, than one of these four sites will help you get started.

Interview: Errorlytics Co-Creator, Josh Katinger

Earlier this week I had the opportunity to catch up with Josh Katinger, Co-Creator of Errorlytics and President of Accession Media. During our chat I was able to get Josh’s insight on Errorlytics and importance of monitoring your error pages.

[Manoj]: What was your inspiration to design a product like Errorlytics?

[Josh Katinger]: Part of our business model is being a web development shop for various types of clients. In our years of managing websites for our clients we realized that one of the major problems that most webmasters ignore is 404 errors. Most websites get a lot more 404 errors than most webmasters realize, which is bad for website visitors and for search engine rankings.

[Manoj]: Can you briefly describe how Errorlytics works?

[Josh Katinger]: Through a script that you download and install on your server, Errorlytics records all the 404 errors that occur on your site. You can then log into the Errorlytics interface and write rules that will handle those errors going forward. They can be very specific rules for one specific 404 error, or broad matching rules that handle re-direction of one entire directory or group of pages to another.

[Manoj]: How is Errorlytics different than error page reporting found in Web Analytics?

[Josh Katinger]: The largest difference is that analytics tools only report 404s. Errorlytics allows you to actually fix those 404 errors in a search engine friendly way.

[Manoj]: What kind of insight are site owners missing out by not monitoring their 404 pages?

[Josh Katinger]: The thing that always surprises us is all of the strange bots and page requests that are made on a site. Most of the sites we track get requests for pages that never existed on the server in the first place. And if you own a site that depends heavily on ad revenue – which in turn depends on page views – by fixing your 404s you are preserving site visits and page views. Letting pages on your site continue to 404 is like throwing money out the window.

[Manoj]: Can you let us in on any enhancements in future versions?

[Josh Katinger]: We are planning on getting plugins for the IIS web server, ASP and ASP.net. We are also looking at a plugin for the MovableType blogging engine. We are also interested in rolling out functionality that will allow users to export and upload a list of redirects for bulk creation instead of having to create them on a one by one basis.

[Manoj]: How much does Errorlytics cost?

[Josh Katinger]: We have several pricing levels for all types of individual webmaster and large organizations. You can view our pricing on our sign up page http://www.errorlytics.com/sign_ups/plans.

Can Optimizing My 404 Error Page Make Me Money?

No matter what type of site you may have, 404 errors may cost you something. It might not be money, but it’s costing you something. Retail sites could be losing money. Other types of sites, however, may be losing something just as valuable…pageviews…return visitors…things like that.

On your site, what do you use as a measure of site performance? How have you been doing lately? Maybe you’ve been enjoying high numbers for a while, or maybe you’ve been getting used to steady KPI growth. How much would your website performance improve if your traffic and/or pageviews grew by another 10-25% percent?

The truth is, your site could potentially do that extra 10-25%, you just don’t benefit from it because your visitors are encountering 404 page not found errors. These visitors can be potential browsers and buyers, but once they hit that 404 page, they’ll leave and bring their money to another site.

How do you keep these people on your site? There are two paths you can take: 1. Optimize your 404 page WITHOUT trying to ID and eliminate the errors from occurring or 2. Optimize your 404 page while attempting to ID and eliminate the 404 errors from occurring on your site.

Option #1: Optimize 404 Page ONLY
This can be done through a great custom 404 page. There are certain guidelines for an awesome 404 page to follow when working on your custom 404 page. Some of these guidelines are:

  1. Have links to possible pages that the user could possibly have been looking for.
  2. Keep the page copy in a “It’s not your fault” or “We’re going to help you” tone. Unless you’re trying for a comedic edge, don’t make the user feel like they’re wrong or doomed.
  3. Give them a way to contact someone directly, to talk about the 404 error they experienced. An email address or phone number would be best.
Optimizing your 404 error page will definitely help keep some visitors on your site. There are some downfalls, however, to only optimizing your 404 page. First, 404 errors will keep occurring on your page, which is bad from an SEO standpoint. Search engine spiders don’t like 404 error pages and question the importance of an error filled website. Also, even if you have a great 404 page, not all of your visitors will make a second attempt to find what they were looking for. Some of them will still just leave. For a way to keep some of those visitors, read Option #2.

Option #2: Optimize 404 Page WITH ID & Elimination Process
If you decide that you want to keep more users than an optimized 404 page could keep on its own, then do this option after completing option #1 successfully. Get a system in place to track your 404 errors. Google Analytics has the capability to track your 404 errors. Simply tracking your 404 errors, however, is just the first step. You’ll need a tool that will tell you where the 404 errors are being generated, and then create SEO-friendly 301 redirects to send visitors and search engine robots to a functional page. Tools, like Errorlytics, help identify 404s, the source of the 404s and then gives you the opportunity to create rules to automatically redirect these 404s to the proper working web page. Taking the couple extra steps is a small investment of time, that may have huge returns in preserving and/or improve site performance.

In conclusion, don’t forget about the 404 error page. If you give it the same attention you give your other pages, it will return the love and bring in some visitors that you’ve been missing out on.

Adding Your 404 Page to Your SEO Strategy

SEO campaign strategy can be an exciting stage in the website building process. As a lot of websites are looking to optimize their page, however, finding a creative edge is becoming more and more of a challenge. One way to add an extra creative aspect to your site is to make an awesome 404 error page. 404 error pages are often forgotten and get no attention, but what people fail to realize, is that it’s a page just like any other page on a site. It has the potential to be seen by visitors and it can generate traffic and awareness for your site.

First, a funny, interactive, and or unique 404 page can generate a buzz for your site. Some sites make it onto blog posts about creative custom 404 error pages simply because they have a 404 page that the blog writer found interesting. People may find a 404 error page they like and send the link to their friends, family members and co-workers. The viral marketing opportunity in a good 404 page can bring in traffic otherwise not seen by a website. 404 error pages are also important vehicles to carry a site’s branding strategy. An effective 404 error page should have the same look & feel of the rest of the site, following through on the branding strategy. What’s more, the 404 error page has a lot of freedom to have it’s own “voice”. If your company is fun loving, for example, a funny and interactive 404 page can strengthen that trait. Make your 404 error page work for you.

In conclusion, when a lot of work is put into building a functional and aesthetically pleasing site, don’t forget to unlock the power of the 404 error page.

This post is brought to you by the SEO team at Errorlytics/Accession Media.

10 Funny 404 Error Pages

A good way to get through tough times is through laughter. When a user encounters a 404 error on a website, try to minimize the anger with some giggles. Here are some sites that have pretty funny 404 error pages. Take a look!

If you know of any funnier ones, please feel free to post the links here.

Brought to you by the 404 error-crazed people at Errorlytics