The results?  After nearly 2 months of tracking I can say that about 2.5% have javaScript disabled, or 97.5% have javaScript enabled.

The website I have been tracking is  a business and visitor guide to Stow on the Wold.  I chose this site because it is fairly busy (about 4000 visitors per month) and because it very much a general purpose website with a wide cross-section of visitors.  I suspect that a more technical site might show more people with javaScript disabled, my theory is that most people don’t want to disable javaScript and wouldn’t know how to disable it if they did want to.

Update 21st December 2011 – A few more months of data show the percentage with javaScript disabled fairly steady at about 3%.   So about 97% of my visitors have javaScript enabled which is useful to know.

Method

It’s quite simple in principle. When a user loads one of the pages we are using for this test several things happen:

1. A PHP script creates a session on the server and logs this in a mySQL database
2. If no session exists already then the PHP script writes a little bit of javascript into the HTML page to be served
3. If the client has javaScript enabled on their computer the script will run sending an asynchronous call (to avoid slowing down the pageload while waiting for a response from the server) to the server
4. Another PHP script on the server will find the mySQL record created in step one and update the javascript_enabled flag
5. If the client doesn’t have javaScript enabled then the script won’t run and the database will not be updated

Results

So far we have checked 20202 sessions and 1314 of them have had javaScript enabled, a rate of 6.5%.

We will give this trial a little time and a bit of analysis before we roll this out for some proper results (and publish the code so other people can do the same).

Edit: Well the first change was to exclude robots, Googlebot and Slurp from Yahoo! were very quick on the scene and of course they don’t use javaScript.

Further Edit: 31st Aug 2010 The second change was to remove the logging from this page, it seems like my little script was interfering with something in the header of the blog page, perhaps Google Analytics.
I am suspicious about the very low percentage of javaScript we are seeing, further investigation is required. It could be that people are reading this post through feed readers rather than directly and so not activating the script.

Further Edit: 6th Sep 2010 Something isn’t right here, the logging works for me but the numbers look far too low. I wonder if there is something wrong with my javaScript code (I am no javaScript expert) which is causing it not to make the ajax call for most people. This is the code that is included into the header of the testing page:

<script type="text/javascript">
// 
// This script is part of my javascript logging routine.
// If javascript is enabled it sends a request to the server which will log the fact that javascript is enabled.
// 
// The cunning bit which copes with the fact that IE6 doesn't know about XMLHttpRequest, thanks to
// http://ajax-prototype.blogspot.com/2007/02/workaround-to-make-ajax-calls-on.html
//
if (!window.XMLHttpRequest) {
  window.XMLHttpRequest = function() {
    return new ActiveXObject('Microsoft.XMLHTTP');
    } 
}
//
// Send the PHP session_id to the server script so it can update the log record for this session
//
request=new XMLHttpRequest();
request.open("GET","http://www.cotsweb.com/update_javascript_log.php?session_id=&lt;?php echo(session_id()); ?gt; ,true);
request.send(null);
</script>

Perhaps someone else can see what I have done wrong?

What Chrome Frame does is tell Internet Explorer to use Chrome’s rendering engine (Webkit) rather than IE’s own rendering engine.  The benefit for the user is faster browsing, particularly when a website uses Javascript, Chrome’s javascript module is much faster than IE’s equivalent.  The benefit for the website developer is that Chrome is a good modern browser, standards compliant and supporting a lot of newer features such as HTML 5 & CSS2/3 which are not even supported in IE8.

The theory is that if a web page works in Chrome then it will work in IE with Chrome Frame.  Chrome Frame is still very new so they are not quite there yet but I’m sure they will get there.   All those IE specific problems which website designers have had to work around for years, including those still hanging around from IE6, will become a thing of the past.  Wonderful!

But will people use it?

The problem is that Chrome Frame, being a plugin for IE, has to be installed by the user.  Do you remember the bad old days when it seemed that every new site required a new plugin?  Once the user has installed Chrome Frame all will be well but that first installation is the sticking point.

As a webdesigner I can put a piece of code on any of my websites which pops up a window giving an IE user the option to install Chrome Frame so they can view the site properly, but I don’t really want to do that.  People are, and should be, wary of installing things when asked to do so by a website.  And I don’t want people to navigate away from my site because it is too scary or demanding.  In any case most sites work fine  in IE anyway so why do they need to install a plugin?

My real hope is that corporate IT installations might think that installing Chrome Frame to upgrade IE6 would be a good idea.  IE6 is currently the most popular browser in the world, largely because there is no reason for the big corporates to change to anything else.   But a plugin might be different, any existing applications will continue to work fine but new applications could use newer features without the extra coding needed to cope with the particular quirks found in IE6.  It could be quite a money saver.

Critical Mass

I will be monitoring my Google Analytics reports for the day when I see “unChromed” IE6 usage drop below 5%.   I think that will be the time to put the plugin code on my own sites.  And when it drops below 2% I will consider ignoring IE6 all together, a happy prospect.

In the meantime I will carry on as usual, coding around the quirks in IE6 and ignoring the other features I might use if IE7 & IE8 supported them.

I wonder what Microsoft think about Google writing a plugin for them?

Now Google Maps is a wonderful product, very powerful and well documented, but I don’t always find it easy to figure out how to do what I want to do.  So I thought I’d try to make it easier for next time by documenting the issues I came across.

My first problem was creating custom icons for the carparks, I found a suitable graphic but Google Maps has a very smart shadow associated with each icon.  Fortunately I found shadowmaker which made creating the shadow effect very simple indeed, it even provided the code to be included in my webpage.  Thank you very much to Erwin Bolwidt!

Next I wanted to display the custom icon but with a tooltip type title which would give some descriptive text when a mouse rolled over the icon.  Both the icon and the title are options for GMarker, but I had some trouble figuring out how to include more than one option (I’m not very bright really).  The solution is quite straight forward really, just create a new variable which contains all the options (I could also have listed the options in the new GMarker call but that would have been messy).  As you can see I took the opportunity to add a 3rd option to make the icon non-clickable.

// Place parking icon for Maugersbury Road
var Parking3Opts = {title: "Pay and display car parking on Maugersbury Road",
clickable: false,
icon: Picon};
var Parking3Coordinates = new GLatLng(51.927500, -1.718300);     /* position of carpark */
map.addOverlay(new GMarker(Parking3Coordinates, Parking3Opts)); 

That was the map sorted out but I wanted to add a little legend outside the map.  Obviously putting in my

icon on the page wasn’t a problem, I had a copy of that.  But the default GMarker for Google Maps was more elusive, I had real trouble finding a copy of it.  Eventually I did find one here , thank you Korben. So I include a copy of Korben’s image here so others can download it I’m sure the icon is available from Google somewhere but I couldn’t find it.

That was it for my map (so far), I hope that this makes the process a little easier for the next person who is mystified by the Google Maps API.

It has always been difficult to track when someone clicks a link on your website which takes them to an external website (a click through or clickthru if you prefer). The problem is that the resulting request is made to the external website and is logged there, it doesn’t get logged on your own website at all.

For the web designer wanting to log clickthrus this is a problem, the traditional answer is to put the code which opens the new site in a file. When the user clicks on a link some code is executed locally (and logged locally) which then makes the call to the external site. This works fine but it makes it quite difficult for search engines to follow the link to the external site, sometimes impossible. If Google can’t follow the link to the external site then you may be giving them visitors but you are not helping their page rank in Google.

This is obviously a problem that many clever people have been thinking about for some time, one of the best solutions I have found is Search Engine Friendly Click Tracking which uses javascript to log any click on a link to a file or database.

The solution

But while checking some details in Google Analytics I found a section on using javascript events to track outbound pageviews. This is essentially the same technique as mentioned above but integrated with Google Analytics rather than standalone. It seems to me that this little feature using the new version of the Google Analytics tracking code is the holy grail of Search Engine Optimisation!

All you need to do is;

1. make sure that you are using the new version of the Google Analytics Tracking code.
2. That the code is inserted in your webpage above any links that you want to track (I put it just after the <body> tag in my test page).
3. Add a javascript event tag to each link you want to track.

The actual tag is quite simple, this is Google’s example;

<a href=”http://www.example.co.uk” onClick=”javascript: pageTracker._trackPageview (‘/outgoing/example.co.uk’);“>

When somebody clicks on the link Google Analytics will log the click as a call to /outgoing/example.co.uk in your analytics report.

And of course the href code is retained in its natural form so it is easy for search engines to follow the link, you can give the target site the link love it deserves.

I think this is a brilliant development, a big thank you to the wizards at Google for their continued good work!

Bonuses from Google Analytics

Using Goals to monetize outbound links

In Google Analytics you can assign goals to pages which make you money, say the checkout page on your shop. You can do the same thing with your new trackable outbound links, so if you carry advertising on your site you can see exactly how much you are earning. You could assign a value of say 10p to any pageview in the /outgoing/ directory and use Google Analytics to work out your bills.

Tracking calls to images and PDF files

Also, this technique can be applied to any sort of link. I discovered it while looking for a why of tracking views of a PDF file. If you have a file, like a PDF or an image, where you can’t insert the Google Analytics code inside the file then you can do something like;

<a href=”http://www.example.co.uk” onClick=”javascript: pageTracker._trackPageview (‘/my_document.pdf’);“>

And you can track views of the PDF or image file just like they were a regular web page.

Thank you Google

Thank you to Google for another great tool. Now that I know the answer I have no trouble finding the solution with a search in Google but I hope this article saves someone else some time.