Track AJAX Requests with Analytics

Google Analytics has included the ability to track AJAX requests for quite a while, but I don’t know how much awareness there is of this particular feature. Personally, I just discovered it the other day. I was looking at my Analytics data for a particular page on which I heavily use AJAX to replace all of the body content based on form selections. At that point, it occurred to me that, while I was getting good information about the numbers and types of people visiting the page, I wasn’t getting any segmented data based on the information they were requesting.

Retrieve a Portion of HTML with jQuery

jQuery offers some really powerful functions and methods to utilize AJAX. One that I’ve discovered recently is the .find() method. The .find() method allows you to search for a specific HTML ID within some HTML and then returns only the content found within that ID.

Using Google to Serve Up MooTools or JQuery

You’ll find a lot of tutorials online and various speed-testing tools that tell you to use a content distribution network (CDN) to serve up your images, style sheets and javascript files. When they say that, they’re referring to using cloud storage (a series of servers located across the world). CDN allows you to serve up your content locally to your visitors, making it quicker and easier for them to load your site.

Today, I discovered that Google actually provides a bunch of common javascript libraries, including MooTools, JQuery, Yahoo User Interface (YUI) and more, for free (though, they’ve apparently been doing so for at least a year). Instead of saving the javascript library to your own server and linking to it in that location, you simply link to the javascript files on Google’s server and it’s served up to all of your visitors from their CDN.

Let Your Users Know an AJAX Event has Occurred

With AJAX becoming more and more prevalent, we, as developers, sometimes forget that the average user might not realize parts of the page have changed after an AJAX event has fired. This becomes especially problematic when the changes are occurring outside of the current viewport (which is highly likely if you have a large percentage of visitors using an 800×600 or even a 1024×768 screen resolution).

By adding a few simple lines of javascript to your AJAX event handler, you can make your visitors aware each time the AJAX event changes the content of the page.

Using Javascript To Switch Images

This post isn’t really going to be about javascript rollovers, as they have been covered in the past and really are at the point where CSS has basically replaced them. This post is actually going to briefly explain how to preload an image with javascript, then add it to the page (either as a new image or replacing an existing image).

Let’s say you have a page with multiple thumbnails that can be clicked to load the full-sized image in a specific area of the page. In the old days, we would have done this in one of two ways: 1) Make the link actually lead to a different page with that new image shown or 2) Load all of the images at once, hiding them with CSS, slowing down the initial load time of the page.

With the Javascript image() object, however, you can actually preload the images when the appropriate thumbnail is clicked or even after the page finishes loading. You can even display a “loading” indicator until the new image is fully loaded.

Why is Everything so “Flashy”?

I’m sure this problem has always been around, but I hadn’t noticed it nearly as much for the last few years. So many people seem to be using Flash on their sites again, relying on it, and javascript, to render much of their design.

The problem, of course, is that a user without javascript or without Flash, doesn’t get to see much of what everyone else sees.

So, my question is why everyone seems to be using so much Flash again, recently? Why are so many home pages being built almost completely with Flash, only to completely fall apart when javascript of Flash is disabled? Why use Flash at all when 99% of the things being done with Flash (aside from things like YouTube videos, etc.) could be done with javascript and AJAX nowadays, and could be built to degrade gracefully for those without javascript?

An interesting discussion on this subject was started over at CollegeWebGuy.com. Since then, I’ve come across even more examples, though I don’t really feel right in sharing them.

It just bothers me, as someone who railed against Flash for so long only to see the days of pointless Flash splash pages finally go by the wayside. Now, to see Flash seemingly making a comeback in such a big way (at least, among higher education Web sites) really upsets me. To me, it actually seems almost lazy.

Why bother putting in the effort to develop sound DOM javascript and AJAX that degrades when you can put something together in Flash in a few minutes?

Enough of my tirade. What are your thoughts? Am I just super-sensitive to this, or are you noticing a comeback in Flash usage, as well? Does it bother you to see that, or are you okay with it? If Flash is necessary for certain applications, what are some ways you can make it accessible to disabled users?

Pages: