Browser history sniffing with Dojo

Mike — Thu, 14 Jan 2010 06:40:52 +0000

Niall Kennedy posted a now-famous article about using some browser trickery to determine what websites a user on your site has visited. I’ve taken that concept and created a module that can be used with the Dojo Toolkit javascript framework.

It provides two methods that you can use in your code, isVisited and isAnyVisited.

One important note about your URL specification is that you must specify an *exact* URL that the user has been to. So, for example, if someone has visited several twitter profiles, but never actually went to the homepage or signin screen, then it would be difficult/impossible to tell whether or not they were a twitter user without a massive brute-force query.

You can download sniff.js, or view a demo.

Sample usage:

dojo.require("mdg.sniff");
var usedYahoo = mdg.sniff.isVisited("http://www.yahoo.com");
var usedGoogleMaps = mdg.sniff.isAnyVisited([
      "http://maps.google.com",
      "http://maps.google.com/maps"]);
var usedFacebook = mdg.sniff.isAnyVisited([
      "http://www.facebook.com",
      "http://www.facebook.com/index.php",
      "https://login.facebook.com/login.php"]);

Source code:

dojo.provide("mdg.sniff");
 
//
// Browser history sniffing, based on infamous blog post:
// 
//
// Sample usage:
//
//    dojo.require("mdg.sniff");
//    var usedYahoo = mdg.sniff.isVisited("http://www.yahoo.com");
//    var usedGoogleMaps = mdg.sniff.isAnyVisited([
//          "http://maps.google.com",
//          "http://maps.google.com/maps"]);
//    var usedFacebook = mdg.sniff.isAnyVisited([
//          "http://www.facebook.com",
//          "http://www.facebook.com/index.php",
//          "https://login.facebook.com/login.php"]);
//
// Works with Dojo 1.3 and 1.4 (*may* work with 1.2 as well)
//
 
dojo.require("dojox.html.styles");
 
(function(){
 
    var _this = this;
 
    this.sniffCache = {};
 
    dojox.html.insertCssRule(".dojohistorysniff a", "color:#000000;");
    dojox.html.insertCssRule(".dojohistorysniff a:visited", "color:#ff0000 !important;");
 
    this.isAnyVisited = function(/*Array*/urls) {
        for (i=0; i<urls.length; i++) {
            if (_this.isVisited(urls[i])) {
                return true;
            }
        }
        return false;
    };
 
    this.isVisited = function(/*String*/url) {
        if (typeof(_this.sniffCache[url]) != 'undefined') {
            return _this.sniffCache[url];
        }
        var link = _this.addLink(url);
        var color = new dojo.Color(dojo.style(link, "color"));
        if (color.r == 255) {
            _this.sniffCache[url] = true;
            return true;
        }
        _this.sniffCache[url] = false;
        return false;
    };
 
    this.insertSniffDiv = function() {
        return dojo.create("div", {className: "dojohistorysniff"}, dojo.body());
    };
 
    this.getSniffDiv = function() {
        var divs = dojo.query("div.dojohistorysniff");
        if (divs.length > 0) {
            return divs[0];
        }
        return _this.insertSniffDiv();
    };
 
    this.addLink = function(/*String*/url) {
        var div = _this.getSniffDiv();
        return dojo.create("a", {href: url}, div);
    };
 
    /**
     * mdg.sniff.isVisited
     * Check whether or not a URL has been visited
     * @param url String
     * @return boolean
     */
    mdg.sniff.isVisited = this.isVisited;
 
    /**
     * mdg.sniff.isAnyVisited
     * Check whether or not *any* of the URLs specified have been visited
     * @param urls Array of Strings
     * @return boolean
     */
    mdg.sniff.isAnyVisited = this.isAnyVisited;
 
})();

Fun javascript goodies

Mike — Mon, 15 Sep 2008 16:14:18 +0000

Just ran across another of many lists of javascript libraries. I found 3 things that I’ll probably end up using, 1 of which was especially interesting.

Sniffer browser history is something I’ve never thought of or heard of until reading Niall Kennedy’s post, which apparently he talked briefly about a few years earlier. The idea is that one could list a bunch of known URLs as links on your page. Then after applying unique a:normal and a:visited styles to them, you can read the computed style values on each link through the DOM. If the color (for example) changes to the a:visited style that you read through javascript, you now know that the user visited that site, and can make other layout changes accordingly.

Even without javascript sniffing per-se, you could apply the same technique. Think of this, if we want to do something if the user’s a yahoo user vs a google user, do this:

<style>
a#goog, a#yh {
    display: none; /* hide if user hasn't been there */
}
a#goog:visited, a#yh:visited !important {
    display: inline; /* make sure user sees search engine option if they've been there before */
}
</style>
<div>
  <a href="http://www.google.com" id="goog" onclick="doGoogle()">search via google</a>
  <a href="http://www.yahoo.com" id="yh" onclick="doYahoo()">search via yahoo</a>
</div>

Niall does have an excellent library started for browser sniffing. One great feature is that it allows you to configure a set of URLs that correspond to an application (for example www.facebook.com, facebook.com, profile.facebook.com, etc).

Some immediate applications include using the mapping service user is most comfortable with for directions to your business, displaying only necessary social bookmarking “add to” icons, and searching via user’s preferred search engine.

From the article:

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.

Mike's Blabberings » css

Browser history sniffing with Dojo

Fun javascript goodies