Détecter les sites que vos visiteurs utilisent

Détecter les sites que vos visiteurs utilisent

Par Godefroy dans Développement le 1 Août 2008 à 02:34

Je me suis souvenu d'un article très intéressant sur lequel j'étais tombé il y a un ou deux mois, présentant une classe javascript permettant de détecter quels réseaux sociaux utilisent les visiteurs. En regardant le code de plus prêt, je l'ai trouvé compliqué pour pas grand chose, avec l'utilisation d'une iframe et un code pas très optimisé.
Voici donc un code que je viens de pondre, parce que je pense qu'il pourra être utile, aussi bien pour vous que pour moi J'utilise ici le framework Mootools 1.2 , mais je pense que c'est facilement adaptable à d'autres. Le principe est simple, on utilise une "faille" du CSS qui consiste à récupérer le style de liens après avoir appliqué un style particulier aux liens visités ("a:visited").
Une petite démo pour commencer : checkvisited.html

On va donc commencer par faire un peu de CSS :
a.test_visited { display: block; }
a.test_visited:visited { display: none; }
[code=css]a.test_visited { display: block; }
a.test_visited:visited { display: none; }[/code]

C'est tout pour le CSS !
Maintenant, le Javascript :
// Implémentation de la fonction checkVisited
// pour les chaînes de caractères (String)
String.implement({
    checkVisited : function(){
        var e = (new Element("a", {
                href: this,
                "class" : "test_visited"
            }))
            .inject(document.body),
            b = e.getStyle("display")=="none";
        e.destroy();
        return b;
    }
});

// Implémentation de la fonction checkVisited pour
// les tableaux (Array) : tester une liste d'urls
Array.implement({
    checkVisited : function(){
        var b = false;
        this.each(function(s){
            if(s.checkVisited())
                b = true;
        })
        return b;
    }
});
[code=javascript]// Implémentation de la fonction checkVisited
// pour les chaînes de caractères (String)
String.implement({
    checkVisited : function(){
        var e = (new Element("a", {
                href: this,
                "class" : "test_visited"
            }))
            .inject(document.body),
            b = e.getStyle("display")=="none";
        e.destroy();
        return b;
    }
});

// Implémentation de la fonction checkVisited pour
// les tableaux (Array) : tester une liste d'urls
Array.implement({
    checkVisited : function(){
        var b = false;
        this.each(function(s){
            if(s.checkVisited())
                b = true;
        })
        return b;
    }
});[/code]
Ces deux implémentations permettent de vérifier une URL ou une liste d'URLs.
On va reprendre l'exemple des réseaux sociaux que traite Aza Raskin dans son article. D'abord, on crée un conteneur pour l'affichage du résultat :
<div id="visited_sites">
</div>
[code=html]<div id="visited_sites">
</div>[/code]
Ensuite, on crée la liste et on la traite :
// Liste de réseaux sociaux
var sites = {
    "Digg": ["http://digg.com", "http://digg.com/login"],
    "Reddit": ["http://reddit.com", "http://reddit.com/new/", "http://reddit.com/controversial/", "http://reddit.com/top/", "http://reddit.com/r/reddit.com/", "http://reddit.com/r/programming/"],
    "StumbleUpon": ["http://stumbleupon.com"],
    "Yahoo Buzz": ["http://buzz.yahoo.com"],
    "Facebook": ["http://facebook.com/home.php", "http://facebook.com", "https://login.facebook.com/login.php"],
    "Del.icio.us": ["https://secure.del.icio.us/login", "http://del.icio.us/", "http://delicious.com"],
    "MySpace": ["http://www.myspace.com/"],
    "Technorati": ["http://www.technorati.com"],
    "Newsvine": ["https://www.newsvine.com", "https://www.newsvine.com/_tools/user/login"],
    "Songza": ["http://songza.com"],
    "Slashdot": ["http://slashdot.org/"],
    "Ma.gnolia": ["http://ma.gnolia.com/"],
    "Blinklist": ["http://www.blinklist.com"],
    "Furl": ["http://furl.net", "http://furl.net/members/login"],
    "Mister Wong": ["http://www.mister-wong.com"],
    "Current": ["http://current.com", "http://current.com/login.html"],
    "Menaeme": ["http://meneame.net", "http://meneame.net/login.php"],
    "Oknotizie": ["http://oknotizie.alice.it", "http://oknotizie.alice.it/login.html.php"],
    "Diigo": ["http://www.diigo.com/", "https://secure.diigo.com/sign-in"],
    "Funp": ["http://funp.com", "http://funp.com/account/loginpage.php"],
    "Blogmarks": ["http://blogmarks.net"],
    "Yahoo Bookmarks": ["http://bookmarks.yahoo.com"],
    "Xanga": ["http://xanga.com"],
    "Blogger": ["http://blogger.com"],
    "Last.fm": ["http://www.last.fm/", "https://www.last.fm/login/"],
    "N4G": ["http://www.n4g.com"],
    "Faves": ["http://faves.com", "http://faves.com/home", "https://secure.faves.com/signIn"],
    "Simpy": ["http://www.simpy.com", "http://www.simpy.com/login"],
    "Yigg": ["http://www.yigg.de"],
    "Kirtsy": ["http://www.kirtsy.com", "http://www.kirtsy.com/login.php"],
    "Fark": ["http://www.fark.com", "http://cgi.fark.com/cgi/fark/users.pl?self=1"],
    "Mixx": ["https://www.mixx.com/login/dual", "http://www.mixx.com"],
    "Google Bookmarks": ["http://www.google.com/bookmarks", "http://www.google.com/ig/add?moduleurl=bookmarks.xml&hl=en"],
    "Subbmitt": ["http://subbmitt.com/"]
},
    t = []; // Variable dans laquelle on va stocker la liste de sites visités par l'utilisateur

// On vérifie pour chaque site de la liste
for(var i in sites){
    if(sites[i].checkVisited())
        t.push(i);
}

// On affiche le résultat
$("visited_sites").set("html", "<strong>Sites visités : </strong>" + t.join(", "));
[code=php]// Liste de réseaux sociaux
var sites = {
    "Digg": ["http://digg.com", "http://digg.com/login"],
    "Reddit": ["http://reddit.com", "http://reddit.com/new/", "http://reddit.com/controversial/", "http://reddit.com/top/", "http://reddit.com/r/reddit.com/", "http://reddit.com/r/programming/"],
    "StumbleUpon": ["http://stumbleupon.com"],
    "Yahoo Buzz": ["http://buzz.yahoo.com"],
    "Facebook": ["http://facebook.com/home.php", "http://facebook.com", "https://login.facebook.com/login.php"],
    "Del.icio.us": ["https://secure.del.icio.us/login", "http://del.icio.us/", "http://delicious.com"],
    "MySpace": ["http://www.myspace.com/"],
    "Technorati": ["http://www.technorati.com"],
    "Newsvine": ["https://www.newsvine.com", "https://www.newsvine.com/_tools/user/login"],
    "Songza": ["http://songza.com"],
    "Slashdot": ["http://slashdot.org/"],
    "Ma.gnolia": ["http://ma.gnolia.com/"],
    "Blinklist": ["http://www.blinklist.com"],
    "Furl": ["http://furl.net", "http://furl.net/members/login"],
    "Mister Wong": ["http://www.mister-wong.com"],
    "Current": ["http://current.com", "http://current.com/login.html"],
    "Menaeme": ["http://meneame.net", "http://meneame.net/login.php"],
    "Oknotizie": ["http://oknotizie.alice.it", "http://oknotizie.alice.it/login.html.php"],
    "Diigo": ["http://www.diigo.com/", "https://secure.diigo.com/sign-in"],
    "Funp": ["http://funp.com", "http://funp.com/account/loginpage.php"],
    "Blogmarks": ["http://blogmarks.net"],
    "Yahoo Bookmarks": ["http://bookmarks.yahoo.com"],
    "Xanga": ["http://xanga.com"],
    "Blogger": ["http://blogger.com"],
    "Last.fm": ["http://www.last.fm/", "https://www.last.fm/login/"],
    "N4G": ["http://www.n4g.com"],
    "Faves": ["http://faves.com", "http://faves.com/home", "https://secure.faves.com/signIn"],
    "Simpy": ["http://www.simpy.com", "http://www.simpy.com/login"],
    "Yigg": ["http://www.yigg.de"],
    "Kirtsy": ["http://www.kirtsy.com", "http://www.kirtsy.com/login.php"],
    "Fark": ["http://www.fark.com", "http://cgi.fark.com/cgi/fark/users.pl?self=1"],
    "Mixx": ["https://www.mixx.com/login/dual", "http://www.mixx.com"],
    "Google Bookmarks": ["http://www.google.com/bookmarks", "http://www.google.com/ig/add?moduleurl=bookmarks.xml&hl=en"],
    "Subbmitt": ["http://subbmitt.com/"]
},
    t = []; // Variable dans laquelle on va stocker la liste de sites visités par l'utilisateur

// On vérifie pour chaque site de la liste
for(var i in sites){
    if(sites[i].checkVisited())
        t.push(i);
}

// On affiche le résultat
$("visited_sites").set("html", "<strong>Sites visités : </strong>" + t.join(", "));[/code]
C'est fini !
Chez moi, ça fonctionne impeccablement avec Firefox 3, Opéra 9.5, IE 6, et IE 7.
Si vous avez un problème d'incompatibilité ou une suggestion, n'hésitez pas ! Par exemple, on pourrait, comme Aza, traiter pour une URL quelconque l'URL avec et sans les "www".
Merci de me faire un petit lien de retour si vous utilisez ce script quelque part

<br />

Tags : javascript, historique, css
Commentaires

1

divarvel

Vendredi 1er Août 2008 à 10:59

Ça donne plein d'idées d'applications, en particulier pour eklablog :D

2

jaguie

Mardi 5 Août 2008 à 05:31

Merci pour ce billet, malheureusement la démo ne marche pas chez moi sous FF. Je n'ai pas testé ton code, mais je le garde bien au chaud sous la main pour plus tard :)

Bonne continuation

3

jaguie

Jeudi 4 Septembre 2008 à 04:11

Enfait ça marche très bien, j'avais juste testé avec facebook et j'avais zappé que l'url de mon facebook est new.facebook.fr et non facebook.fr ... Donc forcement ça marche moins bien ;)

4

Godefroy

Jeudi 4 Septembre 2008 à 17:51

Oui, la liste des urls dans mon script est non exhaustive, c'est simplement à titre d'exemple, pour présenter le concept

Suivre le flux RSS des commentaires de cet article

Ajouter un commentaire

Nom / Pseudo :

E-mail (facultatif) :

Site Web (facultatif) :

Commentaire :

Me prévenir par mail en cas de réponse

Détecter les sites que vos visiteurs utilisent

Commentaires