Tracker son site Ajax avec Google Analytics

Les sites basés sur la technologie Ajax posent parfois un problème au niveau des statistiques que nous pouvons recueillir à partir de ses visiteurs; principalement au niveau des pages vues et des entonnoirs de conversion.

Ceci est dû au fait que le code de Google Analytics par défaut ne se lance qu’une fois au chargement de la page. Comme Ajax ne force pas le rechargement d’une page entière, nous pouvons y perdre des informations importantes.

Qu’à cela ne tienne ! Évidemment Google a prévu cette éventualité.

Créer de fausses « pages vues » avec Google Analytics

Tracker un site en Ajax se fera via le biais de fausses pages vues. Le principe est le suivant : lors de l’appel de chaque nouvelle page, nous indiquerons à Google de compter une vue sur une page quelconque (qu’elle existe ou pas).

Évidemment, le code d'initialisation de Google Analytics doit être inclus préalablement (donc il doit être inscrit plus haut que les lignes de code suivantes dans votre page HTML)

Le code de base est relativement simple :

<script type="text/javascript">  
    _gaq.push(['_trackPageview', '/fr/accueil']);
</script>

Ce dernier fera en sorte que Google enregistrera une vue dès que ce morceau de code est exécuté. Ainsi, ce deuxième code enregistrera une vue chaque fois qu’un visiteur cliquera sur ce lien :

<a href="#" onclick="_gaq.push(['_trackPageview', '/impression']);"> Imprimer </a>  

Alors, vous aurez compris que si nous utilisons par exemple jQuery pour envoyer nos requêtes Ajax, il suffira d’insérer ce bout de code dans le callback de la fonction.

$.load("http://monsite.com/ajax.php", function () {  
    _gaq.push(['_trackPageview', '/fr/curriculum_vitae']);
});

GA pour tracker les évènements

Vous aurez sans doute compris que ce même principe pourrait s’appliquer aux diverses actions qu’un visiteur peut entreprendre sur votre page : page de slider, onglets, click sur formulaire, etc…
Ceci est une solution, mais depuis la nouvelle version de Google Analytics, une nouvelle possibilité nous est offerte, celle de tracker les évèments. Le principe sera le même, mais la syntaxe différera légèrement :

_gaq.push(['_trackEvent', 'Formulaires', 'Soumission', 'Formulaire de Contact']);  

J’espère que ça saura vous être utile ! (pour créer des sites web de qualités)

Référence:
Référence Google sur _trackPageview
Référence Google sur _trackEvent