Enter jQuery. If you’re a web developer and you haven’t taken jQuery out for a spin yet, then you need to do a little reading. Among jQuery’s many features is its ability to easily select any element on an HTML page from your JavaScript code, and then manipulate or watch that element.

Watch it like a hawk.

The advantage for event tracking? You can neatly organize your event tracking codes, putting them all in one place — in your header or an external JavaScript file — rather than littered throughout your code. It makes tracking your tracking easy, and it can even speed up the deployment of powerful event tracking codes.

Let’s look at a quick example. Suppose that I have a link on my site, and every time that link is clicked, I’m tracking it as an event in Google Analytics. My code may look something like this:

Clean it up with jQuery
The details of the link aren’t important, but essentially I’m tracking clicks on external links, in this case one that goes out to Google Canada. Here, I’m using the onclick attribute to assign the action to the link. What jQuery lets me do is move that out of the link. I can replace the JavaScript with an ID in my link:

And then move the tracking code to a <script> area in my header:

What we’ve done is created a function that will execute on $(document).ready, which is a jQuery handler for the moment that the DOM — the set of objects on the page — is fully loaded and ready for manipulation by JavaScript. We then create another function that is bound to the click event of the link we created, which we reference by its ID, GoogleOut. The selector style is the same as CSS: we use the ‘#’ symbol for IDs, and the dot ‘.’ for classes.

One code for multiple events
Now, we have the advantage of moving all of our event tracking code to this same $(document).ready function, listing them one after another. That helps with the managability, but we still have to set up IDs for each link. What if we have several external links on a page? It would be as tedious to give them each an ID as it would to manage all of the onclicks.

For this, we can use jQuery’s ability to not only select multiple elements on a page, but gain access to individual elements. First, let’s change our link code. Rather than give it an unique ID, let’s give it a class name, “external”, which can be used for all of the external links on our site.

Next, let’s modify our code to select all external links, instead of just our Google one.

You’ll notice that not only did I change the selector to 'a.external', but I changed the last parameter of the Google Analytics event tracking code to $(this).attr('href'). In my original code, I had written in ‘google.ca’ so that we would see in the Google Analytics reports that the click out was on the link to Google, specifically. Now, I want to track all external links on my site, not just to Google.

In this case, I’ve used jQuery code to select the href attribute (using the .attr() method) of whatever link was clicked (which we specify by $(this)). The href attribute, of course, contains the URL of the link. So, not only does this code now track my link to Google, but it will track each and every external link on my website, as long as I tag them with the external class name, and tell me which external links have been clicked.

By now the power of jQuery for event tracking should be clear — not only can you use it to clean up your code, but you can track multiple events with a single line of code. You may even be able to add event tracking to large sites without changing much more than the header code. jQuery selectors will allow you to grab existing elements on your web pages without dabbling in their individual code.

If you’d like to learn jQuery, I highly recommend Sitepoint’s jQuery: Novice to Ninja. I have a copy, and it’s a great resource, both for those who want to dip a toe into the jQuery waters and for those who want to expand their skills with jQuery and JavaScript in general.

It’s powerful stuff for neat, efficient coding of event tracking. The example I used, specifically, can help you determine which external links on your site are useful, and which aren’t. For example, using this data a web analyst could tell you whether the outbound links on your site are helping to complement your site or lend credibility to interested buyers — or if they’re just sending visitors away for good.

What’s Event Tracking?

Traditionally, web metrics were entirely based on page views. We look at what pages visitors see, and in what order they see them. But that’s not how the web works anymore… things are not just page-by-page. You can search a Google map and then move around or drag your location pins without reloading the page. You can post your Facebook status updates and see new tweets come in on Twitter without reloading. You can watch, pause and rewind videos, without reloading. JavaScript, which enables this interaction, is more important than ever to using the web.

Event tracking allows you to gather data when these things happen. Older techniques for tracking things like video plays involved forging URLs — using a snippet of code that would “pretend” that a page was loaded so that we could track the event. With proper event tracking, we no longer need to view things as URLs. We can track events as what they are — non-pageview events.

Getting Started

Here’s what you need to know to get started using events in Google Analytics:

First, Google has set up several fields for each event, for the purpose of categorizing them. Events are grouped by Category, Action, Label and Value. Let’s look at how they play together.

The above diagram shows four events that are grouped into two categories. The events are represented by the coloured boxes.

Let’s consider the first category of events, “Videos”. This event category will relate to actions that are taken on videos throughout the website. In other words, all events that take place with videos on the site, including videos played, paused, downloaded or shared, will be tracked in this one category.

The next level down is the Action. As the name suggests, actions are the specific thing that was done by the user to trigger this event. In the case of these videos, we have an action for “Play” and an action for “Pause”.  We can find out pure metrics for actions, such as how many videos were played by a specific segment within a time frame, or we can use them to group specific events and drill down by event type.

On the next level is the label. For our videos, we’re using the label to indicate which video an action was performed on. For instance, the first event in the diagram is a “Play” action labeled “Training Video”. Now I know specifically which video was played. The next action has the same label, but is of the “Pause” type — meaning that the training video was paused, triggering this event.

The last number is “value”. Value is an integer field which, in the case of my videos, is left blank. Values are used to provide specific counts that are useful to the event. For instance, if the event is the removal of an item from a shopping cart, I may use the “Value” field to indicate the dollar amount of the item removed. Then, I can know the total value of all products that were removed from carts prior to purchases.

Our next event category does make use of the values. This category is called “Contact Form”, and is used on a website for events related to that form. Our first event’s action is a form error, which means a failure to send the form because something went wrong.  The label is used to indicate the type of form error, in this case, an “Invalid Email”. We’ve also included a value, “3″. That value is, for this event, the number of errors that the specific visitor has encountered so far. Thus, we know that this invalid email was the third error encountered by the user.

The last event is also for the contact form, in this case tracking a successful submission of the form (the Action), and the type of request that was sent (the Label).

Now, you don’t necessarily need to use Categories, Actions, Labels and Values in the exact way that I’ve laid out. What matters is that you formulate a method for tracking events and stick to it.

The Code: Tracking an Event

To actually implement the tracking on your site, you’ll need to add a little bit of JavaScript code. The code I present here uses the asynchronous method of tracking. This is a new method of tracking that Google recently deployed as its standard tracking method. You don’t have to use the asynch. method to use event tracking, but it may be a good time to upgrade anyways.

You can tell if you have the asynch method by looking at the Google Analytics tracking code on your site. If it begins with the following:

Then you’re ready to go. If not, just log into your Google Analytics account, re-copy your tracking code and update your site.

Now, you just need to add tracking codes to the events on your site. Suppose, for example, that you have an image gallery on your site, and that clicking on an image enlarges it. Your code for a particular image may look something like this:

Let’s say you want to track how many people click on this image. You’ll want to add the tracking code to the onclick event for that image. Onclick is a JavaScript event that allows you to execute code when someone clicks on something. To do so, add this code.

Let’s examine the code for that event more closely. The code to track an event in Google Analytics is as follows:

For our event, we coded it as follows:

The first field in the _gaq.push() function is called ‘_trackEvent’. What it does is obvious — it tells Google Analytics that we want to track an event. The next field is the category. We set it to “Images”, because that’s what we’re dealing with. The action is the next field, which I set to “Enlarged” to tell us that someone clicked on an image to enlarge it. The last field is for the label, which I set to the filename of the image that is being enlarged, so that I can track how many times each image is enlarged.

Notice how I didn’t add a fifth field for the value. I’m not tracking a value here at all, so I can omit that bit. In fact, you can also omit labels if you don’t need them.

Let’s look at another example: tracking external links. If someone clicks on a link that takes them outside of your site, you don’t have access to the data for the page they land on, so you wouldn’t know it happened. With events, you can trigger a bit of JavaScript to occur right before they leave your site. For example, let’s say I want to track how many people click on the link to my Twitter account. All I need to do is add an event:

Now, I can track who clicked on the link to my Twitter profile, and how many times that link was clicked.

Reporting Event Data

Once you have your tracking set up, you can view events as they occur. Note that you don’t need to set up events in Google Analytics before you track the codes. Just like you don’t need to add every URL into Google Analytics manually, GA will track event data as it comes in automatically.

You can find the event tracking under Content > Event Tracking. Here, you can view events by Category, Action or Label… or you can drill-down into the heirarchy to see specific subsets of the data (such as all Clicks for a particular link). You can also segment this data just as you can with normal page view data, so you can see which videos were played by people who bought products, or whether or not Canadians had a hard time filling out your forms.

Taking Action on the Data

Event tracking is a great tool to give you some more data, but as always, the value of web analytics is always in the insights that data brings. This is where a web analyst can dive into the data and come up with actionable things you can do to meet and exceed the business goals of your site.

In the meantime, I’ll talk a little more about improving and organizing your event tracking in some upcoming posts. Be sure you don’t miss them by subscribing to Work, Web, Play.

I recently saw a commercial for a Canon PowerShot camera, advertising its new low-light photos feature. I was interested. I went to the URL shown at the end of the commercial.

It did not go well.

Finding the page

In online campaigns, this isn’t a problem. If you’re coming from an email or an online ad, all you need to do is click on a link in order to get there. Remembering the URL isn’t a problem. But with a TV spot, your URL is only shown for a couple of seconds. It’s easy for someone to forget what it is, or not remember it completely.

The URL for this landing page is canon.ca/itstime.

When I was at my computer, I couldn’t remember whether I saw the spot on a Canadian channel or one of the national American ones, so when I first entered the URL, I went to canon.com/itstime. That page doesn’t exist. Of course, I figured then it was probably canon.ca, but some people may have given up there. If it were me, I’d have taken the 30 seconds it takes to ask someone over at the Canon U.S. site to redirect the URL, or put something there. I’d also have redirected URLs like canon.ca/itistime to this one, just in case. The idea here is simple: people will make typos or remember the URL wrong, and not realize it. In cases where it’s easy to catch the error, catch it and keep the visitor.

Flashy, flashy… loading… Flash

Upon arrival, I was immediately disappointed. The landing page was Flash. OK, so I’m a web marketer and developer myself. I have reasons to dislike Flash, and the average person may not notice or care. But what the average person would and does notice is the consequence of having such a site. When I got there, after several seconds of nothing but a blank white page, I was greeted with this:

Well, more loading time. But hey, at least they’re nice enough to give me some rough idea of how long I’m waiting by giving me the percentage of how much has loaded. A few seconds go by, and I get this:

So, more loading, then? I guess that “100%” I saw a few minutes ago meant they had loaded a new loading symbol to show me. Neat. I can’t wait to see what happens next. The moral of the story: either use fast-loading Flash, or better, use text and images.

What was I here for again?

After about thirty seconds or so of combined loading, I got this:

Now, I came to this site because I saw the PowerShot commercial, so at least this little wheel thing started on the PowerShot. But my question is this: if I came here from a commercial for a camera, why am I looking at a printer and other things? Obviously this page is being used for multiple ads, but why? The landing page should be targeted to whatever it is that got me here. I should be kept interested… give me a path to follow.

While admiring the nice Flash-y features of this little page, my mouse wandered. As it did, these products began to spin, and getting back to the camera was more challenging than it should have been. Sometimes, point-and-click is better. Back on the camera, I pointed. I clicked.

Awesome. … Let’s wait a few more.

Who are these people? Do they look like cameras to you? Are they even holding cameras? Maybe they’re posing for a photo. Am I supposed to have a camera? This site isn’t helping me get a camera. I guess I’m supposed to click on one? I go to hover over one, and here’s what happens:

Oh, I get it. The people are features!

Look, I’ve been working in web development for years, and there’s something important I’ve learned about designing an interface. The user isn’t inside your head. They may not immediately clue into what you want them to do, or how they’re supposed to find their way around. Your job is to make that as simple and painless as possible. If I, a web developer, am not completely clear on how to get where I want to be on your site, then there’s a problem.

Ok, so which one of you is the low-light photos feature? I already feel like I’m in trouble, because I saw the Fisheye Effect commercial, and that’s not the same guy from the commercial. After searching, it turns out to be the kid in the cape from the back. This may be the same kid from the commercial. He has similar hair, but different clothes. Ok, what do you have for me, kid?

Hey, look, I made it. There’s a little description of what the feature does, but it doesn’t really tell me anything new. But whatever, now I can see what cameras I have to buy to get it. Or I can watch the commercial again, which is like the “you lose, go back to start” of this whole thing. Let’s click on a camera.

I got impatient waiting for all the pieces of this thing to load, but that spinning loading wheel eventually turns into more colours, and then another wheel appears, which eventually turns into accessories.

This screen has a nice little buy-a-camera feature that I like. That’s something that should have been on the first screen.

Well, that’s embarassing

I went to go visit this in Firefox, which cached my results. So, when I wanted to take screens of all of the happy loading pages, I opened IE. Here, I learned something interesting. This landing page doesn’t even work in IE! In IE7 and IE8, on two seperate machines, I got the percentage loading screen and then a blank grey-shadow background with nothing else. Nothing.

Also, and this may be partly just my ADD, but I twice forgot I was using a Flash site and clicked my browser’s back button when I ended up in the wrong place. When that happens, you have to start over. Just to rack up another point against Flash sites.

What have we all learned?

What can we, and Canon, learn from this landing page? To sum it up:

• If your link has to be remembered, catch potential URL errors and misspellings with redirects.
• Flash can be costly in terms of resources. Loading times are no fun, and visitors lose interest.
• Flash also messes with the normal browsing paradigm. Better not to use it for entire pages.
• Closely target your landing page to its campaign. If I came because of a specific product or feature in a commercial, take me right there. If it were my ad, the low-light photos commercial would have ended with canon.ca/lowlight, and taken me right to that feature and the cameras that supported it.
• Don’t make me guess anything. I don’t know which person the camera I want is hiding at. I’m not here to play games with you, give me a straightforward path to my goal, which just happens to be your goal, too. We both want the same thing: for me to buy a camera. Why is it so hard for us to get there? Put the option for me to buy a camera on page one, and every subsequent page. You can narrow down the choices as we go, but there should be a clear path.
• Test your site. Seriously, if your site doesn’t work in IE, you have problems.
• Remember what landing pages are for, and build shorter paths to that end

This experience did not result in me buying a Canon PowerShot camera, and I was unusually persistent in finding, or rather fighting, my way through the site. Even if this campaign turns out to be relatively successful and people go buy these things in stores, or even online, it could be doing much better.

Endmark is a simple little thing.  What it does is adds a little end-of-article symbol to all of your WordPress posts, similar to the symbols found at the end of magazine articles.

Now, for magazines the purpose of the symbol is really to show where the article ends, or rather that it ends and is not continued on another page.  On a blog, that’s more obvious anyways, so the purpose of it is cosmetic.  Still, I wanted it for one project, so I made this.

If that sounds like a nice addition to your blog’s style, then head over to the Endmark WordPress plugin page and give it a try.  Let me know if you notice any bugs or have any comments or requests.  I’ll do my best to keep it somewhat maintained.

By the way, you can see Endmark in action on this very blog.  For example, there’s an Endmark at the end of this line.

The hard drive is fine, but inaccessible for two weeks while I ship off the hardware for repair by Dell.  The insane luck part: I ran a backup the day before it died. I try to do them regularly, and I ought to automate the process, but it was by sheer luck that it failed right after a backup.

I’ve tried to be good about backups, as I’ve had a few hard drives fail over the years.  It certainly paid off this time. So as a public service, this is me, reminding you, back up your work.  Now would be good.

It’s a Dell XPS M1330, for those keeping score.

Update: Purolator dropped off my notebook already, good as new.  Here’s the timeline for my repair:

• Tuesday afternoon: The motherboard fails. I call Dell, they spend a few minutes trying to diagnose it then tell me I’ll have to send it in.  Unfortunately, the warranty is in Staples’ name, where I bought it, so I had to update my information, which I’m told takes about 24 hours to complete in their system.
• Wednesday morning: I receive an email from Dell saying that the update of my info is complete.  I call them back, and they arrange for my notebook to be shipped to them.
• Thursday morning, 9:00 am: Purolator shows up to drop off a box.  I remove my hard drive and place the notebook in the nicely padded box.  I slap-on the pre-paid shipping tags and  I call back Purolator.  They come get the box that afternoon.
• Monday morning, 8:25 am: Purolator arrives with my repaired notebook. Everything seems to be in order.

Pretty quick, I think.  I’m fairly impressed by Dell this time.  (Now, I have to get back to work!)

Most of the interface remains unchanged, though it’s supposedly much faster. The way widgets work is the most obvious of the changes:

The upgrade went smoothly on this blog (so far), and I’ll be rolling it out to my own sites, and some of my clients’ sites, over the next couple of days.

If you use the service, you probably know that Entrecards, which used to show approved ads from community members, and paid you in credits, and allowed you to advertise on other Entrecards, now show paid ads 50% of the time.  You can reject paid ads, and check an option (it’s not checked by default!) to only allow approved ads on your widget, but that doesn’t change this core change in the purpose of Entrecard.  OK, so that’s not what Entrecard was to begin with, and not what we signed up for.  But maybe we’ll all make some money, so let’s hear them out.

It was recently announced that algorithms would be developed to determine who gets payouts first.  The algorithm would attempt to determine your value to Entrecard’s community as a whole.  Feel the love.  Here are the criteria:

1. How many cards you drop / how frequently
2. % of paid ads you approve
3. % of Entrecard ads you approve
4. Listings you create / completed sales in the market
5. How many credits you transfer to others (indicative of contests, tips, and generosity)
6. % of credits you spend on Entrecard ads

Ok, so, I have to be willing to approve most of the ads coming my way, even if they’re irrelevant to my site and inappropriate for my visitors?  I have to participate in this weird marketplace community that trades goods and services for Entrecard credits (I thought those were for advertisements, but whatever.  I can pay 1EC for some guy to follow me on Twitter.  Yippee.).  And I have to hold contests for my credits, or just give my credits away?  You want to buy my credits, but only if I give some of them away first?

Of course, Entrecard has always been more valuable to those who have the time and energy to drop cards all day, to round up huge amounts of credits and hold contests to give them away, etc, etc.  But there was value in it for those of us with work, school, social lives, and, uh, blogging to do anyways.  I got a bunch of junk traffic, and a bunch of valuable traffic.  I got new eyes on my blogs.  I got comments.  But now, the value of the advertisements I place has been halved, since paid ads will show over mine 50% of the time, unless I, too, pay.

So, what motivation do I have to support paid ads on Entrecard? Whether or not I ever see a dime for showing paid ads on my site is completely uncertain.  It looks like if I become more active with Entrecard, I maybe, kind of, could see a few bucks.  But if I cash out the entirety of my credits right now (i.e. if they’d let me), I may be able to eat at McDonald’s.  Y’know, if trying to cash in credits weren’t enough to give me a heart attack.

News. Flash. I get more money than that from Google AdSense where I use it, and I don’t have to jump through hoops to get them to pay me.  I don’t have to run around visiting other AdSense sites and clicking on ads to get a return for the ad space I’m using myself.

Who would join Entrecard after this?  Here’s the pitch: “Put this widget on your blog.  We’ll show paid ads on it.  We might pay you for them, but, sorry, if you’re not going to play our little dropping game, you’ll be last on the list.  But why wouldn’t you want to participate?  Aren’t you a team player?  We’re all about community here.”

What makes Entrecard think it’s cool to push paid ads onto my site and say, “Hey, I’ll get you later”?  Entrecard was great as a community site where everything was about bloggers working together.  But this gradual change into a paid ad marketplace sucks, and the fact that it’s happening slowly has some bloggers excited about the idea that their credits could turn into cash.  So much so, that some people seem to be hoarding credits away rather than using them to keep the free half of the system moving.

I’m trying to have faith that this will work itself out, so I haven’t removed my widgets yet.  Maybe if I just reject paid ads and focus on the original intent of Entrecard, I’ll still get value from it.  Or, maybe the system will improve and I’ll eventually get some money from it.  Entrecard isn’t neccessarily doomed, but I don’t think they’re on the right track.  So, we’ll see.

I joined a community-driven, cooperative ad network.  Now I’m in a paid ad network.  And not a very good one.

It looks like GeoCities is on the way out. Yahoo! posted a notice on the site’s homepage that it will no longer allow new signups for the service, and will be closing it down entirely later this year.  They promise to explain why this summer.

Back in 1999, when the Internet was nice and bubbly, Yahoo! bought Geocities for $3.57 billion dollars.  I don’t think it went well.  They’re probably getting more press now than they’ve had since the acquisition

GeoCities started going downhill for users before Yahoo! entered the scene, when they started pushing more ads and floating watermarks onto the sites.  When Yahoo! bought them, they got worse.  I’m not sure what even happened to my sites back then, but by that point I was moving on to better hosting, and would soon be buying my own domains.

Still, I can’t help but to feel a little saddened as we say goodbye to GeoCities. I first learned how to make websites there, and although I’d probably laugh if I ever saw them again (and I fear I may have used the <blink> and <marquee> elements at some point), it’s hard not to be at least little nostalgic.

The new version of Microsoft’s browser is ready to go.  And just as IE7 was less annoying than IE6, IE8 promises to be even better, with updates to its rendering, including expanded CSS support.  Better AJAX functionality and RSS tools are also included.

The main features of the new browser, though, revolve around security, privacy and speed — IE8 is supposed to be a much safer, faster browser to use, brining it closer to its fast-moving competitors.

The browser is set to launch at around noon today, according to Microsoft.  When the final becomes available, it’ll show up here.  I guess this afternoon I’ll need to take it for a spin around my sites, and my clients’ sites, to make sure everything plays nice in IE8.

Hopefully this also encourages some people (and IT departments) to move away from IE6, now that it’s two versions behind.

Game developer Infinity Ward, the company behind the immensely popular Call of Duty 4: Modern Warfare is calling on gamers to submit suggestions for its next title via Twitter.  In order to submit a suggestion for Call of Duty, Modern Warfare 2, or answer the current question posed by the dev team, just include the hash tag #MW2 in your tweet.

The company has launched a web app to compile the replies, which is now live at twitter.infinityward.com, and is already collecting huge amounts of feedback from the dev community.

This is a great thing for Infinity Ward in a number of ways.  For one, getting lots of feedback and identifying the trends is just going to make the game better, which is great for the company and its customers.  Additionally, it’s building better relationships with their target audience, and helping them ensure that its games remain in gamers’ minds between releases.  (Good call on this one @fourzerotwo!)