{"id":1951,"date":"2011-04-02T13:19:47","date_gmt":"2011-04-02T12:19:47","guid":{"rendered":"http:\/\/flaven.fr\/?p=1951"},"modified":"2013-09-24T06:14:35","modified_gmt":"2013-09-24T04:14:35","slug":"google-analytics-jquery-plugin-event-tracer-des-boutons-des-evenements-dans-google-analytics-a-laide-de-jquery","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2011\/04\/google-analytics-jquery-plugin-event-tracer-des-boutons-des-evenements-dans-google-analytics-a-laide-de-jquery\/","title":{"rendered":"Google Analytics, jQuery, Plugin, Event – Tracer des boutons, des \u00e9v\u00e9nements dans Google Analytics \u00e0 l’aide de jQuery"},"content":{"rendered":"


\n
\nIl existe plusieurs fa\u00e7ons d’utiliser l’API de Google Analytics afin de tracer les _trackEvent<\/code> 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\u00e9thode propos\u00e9e par Google. M\u00e9thode qui fait l’affaire dans bien des cas. Dans un deuxi\u00e8me temps, on verra une mani\u00e8re plus \u00e9l\u00e9gante de travailler le m\u00eame syst\u00e8me de tracking avec le c\u00e9l\u00e9brissime framework javascript jQuery<\/code>. En effet, il est toujours pr\u00e9f\u00e9rable d’\u00e9viter le “surcodage”, propos\u00e9 par google lui-m\u00eame, sur les liens et de trouver un plugin ou une m\u00e9thode \u00e0 l’aide jQuery qui remplisse automatiquement la t\u00e2che ingrate de r\u00e9colter les donn\u00e9es.<\/p>\n

Passer en mode asynchrone pour Google Analytics<\/h4>\n

C’est assez simple, il suffit de changer le snippet que vous avez coll\u00e9 dans l’ensemble de vos pages \u00e0 une diff\u00e9rence, c’est que le snippet doit \u00eatre ins\u00e9r\u00e9 \u00e0 la toute fin de la section <head><\/code>, apr\u00e8s tout autre script \u00e9ventuellement utilis\u00e9 par vos pages. Tradictionnemenment, le snippete \u00e9tait coll\u00e9 avant juste avant <\/body><\/code>.<\/p>\n

\r\n\t\r\n\t\r\n\t<script type=\"text\/javascript\">\r\n\r\n\t  var _gaq = _gaq || [];\r\n\t  _gaq.push(['_setAccount', 'UA-XXXXX-X']);\r\n\t  _gaq.push(['_trackPageview']);\r\n\r\n\t  (function() {\r\n\t    var ga = document.createElement('script'); ga.type = 'text\/javascript'; ga.async = true;\r\n\t    ga.src = ('https:' == document.location.protocol ? 'https:\/\/ssl' : 'http:\/\/www') + '.google-analytics.com\/ga.js';\r\n\t    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r\n\t  })();\r\n\r\n\t<\/script>\r\n\t\r\n\r\n\t<\/head>\r\n\t\r\n\t\r\n<\/pre>\n
Quelques-uns des b\u00e9n\u00e9fices du mode asynchrone de Google Analytics selon Google en peronne<\/b><\/p>\n
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.\n<\/p><\/blockquote>\n
Source : http:\/\/code.google.com\/intl\/fr\/apis\/analytics\/docs\/tracking\/asyncMigrationExamples.html<\/a><\/i><\/p>\n
Utiliser le code de Google Analytics pour le tracking des \u00e9v\u00e9nements<\/h4>\n
Une fois que vous avez marqu\u00e9 vos pages avec le snippet asynchrone, il ne vous reste qu’\u00e0 placer dans vos pages autant de fonctions _trackEvent(category, action, opt_label, opt_value)<\/code>sur les liens que vous voulez tracker.<\/p>\n
\r\n\t<a href=\"#\" onClick=\"_gaq.push(['_trackEvent', 'MaCat', 'action-1', 'Desc action-1']);\">Lien action-1<\/a>\r\n<\/pre>\n
Les explications de google concernant les param\u00e8tres \u00e0 passer pour la fonction _trackEvent<\/code><\/b><\/p>\n
\ncategory (required)
\nThe name you supply for the group of objects you want to track.
\naction (required)
\nA string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
\nlabel (optional)
\nAn optional string to provide additional dimensions to the event data.
\nvalue (optional)
\nAn integer that you can use to provide numerical data about the user event.\n<\/p><\/blockquote>\n
Source : Les param\u00e8tres de _trackEvent()<\/code>
http:\/\/code.google.com\/intl\/fr-FR\/apis\/analytics\/docs\/gaJS\/gaJSApiEventTracking.html#_gat.GA_EventTracker_._trackEvent<\/a>
\n<\/i><\/p>\n
Toutefois, afin d’\u00e9viter toute pollution intempestive de votre code par du code javascript et d’\u00e9viter \u00e0 avoir marqu\u00e9 manuellement tous vos liens. Vous pouvez d\u00e9cider d’utiliser le framework jQuery pour vous faciliter dans cette tache de marquer chacun des boutons de votre site.<\/b><\/p>\n
Utiliser un plugin ou un script jQuery pour le tracking des \u00e9v\u00e9nements<\/h4>\n
Le Plugin Google Analytics jQuery<\/b>
\nC’est un des plugins plus simples \u00e0 mettre en place. Pour installer ce plugin Google Analytics jQuery Plugin<\/code>, 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’\u00e0 compl\u00e9ter par votre Google Analytics ID UA-XXXXXXXX-X<\/code>. <\/p>\n
Il n’est pas n\u00e9cessaire de taguer vos pages de mani\u00e8re asynchrone, le plugin s’en charge de vous installer le snippet. Il ne vous reste qu’\u00e0 placer et \u00e0 param\u00e9trer les \u00e9v\u00e9nements que vous souhaitez tracker. Le tout est plac\u00e9 entre les balises <head><\/head><\/code><\/b><\/p>\n
Il reste enfin \u00e0 d\u00e9finir les \u00e9l\u00e9ments \u00e0 tracker \u00e0 l’aide la fonction suivante : $.ga.trackEvent(category, action, opt_label, opt_value);<\/code> rendu disponible par le plugin. Vous avez par ailleurs \u00e0 disposition toutes les fonctions de l’API Google Analytics commen\u00e7ant par un _<\/code> <\/p>\n
\nCurrent 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 “_”.)\n<\/p><\/blockquote>\n
\r\n<script src=\"le_chemin_vers_script\/jquery.js\" type=\"text\/javascript\"><\/script> \r\n\r\n<script src=\"le_chemin_vers_script\/jquery.ga.js\" type=\"text\/javascript\"><\/script> \r\n\r\n\r\n\r\n<script type=\"text\/javascript\"> \r\n$(document).ready( function() { \r\n\t\t$.ga.load(\"UA-XXXXXXXX-X\", function(pageTracker) { \r\n\t\t\/\/ Un exemple de param\u00e9trage du plugin jquery.ga.js\r\n\t\tpageTracker._setDomainName(\".votresite.com\"); \r\n\t\t\/\/ Pour permettre le suivi des utilisateurs entre domaines.\r\n\t\tpageTracker._setAllowLinker(true);\r\n\t\t\/\/ Pour suivre les comportements des utilisateurs sur plusieurs sous-domaines \r\n\t\tpageTracker._setAllowHash(true); \r\n\t\t});\r\n\/* Tous les liens commen\u00e7ant par http, mais qui ne contiennent pas le domaine du document votresite.com\r\n*\/\t\t$(\"a[href^=http]:not([href*='votresite.com'])\").click(function(){ \r\n\t\t$.ga.trackEvent( 'externe', 'click', this.href); \r\n\t\t});\r\n\t}); \r\n<\/script>\r\n<\/pre>\n
Source : http:\/\/www.shamasis.net\/projects\/ga\/#usage<\/a><\/i><\/p>\n
Il existe plein d’autres plugins pour tagguer vos pages \u00e0 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’\u00e9vidence de quoi trouver votre bonheur ou des id\u00e9es pour personnaliser votre script de tracking d’\u00e9v\u00e9nements jQuery pour Google Analytic.<\/b><\/p>\n
En savoir plus<\/h2>\n
Informations sur le fonctionnement de Google Analytics<\/b><\/p>\n