The method suggested by Google involves manually applying code to each link. This is fine if you want to just track a few specific links, but jQuery is more useful if you want to track every external link on the page.

Custom Tracking Events

The meat of the custom event is this line (which should be fired when an external link is clicked) is:

_gat._getTrackerByName()._trackEvent("Outbound Links", e.currentTarget.host, url, 0);

• “Outbound Links” is the category of events to track
• “e.currentTarget.host” is the “action”, in this case, the domain the user is clicking to.
• “url” is the “label”, which I use to send the full url of the external link.

If you’re unfamiliar with custom events, here’s the docs page at Google.

Code for Detecting and Tracking Outbound Link Clicks

This code snippet is highly commented and peppered with console.logs so that you can verify it’s working correctly and see how it works. It should only be used in development environments- there’s a compressed version in the next section for use on live sites.

// Outbound Link Tracking with Google Analytics
// Requires jQuery 1.7 or higher (use .live if using a lower version)
// For more info see: http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55527
$("a").on('click',function(e){
		var url = $(this).attr("href");
		// Console logs shows the domain name of the link being clicked and the current window
		console.log('e.currentTarget.host: ' + e.currentTarget.host);
		console.log('window.location.host: ' + window.location.host);
		// If the domains names are different, it assumes it is an external link
		// Be careful with this if you use subdomains
		if (e.currentTarget.host != window.location.host) {
			console.log('external link click');
			// Outbound link!  Fires the Google tracker code.
			_gat._getTrackerByName()._trackEvent("Outbound Links", e.currentTarget.host, url, 0);
  		// Checks to see if the ctrl or command key is held down
		// which could indicate the link is being opened in a new tab
		if (e.metaKey || e.ctrlKey) {
			console.log('ctrl or meta key pressed');
			var newtab = true;
		}
		// If it is not a new tab, we need to delay the loading
		// of the new link for a just a second in order to give the
		// Google track event time to fully fire
		if (!newtab) {
			console.log('default prevented');
			e.preventDefault();
                        console.log('loading link after brief timeout');
			//setTimeout('document.location = "' + url + '"', 100);
		}
	}
	else {
		console.log('internal link click');
	}
});

Compressed Version

This is the same code as above, but with comments and console.logs stripped out:

// Outbound Link Tracking with Google Analytics
// Requires jQuery 1.7 or higher (use .live if using a lower version)
$("a").on('click',function(e){
	var url = $(this).attr("href");
	if (e.currentTarget.host != window.location.host) {
		_gat._getTrackerByName('demand')._trackEvent("Outbound Links", e.currentTarget.host, url, 0);
		if (e.metaKey || e.ctrlKey) {
		     var newtab = true;
		}
		if (!newtab) {
		     e.preventDefault();
		     setTimeout('document.location = "' + url + '"', 100);
		}
	}
});

Viewing the Results

To see if your custom tracking events are firing correctly, check your Google Analytics dashboard under “Content > Events > Overview”. It may take a couple hours before you start to see the results. In this screenshot you can clearly see when the tracking began:

In WordPress

If you are using a plugin for Google Analytics, like Google Analyticator, there is a settings fields where you can add javascript to be included with the tracker. You can also just include it with your other scripts.

Another option to track links easily in WordPress is to use the stats from Jetpack, which give you outbound click data by default.

Instead, set up the tracking variables and just call the Google script once. Here’s what I’ve used:

<script>
var _gaq=[
	['_setAccount', 'UA-1111111-1'],['_trackPageview'],['_trackPageLoadTime'],
	['secondTracker._setAccount', 'UA-2222222-1'],['secondTracker._trackPageview'],['secondTracker._trackPageLoadTime']
];
(function(d, t) {
     var g = d.createElement(t),
         s = d.getElementsByTagName(t)[0];
    g.src = '//www.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>

Notes:

• This is an optimized version of the GA script from Mathias Bynens.
• You can include more than two. Just copy the secondTracker code and repeat.
• The “secondTracker” label can be changed to anything you like.
• _trackPageLoadTime isn’t required, but _trackPageview is.
• The code should be placed right before the close of the body tag.

“There’s no file size or speed issue with using Typekit for body text (as there would be with, say, using SIFR or Cufon). That said, you should make sure to use a font that works well at small sizes and renders acceptably cross-browser. Be sure to take a look at the browser screenshots before deciding on a font.”

Oddly, Google failed me on this question, so I thought I’d post it here for anyone else who was curious.

Demand Media runs eHow.com, Trails.com, Livestrong.com (among others) and social widgets that are viewed on millions of pages per day. It’s a really exciting company and position. Couldn’t pass it up. I start today, which also just happens to be my 29th Birthday.

With Demand Media I’ll be using the skills I honed on WordPress themes. Clean HTML, optimized css, jquery, and subversion. I also think my involvement with the WordPress community was one of the main reasons I was hired- it shows that working with the web is much more than a job, it’s also a passion.

WP Theming was launched just over a year ago in its current form and I’ve been continually amazed at how much I’ve learned by simply by sharing my code snippets and ideas. Here’s my stats when I started in September 2009, and where it’s at now (about 100,000 total):

I plan to continue publishing to this site, but will change the focus from my freelance work to emphasize the content, tutorials and themes. It’s also been a year since the original launch, which means I need refresh the design and weed out some posts that are no longer relevant.

Portfolio Press has been my favorite project this year. I think everyone who does freelance theming for a living should release a free theme if they can. I love seeing how people are using it, especially when it’s been severely modded. A raft of updates are coming to it in the near future- including translations that people have sent over.

I stopped accepting new freelance work since I’ll be working a 40 hour week, but I’ve met a number of excellent developers at WordCamps over the years who I’ve been referring new work to. If you’re a WordPress developer who’s available, go ahead and post your website and skills in a comment here. It’s always nice to have more.

Also, a big thanks to everyone who has left comments on the site over the past year. That’s what makes it all worth writing about and sharing. It’s also a bit addictive- so I’m sure there will be many more articles to follow.

Browsers will generally be able to detect if the website has been updated and get a copy of the new files, but sometimes it fails. This is especially true if your web designer has been changing background images or xml files. To see those changes, you will need to refresh your browser.

Here’s a short video screencast explaining how to refresh the browser in Firefox, Safari, Google Chrome, and Internet Explorer 6.

Click here to view the embedded video.

If you want a more in-depth explanation of how to do this, check out the Wikipedia article.

If you are a new client of mine and want to switch to BlueHost, here’s how to do it:

1. Follow this link http://bluehost.com/track/erideorg (to get the $65 referral fee).
2. Click “Sign Up Now”.
3. If you a choosing a new domain, type the url under “I need a domain”. If you have an existing domain (e.g. with GoDaddy or a previous hosting company), type that url under “I have a domain”. Click “Next”.
4. Fill in the required credit card information.
5. Choose 12 or 24 months and set it on automatic renewal.
6. Send me (devin@wordpresstheming.com) the username and password you chose.
7. Send me all e-mails that BlueHost sends you after signup.

Also Helpful

• If we are moving an existing website, please send the ftp information for your previous host.
• If you had e-mails set up with a previous host, please send a list of every e-mail address.
• If you need new e-mail addresses set up, please send a list of those.
• If your domain name is hosted with someone else, please send the login information to manage that account.

In most cases we’ll be able to set up WordPress, configure your e-mail, and repoint any domains within an hour. Since the referral fee covers up to $65, this work is generally free to you.

Click here to view the embedded video.

On principle I won’t do it. I’ll politely refuse and give my reasons. And so far I’ve never had a client turn down a proposal down because I wanted their site to rank better in Google, or because I wanted their users to have a better experience . Here’s five reasons to drop the splash page and make the web a better place:

#1. Splash Pages are Bad for Search Engines

Search engines are looking for text content in order to index your site. The more relevant keywords you have, the better chances your site will rank for those terms. So why would you leave the most important page devoid of content? A large graphic may look nice, but without actual text on that page users will have trouble finding it.

There are several articles about this, including SEO Killed the Splash Screen and Splash Pages and Search Engines.

#2. Splash Pages are Bad for Usability

Splash pages generally consist of a large graphic or animation that takes several seconds to load. If you have a user with a slow connection, they may not wait that long. This is especially true with mobile users who often run on slower network connections.

Flash animation is especially bad. If your user doesn’t have flash installed on their browser or uses an iPhone, you’ve just wasted an opportunity to show them actual content. They will get a blank page that tells them the flash player is needed.

If you want your pages to be usable by the widest audience, you should make them as lean as possible and avoid using flash. SEO Moz wrote about this in their suggestions for how to convince a client not to use a splash page.

#3. Splash Pages Will Cause Your Users to Bounce

Newfangled wrote an interesting post about how their splash page caused 25% of users to leave immediately.

The number one reason for getting rid of our splash page was that it turned away at least 25% of our site visitors, sometimes more. This percentage has actually been researched and it turns out that at least 25% of site visitors will immediately leave a site as soon as they see a “loading” message for a Flash splash screen (even if there’s a “skip intro” link).

#4. Splash Pages are a Waste of Time

When was the last time you were stoked to see a large splash page? Right, never. I’d say 99% of users will simply click past to get to the actual content they were looking for (if they even wait for it to load), which means you’ve potentially lost some users and just slowed down the rest. You’ve also wasted the time of your web designer, who, if they had any grit, wouldn’t have accepted the job in the first place.

#5. You May Think it’s Cool, But It’s Not

I know, it’s like telling someone their baby is ugly, but you have to do it. Smashing Magazine, in their feature of beautiful splash screens even admitted there probably wasn’t a decent reason to have them.

Enable the Post Thumbnail Feature

Post thumbnails were added in WordPress 2.9. Justin Tadlock has a great article about this. To enable the feature in your theme, simply add this code snippet to the functions.php file:

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
}

To Use Post Thumbnails

<?php the_post_thumbnail( 'thumbnail' ); ?>
<?php the_post_thumbnail( 'medium' ); ?>
<?php the_post_thumbnail( 'full' ); ?>

Get the Post Name

This function is great if you need to style a certain element differently from page to page.

<div class="<?php echo $post->post_name; ?>">
</div>

Quality Themes

For most small WordPress projects, a free or low cost theme is the way to go.  I am developing a section of the site showcase my favorite themes, all of which have been tested and work well.  If you are a developer with a new theme, or are using one that I haven’t posted, please send me a note.

Plug-in Reviews

When adding new features to sites, be it a twitter feed or a photo gallery, my first stop is generally the plug-ins repository.  There’s not always a solution that works perfectly, but in most cases it works well enough and is a lot quicker than developing my own.  I’m planning to review all the plug-ins I use regularly here, and add new ones as they appear.

Tutorials and Time Savers

Here’s my tips and suggestions for developing with WordPress- a lot of which are posted here just so I don’t have to look up them up again.  If I run into a problem, I’ll post about it, and hopefully help someone out there with a similar problem.