Google Analytics, jQuery, Plugin, Event – Tracer des boutons, des événements dans Google Analytics à l’aide de jQuery

Il existe plusieurs façons d’utiliser l’API de Google Analytics afin de tracer les _trackEvent auquel par exemple vous aurez recours pour mesurer le trafic sur certains des liens significatifs de votre site, les boutons, les liens vers vos comptes sur Facebook ou Twitter par exemple. Dans cet article, on verra rapidement la méthode proposée par Google. Méthode qui fait l’affaire dans bien des cas. Dans un deuxième temps, on verra une manière plus élégante de travailler le même système de tracking avec le célébrissime framework javascript jQuery. En effet, il est toujours préférable d’éviter le “surcodage”, proposé par google lui-même, sur les liens et de trouver un plugin ou une méthode à l’aide jQuery qui remplisse automatiquement la tâche ingrate de récolter les données.

Passer en mode asynchrone pour Google Analytics

C’est assez simple, il suffit de changer le snippet que vous avez collé dans l’ensemble de vos pages à une différence, c’est que le snippet doit être inséré à la toute fin de la section <head>, après tout autre script éventuellement utilisé par vos pages. Tradictionnemenment, le snippete était collé avant juste avant </body>.

 
	<!-- la fin de la section head -->
	<script type="text/javascript">
 
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
	  _gaq.push(['_trackPageview']);
 
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
 
	</script>
 
 
	</head>

Quelques-uns des bénéfices du mode asynchrone de Google Analytics selon Google en peronne

The latest version of the Analytics tracking code offers an improved way to track website visitors with Google Analytics. It takes advantage of browser support for asynchronous JavaScript to enhance the speed in which the tracking code is loaded. With the latest version of the tracking code, you can also place the Analytics snippet higher in the page without delaying subsequent content from rendering.

Source : http://code.google.com/intl/fr/apis/analytics/docs/tracking/asyncMigrationExamples.html

Utiliser le code de Google Analytics pour le tracking des événements

Une fois que vous avez marqué vos pages avec le snippet asynchrone, il ne vous reste qu’à placer dans vos pages autant de fonctions _trackEvent(category, action, opt_label, opt_value)sur les liens que vous voulez tracker.

	<a href="#" onClick="_gaq.push(['_trackEvent', 'MaCat', 'action-1', 'Desc action-1']);">Lien action-1</a>

Les explications de google concernant les paramètres à passer pour la fonction _trackEvent

category (required)
The name you supply for the group of objects you want to track.
action (required)
A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
label (optional)
An optional string to provide additional dimensions to the event data.
value (optional)
An integer that you can use to provide numerical data about the user event.

Source : Les paramètres de _trackEvent()
http://code.google.com/intl/fr-FR/apis/analytics/docs/gaJS/gaJSApiEventTracking.html#_gat.GA_EventTracker_._trackEvent

Toutefois, afin d’éviter toute pollution intempestive de votre code par du code javascript et d’éviter à avoir marqué manuellement tous vos liens. Vous pouvez décider d’utiliser le framework jQuery pour vous faciliter dans cette tache de marquer chacun des boutons de votre site.

Utiliser un plugin ou un script jQuery pour le tracking des événements

Le Plugin Google Analytics jQuery
C’est un des plugins plus simples à mettre en place. Pour installer ce plugin Google Analytics jQuery Plugin, il vous suffit de charger le script du plugin dans votre page, ainsi que le script de la librairie jQuery. Il ne vous reste qu’à compléter par votre Google Analytics ID UA-XXXXXXXX-X.

Il n’est pas nécessaire de taguer vos pages de manière asynchrone, le plugin s’en charge de vous installer le snippet. Il ne vous reste qu’à placer et à paramétrer les événements que vous souhaitez tracker. Le tout est placé entre les balises <head></head>

Il reste enfin à définir les éléments à tracker à l’aide la fonction suivante : $.ga.trackEvent(category, action, opt_label, opt_value); rendu disponible par le plugin. Vous avez par ailleurs à disposition toutes les fonctions de l’API Google Analytics commençant par un _

Current list of methods that this plugin automatically binds on to: (This is not the ultimate list. The plugin binds on to all functions that begin with an underscore “_”.)

<script src="le_chemin_vers_script/jquery.js" type="text/javascript"></script> 
 
<script src="le_chemin_vers_script/jquery.ga.js" type="text/javascript"></script> 
 
 
 
<script type="text/javascript"> 
$(document).ready( function() { 
		$.ga.load("UA-XXXXXXXX-X", function(pageTracker) { 
		// Un exemple de paramétrage du plugin jquery.ga.js
		pageTracker._setDomainName(".votresite.com"); 
		// Pour permettre le suivi des utilisateurs entre domaines.
		pageTracker._setAllowLinker(true);
		// Pour suivre les comportements des utilisateurs sur plusieurs sous-domaines 
		pageTracker._setAllowHash(true); 
		});
/* Tous les liens commençant par http, mais qui ne contiennent pas le domaine du document votresite.com
*/		$("a[href^=http]:not([href*='votresite.com'])").click(function(){ 
		$.ga.trackEvent( 'externe', 'click', this.href); 
		});
	}); 
</script>

Source : http://www.shamasis.net/projects/ga/#usage

Il existe plein d’autres plugins pour tagguer vos pages à l’aide de jQuery ainsi que d’autres scripts. On vous en donne un apercu dans l’ensemble des liens ci-dessous. Il y a d’évidence de quoi trouver votre bonheur ou des idées pour personnaliser votre script de tracking d’événements jQuery pour Google Analytic.