Hey you! Where have you been?

No this is not just a question for someone you haven’t seen for a long time. This tutorial tells you how to see what other websites your visitors have visited. This can be especially usefull when you see which competitors websites someone has visited. You can use this information to emphasise on your unique selling points compared to the visited competitors or to find out which competitor names you should use as a searchterm.

Script in action
You recently visited:

How does it work?
The trick of history detection is looking at the color of visited links. Therefore you need to use a separate color in your stylesheet for visited links. Thanks to Jeremiah Grossman an Robert Cabri for this easy to use script. The script uses javascript and should work in almost all browsers. You need to know the hexadecimal and RGB values of your visited color. The security settings in browsers prevent you from looking at the entire history file, but if you have a link to a visited website on your webpage it will have the a:visited properties attached by it by the browser. Javascript can then look for these properties and communicate them back to for instance Google Analytics or any other javascript command.

The script
Fill in your own a:visited color (make sure it is different from a:link and a:hover). Use this hexadecimal to rgb converter to find out the RGB value for Firefox. Then fill in every URL (each separate webpage) you want the script to check for in the visitor’s browser history.

Just look at my own javascript http://www.vdgraaf.info/js/javascripts.js or the code below:

addEvent( window, ‘load’, stealHistory );
 
var IEVisitedColor = ‘#cd0018′;
var W3CVisitedColor = ‘rgb(205, 0, 24)’;
 
var websites = [
  “http://ajaxian.com/”,
  “http://www.dicabrio.com”,
  “more of your sites….”
];
 
function stealHistory()
{
  if(document.getElementById(’site-list’))
  {
    var List = document.getElementById(’site-list’);
 
    for( var i = 0; i < websites.length; i++ )
    {
      var bRemove = false;
      var ListItem = document.createElement('li');
      var Link = document.createElement( 'a' );
      Link.href = websites[i];
      Link.id = i;
 
      Link.appendChild(document.¶
createTextNode(websites[i]));
      ListItem.appendChild(Link);
      List.appendChild(ListItem);
 
      if( Link.currentStyle )
      {
        var color = Link.currentStyle['color'];
 
        if( color == IEVisitedColor )
        {
          bRemove = true;
        }
      }
      else if( document.defaultView.¶
getComputedStyle( Link, null ) )
      {
        var color = document.defaultView.¶
getComputedStyle( Link, null ).color;
       
        if( color == W3CVisitedColor )
        {
          bRemove = true;
        }
      }
 
      if( bRemove == true )
      {
        List.removeChild(ListItem);
      }
      else
      {
        urchinTracker( '/visited/' + websites[i] );
      }
    }
  }

And then
In Google Analytics you can now find the visited URLs under “Content Optimization” -> “Content Performance” -> “Content Drilldown” under the fake directory “/visited”. Feel free to customize this script to do whatever you like with your visitors history. It can also be used to offer specific content directly. Like “I see you have visited … You probably don’t know that our service is much …”

This script tracks every javascript enabled visitor. Not just the users of MyBlogLog.

13 Responses to “Hey you! Where have you been?”

  1. Gerben Coumou Says:

    Again a very great post, Peter!
    At the moment I don’t happen to manage any site where this information would be that useful. Though I can imagine many circumstances where it would be.
    Anyway, in my case it was more interesting to see which sites you listed. You can imagine it wasn’t too much work to find the 83-links you are tracking…
    I noticed the first item in the visited-list was empty (only the &#187-sign). I wasn’t able to figure out how this happened (browser: Firefox 2).

  2. Peter van der Graaf Says:

    No the first item error was just some quick and dirty trick so Wordpress didn’t auto close the “ul” tag. I still need to find a way to quit using the visual post editor. Any plugins or settings?

  3. Peter van der Graaf Says:

    I found where you can stop using the Wordpress “Visual Rich Editor”. So hopefully Wordpress stops wrongly correcting my code.

  4. André Scholten Says:

    With a fancy AJAX script you can constantly send and receive url’s. So if someone leaves his pc unattended you can do a very, very intensive research if you want.

  5. Peter van der Graaf Says:

    Hello Andre, do you have any example scripts? I only use this script to see what competitors of my clients have been visited, so they can find out who they really have to compete with.

    When I find time I’ll write a script that checks for more history stuff, but If you have one off the shelf I’ll be happy to test it.

  6. Mathieu Says:

    [q]At the moment I don’t happen to manage any site where this information would be that useful.[/q]

    Well, it became quite useful for me since I can filter some of my “direct” visitors (as stated in Google Analytics). I can track some of the visitors now by entering an URL of a movie I posted on Youtube. I was interested how many visitors I got from showing the movie at Youtube. It was a funny clip which started and ended with www.zuurkool.com. This way I can actually see how many people got triggered by watching the clip.

    I can imagine there are a lot of unique URLs you can track this way.

  7. Sergey Says:

    It doesn’t work for my Opera 9.10.

    It shows me full schedule you entered in your script.

  8. Peter van der Graaf Says:

    I knew about the opera problem. It is a good thing there are still browsers that have some security.

  9. Spyjax - Your browser history is not private! Says:

    […] Javascript has the ability to examine the rendered state of an HTML document, called the DOM. One of the properties that is available through JavaScript’s DOM access is the current CSS attributes of a node (nodes are html tags, one of which is the <a> or hyper link tag). All a website has to do to see what websites you’ve been to before is place a list of links on the page and then examine the color of those links. Ajax can be used to retrieve a list of links to test and also send the results back to the server. The code to do this examination can be a little tricky due to cross browser issues. Here’s snippet of Javascript that can do the evaluation (based on the Hey you! Where have you been? blog post by Peter van der Graaf and script from Jeremiah Grossman and Robert Cabri): […]

  10. Peter van der Graaf Says:

    I tried Spyjax and although it was slow when I tried it, I’d recommend everyone to try it. It is much easier than integrating my code! Keep up the good work Justin!

  11. Arjen Says:

    doesn’t work (at least not properly) in Opera. Tested with version 9.21 build 8776 for Windows.

  12. MarketingHacks Says:

    […] When you speak to a customer you might ask them what other options they have looked at, or which of your competitors they have considered. If you have a contact form on your website then you can collect this information automatically. I’ll leave the ethical considerations of using this hack to you. At the very least it’s interesting to know as a web surfer that this information is so easily accessible. I’ve based this on the code at this site, but I have integrated with a contact form. There’s also versions here, and here. […]

  13. PoolSnoopy Says:

    hm. does not work for me. I use Firefox 2.0.0. 11 on Ubuntu 7.10 and the list where I’ve been shows nothing. Kind of disappointing. :-)

Leave a Reply