Ouverture de CrazyEgg (statistiques des clics sur une page)

le Lun Sep 18, 2006 20:23

Salut tlm,
Ma petite contribution :

Y'a un script ajax gratuit qui existe depuis pas mal de temps :
http://ekstreme.com/phplabs/ajax-link-tracker.php

Pour voir un exemple faites ctlr + x sur cette page :
http://www.glennjones.net/Post/805/AjaxLinkTracker.htm

Petit topic à ce sujet :
http://www.cre8asiteforums.com/forums/i ... opic=34413

A part ca y'a aussi les analyseurs d'audience :
Addfreestat (version gratuite) :
http://addfreestats.com/

Opentracker (payant) aussi (pas pour adsense):
http://www.opentracker.net/

le Mar Sep 19, 2006 0:07

salut sonikbuzz

merci

génial ton script, en fait c'est quasiment le même que ce que propose crazyegg (avec les beaux dessins en moins, par exemple le heatmap) mais comme on peut le faire tourner sur son propre serveur... plus de problèmes de limites de hits ou de $ à payer...

merci

le Mar Sep 19, 2006 8:05

C'est sur que c'est bien comme script mais tout le monde ne peut pas installer des scripts PHP.

Sur crazyegg, on colle 3 lignes et les stats arrivent

En tout cas c'es terrible ces outils

le Mar Sep 19, 2006 8:57

Pas mal effectivement je viens de l'installer sur mon site. Le blem c'est que pour la restitution "Head Map" ou "click Map" ben si tu bouge ta fenêtre ou si tu l'élargit le résultat peut être completement faussé

le Mar Sep 19, 2006 9:13

patataur a écrit:salut sonikbuzz

merci

génial ton script, en fait c'est quasiment le même que ce que propose crazyegg (avec les beaux dessins en moins, par exemple le heatmap) mais comme on peut le faire tourner sur son propre serveur... plus de problèmes de limites de hits ou de $ à payer...

merci

Euh je suis ptet pas bien réveillé mais comment on fait pour accéder aux stats fournis par Link Tracker ?? L'ai installé, pas de bug, pas compliqué d'ailleurs, mais bon moi pas super bien à la question ce matin..

le Mar Sep 19, 2006 10:55

Très bon site. Je poste et je suis.

le Mar Sep 19, 2006 10:56

nickargall, il faut lire la doc

:

Il faut taper ctrl+x sur ton clavier pour voir les clics

Pour ma part, je viens de l'installer pour faire des stats sur un Intranet.
C'est pas mal mais je l'ai patché pour enregistrer également la position X et Y de la souris au moment du clic.

Ainsi, j'ai gardé le mode CTRL-X pour voir la répartition en pourcentage de clics par liens, et j'ai ajouté un mode CTRL-Z pour visualiser à l'écran tous les clics réalisés (un "X" placé à chaque endroit cliqué).

Ce n'est pas encore aussi beau que le heat map de CrazyEgg, mais ça pourrait être une base pour y arriver

(si ça intéresse quelqu'un, je peux envoyer le code que j'ai modifié)

le Mar Sep 19, 2006 11:07

ça m'intéresse tom! sur le thread ou en mp, comme tu veux

le Mar Sep 19, 2006 11:11

Oups bon déjà j'avais mal paramétré le fichier appelant la BDD Sql. Maintenant les clics s'enregistrent.

Mais rien quand je fais CTRL + x sur ma home, qui contient pourant l'appel javascript dans le <head>

argh :!

Ca fonctionne chez vous? Avec Firefox ?

Edit : Ok ok ça marche, désolé. J'ai les ù qui s'affichent en bas de page. C'est ou pour les afficher sur les liens comme dans l'exemple donné en début de topic ? Bon ok je cherche ...

le Mar Sep 19, 2006 11:42

Moi non plus, ca ne fonctionne pas, j'ai des erreures js, pourtant, j'ai rien bidouillé :/

erreur l 173,
linknode.getAttribute is not a fonction

(avec la console js de FF)

Par contre ma dbb se remplie bien

le Mar Sep 19, 2006 12:17

ce n'est pas un problème d'encodage avec les accents avec le fichier xml qui est généré ?

Code: Tout sélectionner: <?xml version='1.0' encoding='UTF-8' standalone='yes'?>

??

le Mar Sep 19, 2006 12:23

après avoir modifier des erreures de majuscules dans le script,
j'ai maintenant une nouvelle erreure :/

node has no proprieties l 164 :@

http://files.tuto-fr.com

le Mar Sep 19, 2006 12:32

Edit : Ok ok ça marche, désolé. J'ai les ù qui s'affichent en bas de page. C'est ou pour les afficher sur les liens comme dans l'exemple donné en début de topic ? Bon ok je cherche ...

nickargall,

Tu dois rajouter la class linklabel dans ton CSS.
Par exemple :

Code: Tout sélectionner: .linklabel{ position: absolute; z-index: 500; padding-left: 2px; padding-right: 2px; color: #FFF; border: solid 1px #000; background-color: #B5494A; }

ça m'intéresse tom! sur le thread ou en mp, comme tu veux

patataur, je prépare ça pour le post suivant

le Mar Sep 19, 2006 12:58

Je me permet de poster 5 posts pour détailler chacune des étapes nécessaires.

Je crois que ça vient de mon proxy d'entreprise, je n'arrive pas à faire des POSTs contenant des textes trop longs....

1ere étape : rajouter deux champs dans la table pour enregistrer les positions X et Y :

Code: Tout sélectionner: ALTER TABLE `Tracker` ADD `X` VARCHAR( 10 ) NOT NULL , ADD `Y` VARCHAR( 10 ) NOT NULL ;

le Mar Sep 19, 2006 12:59

2eme étape :
Editer le fichier ajaxlinktracker.js

2.1 : Rajouter la variable tableau mouse et la fonction renvoyant X et Y détecté à chaque déplacement de souris :
Tout en haut du script (avant la fonction AjaxLinkTracker) :

Code: Tout sélectionner: var Mouse={"x":0,"y":0}; document.onmousemove = function (e) { Mouse.x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; Mouse.y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; if (Mouse.x < 0) {Mouse.x=0;} if (Mouse.y < 0) {Mouse.y=0;} // document.OnMouseMove.Raise(this, e?e:event) };

2.2 : Modifier l'appel à addclik.php (vers la ligne 150 du fichier modifié) pour passer les paramètres X et Y :
Remplacer :

Code: Tout sélectionner: var ajaxURL = me.apiURL + 'addclick.php?id=' + id + '&label=' + label + '&target=' + target + '&url=' + me.url + '&rand='+Math.random();

par :

Code: Tout sélectionner: var ajaxURL = me.apiURL + 'addclick.php?id=' + id + '&label=' + label + '&target=' + target + '&url=' + me.url + '&rand='+Math.random()+'&x='+Mouse.x+'&y='+Mouse.y;

2.3 : Juste sous la fonction me.getClickThroughInfo, rajouter la fonction me.getClickPosInfo basée sur le même modèle :

Code: Tout sélectionner: me.getClickPosInfo = function (){ // get click data using ajax var ajaxURL = me.apiURL + 'getclickspos.php?url=' + me.url + '&days=' + me.numberDays + '&rand='+Math.random(); me.getClicksXHR.send( ajaxURL, 'get', me.displayClickPoss, null ); }

2.4 : Juste sous la fonction me.displayClickThroughs, rajouter la fonction displayClickPoss basée sur le même modèle :

Code: Tout sélectionner: me.displayClickPoss = function( obj ){ // display click positions data if (!document.getElementsByTagName) return false; if(obj.responseXML) node = obj.responseXML; if(obj.responseXml) node = obj.responseXML; if(node.childNodes[0].nodeType == 7) { rootNode = node.childNodes[1]; }else{ rootNode = node.childNodes[0]; } for (var i = 0; i < rootNode.childNodes.length; i++) { linknode = rootNode.childNodes[i]; px = linknode.getAttribute('x'); py = linknode.getAttribute('y'); label = linknode.getAttribute('label'); id = linknode.childNodes[0].nodeValue; if ( px && py ) { px-=4; py-=4; eltDiv = document.createElement( 'div' ); eltDiv.className = 'poslabel'; //Méthode avec coordonnées affichées var text = 'X ('+px+','+py+')'; //Méthode sans coordonnées affichées var text = 'X'; eltText = document.createTextNode( text ); eltDiv.appendChild( eltText ); document.body.appendChild( eltDiv ); Drag.init(eltDiv, eltDiv); eltDiv.style.left = px + 'px'; eltDiv.style.top = py + 'px'; } } me.labelsCreated = true; me.labelsDisplayed = true; }

2.5 : Enrichir la fonction me.keyCheck pour détecter la combinaison de touches CTRL+Z et afficher la position des clics :

Code: Tout sélectionner: me.keyCheck = function (e) { // check to see if user press 'ctrl x' var keyID = (window.event) ? event.keyCode : e.keyCode; var ctrlKey = (window.event) ? event.ctrlKey : e.ctrlKey; if((keyID == 88)&&(ctrlKey == true)) { eltLabels = me.getElementsByClassName('linklabel'); if( eltLabels.length == 0 ) { me.getClickThroughInfo(); }else{ for (var i = 0; i < eltLabels.length; i++) { eltLabels[i].parentNode.removeChild(eltLabels[i]); } } } //Ajout control-z if((keyID == 90)&&(ctrlKey == true)) { eltLabels = me.getElementsByClassName('poslabel'); if( eltLabels.length == 0 ) { me.getClickPosInfo(); }else{ for (var i = 0; i < eltLabels.length; i++) { eltLabels[i].parentNode.removeChild(eltLabels[i]); } } } }

(c'est la partie sous le //Ajout control-z qui a été ajoutée, j'ai remis tout le code de la fonction obtenue si vous voulez simplement remplacer celle qui existe)

Ouverture de CrazyEgg (statistiques des clics sur une page)

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne