Godefroy de Compreignac

Web development

Détecter les sites que vos visiteurs utilisent

par Skreo, 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

Partager cet article :
Tags : javascript, historique, css
Suivre le flux RSS des commentaires de cet article
Revenir à la liste des articles
Haut de page
Commentaires

1

divarvel

1 Août 2008 à 10:59

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

2

jaguie

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

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

Skreo

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

Ajouter un commentaire

Nom / Pseudo :

E-mail (facultatif) :

Site Web (facultatif) :

Commentaire :

Recopiez le code inscrit sur l'image :

Ce code est un code de sécurité pour empêcher le spam en vérifiant que la personne qui poste est bien un humain et non un robot.

Haut de page

Blog de Skreo :: Webdev && High-Tech

Web development

Détecter les sites que vos visiteurs utilisent

Commentaires