Suivre la navigation interne sur un site Web

Voici les bases pour réaliser un tracker de liens sortant en faisant appel à XHRConnection. Pour réaliser l'exemple suivant, vous devez avoir à votre disposition un environnement LAMP .

XHRConnection est une classe qui permet de simplifier l'utilisation de l'objet XMLHttpRequest. Elle propose plusieurs méthodes afin de faciliter la gestion des données à envoyer en arrière plan, autrement dit, XHRConnection permet d'appréhender facilement Ajax.

Depuis la version 1.1 elle inclut deux nouvelles fonctionnalités. Vous avez désormais la possibilité d'effectuer des opérations sans avoir à définir de fonction de callback. Enfin, il est proposé une méthode qui construit au besoin un objet DOM. XMLHttpRequest est une des briques pour réaliser des applications riches dites Web 2.0.

Utilisation de la classe

Pour faire appel à la classe XHRConnection, placez ce code entre les balises head de votre page:

<script type="text/javascript" 
src="XHRConnection.js"></script>

Détéction des cliques

Beaucoup de solutions de tracking utilise des pages de redirection. Nous allons mettre en place ici une autre solution à base de JavaScript pour laisser les liens en "dur". Au chargement de la page nous allons définir une action sur le gestionnaire onclick de chaque lien.

Ouvrez votre éditeur et créez le fichier javascript appelé tracker.js et placez le code suivant :

			
// +--------------------------------------------+
// | track
// | Entrée : 
// | 	- lnk, référence au lien
// +---------------------------------------------+
function track (lnk) {
	// Création de l'objet
	var XHR = new XHRConnection();
		
	// Paramètre à envoyer : l'URL de la page encours

	XHR.appendData('urlFrom', document.location.href);

	// Paramètre à envoyer : l'URL de la page demandée
	XHR.appendData('urlTo', lnk.href);
	
	// Appel du script serveur de tracking
	XHR.sendAndLoad('tracker.php', 'POST');

	
	// On retourne true pour permettre au navigateur 
d'accéder à l'URL demandée
	return true;	
}

// +-----------------------------------------------+
// | Définition du comportement onclick des liens 
de la page
// +-----------------------------------------------+
window.onload = function() {
	// Parcours de la liste des liens présent dans la page

	for (i = 0; i < document.links.length; i++) {
		// Définition de l'évènement onclick
		document.links.item(i).onclick = function() {
			// La valeur du return doit être 
true, la fonction  track retournera true

			return track(this);
		}
	}
}

document.links est un tableau contenant l'ensemble des liens présents dans la page. Il suffit de parcourir ce tableau et pour chaque élément/lien indiquer que lorsque l'utilisateur clique sur le lien, on appelle la fonction track() en passant comme argument une référence au lien en cours.

La fonction, via un object XHRConnection, enverra à un script coté serveur (tracker.php) l'URL de la page courante ainsi que l'URL de la page demandée par l'utilisateur. track() renvoit ensuite TRUE afin que le navigateur puisse effectuer la requête utilisateur en accédant à l'URL demandée.

Pensez à inclure le fichier tracker.js de la même façon que vous l'avez fait pour XHRConnection.js

Enregistrement en base données

Voici la structure de la table MySQL utilisée :

		
CREATE TABLE `tracking` (
  `trakId` int(10) unsigned NOT NULL auto_increment,
  `urlFrom` varchar(255) NOT NULL,
  `urlTo` varchar(255) NOT NULL,
  `date` datetime NOT NULL,
  `ip` int(11) NOT NULL,
  PRIMARY KEY  (`trakId`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Voici le script PHP du fichier "tracker.php" :

		
<?php
	// Connectez vous à votre base de données MySQL
	// ...
	
	// Faut-il prendre en compe les liens internes, 
TRUE ou FALSE	define('ACCEPT_INTERNAL_LINK', TRUE);
	
	// Si l'URL demandée et la l'URL de provenance 
 sont connues
	if (!empty($_POST['urlTo']) &&  !empty($_POST['urlFrom'])) {
	
		// Analyse de l'URL passée en paramètre
		$arrParse = parse_url($_POST['urlTo']);
	
		// L'URL a une forme correcte et la provenance 
  est connue
		if (sizeof($arrParse) > 1 && !empty($arrParse['host'])) {

	
			// Contrôle de l'hôte et vérification 
   du type d'URL
			if  ((boolean) strcmp($arrParse['host'], 
				$_SERVER ['HTTP_HOST']) 
				| ACCEPT_INTERNAL_LINK) {
		
				// Stockage en base de données
				mysql_query("
					INSERT INTO `tracking` (
						`urlFrom`, 
						`urlTo`, 
						`date`, 
						`ip`) 
					VALUES (
					" . $_POST
					['urlFrom'] . ", 
					" . $_POST
					['urlTo'] . ", 
					now(), 
					" . ip2long
					($_SERVER
					['REMOTE_ADDR'])."
					)
				");
			}
		}
	}
?>	

La constante ACCEPT_INTERNAL_LINK est un booléen qui permet de prendre en compte dans les liens internes (même domaine) si elle est égale à TRUE. Comme vous pouvez le constater, le script ne retourne rien. Le serveur renverra tout de même les entêtes HTTP.

Exemple

Le tracking est actif sur ce document. Je vous invite à naviguer également à travers ces trois pages, et même de cliquer sur des liens externes :

• Page de test de tracking 1
• Page de test de tracking 2
• Page de test de tracking 3

Ensuite vous pourrez vous rendre à cette page pour voir le résultat du tracking.

Pour aller plus loin

On peut imaginer ajouter plusieurs filtres, de contrôles et même d'ajouter des informations. Je pense en particulier aux liens entrants (bakclink/referer) à envoyer au script serveur. Il est également possible de créer une structures de base de données plus performante (regrouper les URLS, gestion de clés étrangères, tables d'association ...).

Ce contenu a été réalisé par Thanh Nguyen sous licence Creative Commons.