Suivre un appel Ajax avec Google Analytics (version Universal Analytics)

Voici deux moyens, en utilisant jQuery, de signaler les appels en AJAX à Google Analytics.

La plateforme Google Analytics propose un code pour suivre un internaute tout au long de ses déplacements dans votre site internet et votre application. Ce code peut être adapté selon le type de site internet développé. De nombreux sites utilisent maintenant les appels AJAX afin d'exécuter des actions en arrière-plan et proposer des interactions plus riches à l'internaute. Le code de suivi de Google Analytics peut alors être modifié pour suivre les appels AJAX effectués par le visiteur.

Pour comptabiliser un appel en AJAX, la première étape consiste à initialiser le code de suivi sur la page de départ. Il faut pour cela utiliser le code de suivi directement disponible dans l'interface de Google Analytics. Dans l'onglet "Admin", sélectionnez la propriété correspondant à votre site internet, puis allez dans le menu "Informations de suivi", et "Code de suivi". Copiez-collez le script dans votre page web. Voici un exemple de code :

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXX-1', 'auto'); //Ajoutez ici l'identifiant de la propriété.
   ga('send', 'pageview');
</script>

La deuxième partie se place dans votre appel AJAX. Un appel AJAX est compliqué à mettre en place en utilisant du JavaScript pur. Dans ce cas, on utilise la bibliothèque jQuery qui possède la méthode "ajax()" pour gérer cette fonctionnalité. La méthode "ajax()" accepte plusieurs paramètres. Parmi ces paramètres, "success" est utilisé pour indiquer une fonction qui sera exécutée lorsque l'appel AJAX est terminé et a réussi. C'est dans cette fonction qu'il faut ajouter l'instruction pour enregistrer la vue sur la page.

Il existe deux possibilités pour signaler une page chargée en AJAX. La première consiste à la signaler comme une page classique, avec la méthode "ga()" et la commande "send". Le troisième paramètre permet d'indiquer un nom de page, ce qui permet de préciser le script PHP :

jQuery.ajax({
    type: "get",
    url: "monScriptAjax.php",
    data: {
        //Ajoutez ici les données que va recevoir le script.
    },
    success: function(data, textStatus){
        ga('send', 'pageview', 'monScriptAjax.php');
    }
});

Vous pouvez également indiquer l'appel comme étant un événement. On utilise alors toujours la commande "send" mais en précisant que c'est un événement ("event"). Il faut également ajouter obligatoirement la catégorie et le nom de l'événement.

jQuery.ajax({
    type: "get",
    url: "monScriptAjax.php",
    data: {
        //Ajoutez ici les données que va recevoir le script.
    },
    success: function(data, textStatus){
        ga('send', 'event', 'Appel AJAX', 'monScriptAjax.php');
    }
});

Tutoriels Analytics