The social web has filled our websites with too much third-party clutter as we figure out the best way to integrate content with the favorite sites and preferences of our visitors. Intelligent websites should tune-in to the content preferences of their visitors, tailoring a specific experience based on each visitor’s favorite sites and services across the social web. In this post I will teach you how to mine the rich treasure trove of personalization data sitting inside your visitor’s browser history for deep personalization experiences.

I first blogged about this technique almost two years ago but I will now provide even more details and example implementations.

  1. Evaluate links on a page
  2. Test a known set of links
  3. Live demos and examples
    1. Online aggregators
    2. Social bookmarks
    3. OpenID providers
    4. Mapping services
  4. Summary

Web browsers store a list of web pages in local history for about a week by default. Your browsing history improves your browsing experience by autocompleting a URL in your address bar, helping you search for previously viewed content, or coloring previously visited links on a page. Link coloring, or more generally applying special CSS properties to a :visited link, is a DOM-accessible page state and a useful method of comparing a known set of links against a visitor’s browser history for improved user experience.

  • New Site
  • Visited site

A web browser such as Firefox or Internet Explorer will load the current user’s browser history into memory and compare each link (anchor) on the page against the user’s previous history. Previously visited links receive a special CSS pseudo-class distinction of :visited and may receive special styling.

<style type="text/css">
ul#test li a:visited{color:green !important}
</style>
<ul id="test">
  <li><a href="http://example.com/">Example</a></li>
</ul>

The example above defines a list of test links and applies custom CSS to any visited link within the set. Your site’s JavaScript code can request each link within the test unordered list and evaluate its visited state.

Any website can test a known set of links against the current visitor’s browser history using standard JavaScript.

  1. Place your set of links on the page at load or dynamically using the DOM access methods.
  2. Attach a special color to each visited link in your test set using finely scoped CSS.
  3. Walk the evaluated DOM for each link in your test set, comparing the link’s color style against your previously defined value.
  4. Record each link that matches the expected value.
  5. Customize content based on this new information (optional).

Each link needs to be explicitly specified and evaluated. The standard rules of URL structure still apply, which means we are evaluating a distinct combination of scheme, host, and path. We do not have access to wildcard or regex definitions of a linked resource.

In less geeky terms we need to take into account all the different ways a particular resource might be referenced. We might need to check the http and https versions of the page, with and without a www. prefix to more thoroughly evaluate active use of a particular website and its pages.

I group my tests into sets of URLs with the most likely matches placed at the beginning of the set. I evaluate each link in the set until I find a match thereby exhausting positive indicators of site activity while prioritizing the data scan.

Live demos and examples

Sniffing a visitor’s browser history has good and evil implications. An advertiser can determine if you visited Audi’s website lately, drill down on exact Audi models, and offer related information without ever placing code on the Audi website. I have been scanning the browser history of my site visitors for the past few months and I have coded a few examples to show benevolent uses for improved user experience.

Online aggregators

Web feed subscription buttons

Clusters of feed subscription buttons clutter our websites, displaying tiny banner ads for online aggregators of little use to most of our site visitors. My blog checks a known list of online aggregators against the current visitor’s browser history and adds a targeted feed subscription button for increased conversion. A Google Reader user will see an “Add to Google button” and a Netvibes user will see an “Add to Netvibes” button without cluttering up the interface. I insert direct links to each site’s feed handlers to help convert the current visitor into a long-term subscriber.

Once I match a particular service I could also check to see if the current visitor is already subscribed to my feed. I would simply need to run a second test against the data retrieval URL, such as feedid=1234, to match web traffic with subscriber numbers.

Visit my live example of link scanning popular online feed aggregators for a demo and the applicable code.

Social Bookmarks

Social bookmarking buttons

I like to see my latest blog posts spread all over the web thanks to social bookmarking sites and other methods of content filtering and annotation. Most sites spray a group of tiny service icons near their blog posts and hope a visitor recognizes the 16 pixel square and takes action. Suck. There has to be a better way.

I can scan a current visitor’s browser history to determine an active presence on one or more bookmarking sites. Once I determine the current visitor is also a Digg user I can show live data from Digg.com to prompt a specific action such as submitting a story or voting for content. I can create a much better user experience for 3 services I know my visitor actively uses instead of spraying 50 sites across the page.

Visit my live example of link scanning popular social bookmarking sites for a demo and the applicable code.

OpenID providers

Pibb OpenID signin buttons

OpenID is an increasingly popular single sign-on method and centralized identity service. OpenID lets a member of your site sign-on using a username and password from a growing list of OpenID providers including your instant messenger, web portal, blog host, or telephone company account. Visitors signing up for your site or service shouldn’t have to know anything about OpenID, federated identities, or other geeky things, but should be able to easily discover they can sign-in with a service they already use and trust every day.

I can scan a list of sign-in endpoints for a list of OpenID providers and only present my site visitor with options actually relevant to their everyday web usage. Prompting a user to sign-in to your service with their WordPress.com account should be much more effective than an input field sporting an OpenID icon. Link scanning for active usage should increase new member sign-ups, reduce support costs due to yet another username and password, and make your members happy.

Visit my live example of link scanning current OpenID providers for a demo and applicable code.

Mapping services

Facebook map selector

Online mapping services have changed the way we interact with location data. Need to get to 123 Main Street? Not a problem, I’ll just send that data over to your favorite mapping service to help you find your way.

I can scan a visitor’s browser history to determine their favorite mapping service. Perhaps she is most comfortable with MapQuest, Google Maps, or Yahoo. Or maybe she uses a Garmin GPS unit and would prefer a direct sync with that specialized service. Determining my visitors’ favorite mapping tool helps me deliver a valuable visualization or link I know they prefer.

Visit my live example of link scanning map API providers for a demo and applicable code.

Summary

Websites should take advantage of the full capabilities of modern browsers to deliver a compelling user experience. Built-in capabilities such as XMLHttpRequest took years of implementation before finding its asynchronous groove in data-heavy websites. I hope we can similarly probe other latent useful features to improve the social web through more personalized and responsive experiences.

I have been the browser history of my website visitors for the past few months to gracefully enhance adding my Atom feed to their favorite feed reader. Easily recognized branding such as “Add to My Yahoo” has yielded much higher conversion rates than a simple Atom link with a minimal effect on page load performance. Dynamically checking for active usage of 50 or so aggregators allows me to extend my total test list and promote an obscure tool that might never make the cut for permanent on-screen real estate.

How will your site utilize your visitor’s browser history for a more custom user experience? How will you connect data in new ways once you have concrete knowledge of the new feature developments that will be most useful to your visitors’ online lifestyle?