ga.js est une bibliothèque JavaScript permettant de mesurer les interactions des utilisateurs avec votre site Web. Il s'agit d'une ancienne bibliothèque. Si vous débutez avec Google Analytics, vous devez utiliser la dernière bibliothèque de suivi, analytics.js.
Guide de démarrage rapide du code de suivi
L'extrait Analytics est un petit extrait de code JavaScript que vous collez dans vos pages. Elle active le suivi Google Analytics en insérant ga.js dans la page. Pour l'utiliser sur vos pages, copiez l'extrait de code ci-dessous en remplaçant UA-XXXXX-X par l'ID de votre propriété Web.
Collez cet extrait sur la page de votre modèle de site Web afin qu'il apparaisse avant la balise de fermeture </head>.
Si vous avez besoin d'aller au-delà du suivi de base des pages, consultez la documentation de référence sur le suivi pour obtenir la liste des méthodes disponibles dans l'API. Consultez le Guide d'utilisation pour en savoir plus sur l'utilisation de la syntaxe asynchrone. Pour obtenir des instructions détaillées sur la configuration du suivi, consultez l'article du centre d'aide Configurer le suivi.
<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>
L'extrait ci-dessus représente la configuration minimale requise pour effectuer le suivi d'une page de manière asynchrone. Il utilise _setAccount pour définir l'ID de propriété Web de la page, puis appelle _trackPageview pour renvoyer les données de suivi aux serveurs Google Analytics.
Important : Si vous mettez à jour vos pages pour passer de l'extrait traditionnel à la dernière version asynchrone, vous devez d'abord supprimer l'extrait de suivi existant. Nous vous déconseillons d'utiliser les deux extraits ensemble sur la même page. Pour obtenir des instructions sur la migration, consultez Migrer vers Async.
Fonctionnement de la syntaxe asynchrone
C'est l'objet _gaq qui rend la syntaxe asynchrone possible.
Il agit comme une file d'attente, c'est-à-dire une structure de données entrant,premier sorti qui collecte les appels d'API jusqu'à ce que ga.js soit prêt à les exécuter. Pour ajouter un élément à la file d'attente, utilisez la méthode _gaq.push.
Pour placer un appel d'API dans la file d'attente, vous devez le convertir à partir de la syntaxe JavaScript traditionnelle en tableau de commandes. Les tableaux de commandes sont simplement des tableaux JavaScript conformes à un certain format. Le premier élément d'un tableau de commandes correspond au nom de la méthode d'objet de suivi que vous souhaitez appeler. Il doit s'agir d'une chaîne. Les autres éléments sont les arguments que vous souhaitez transmettre à la méthode de l'objet de suivi. Il peut s'agir de n'importe quelle valeur JavaScript.
Le code suivant appelle _trackPageview() à l'aide de la syntaxe traditionnelle:
var pageTracker = _gat._getTracker('UA-XXXXX-X');
pageTracker._trackPageview();
Le code équivalent dans la syntaxe asynchrone nécessite deux appels à _gaq.push.
_gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']);
Dans la syntaxe asynchrone, la création de l'objet de suivi est implicite, mais nous devons encore définir l'ID de propriété Web pour l'outil de suivi. La méthode _setAccount a été ajoutée pour fournir cette fonctionnalité. Toutes les autres méthodes de suivi des objets sont identiques dans le suivi asynchrone et traditionnel. Seule la syntaxe est différente.
Pour en savoir plus sur la syntaxe asynchrone, consultez la documentation de référence sur le suivi pour la méthode _gaq.push.
Effectuer le suivi avec des gestionnaires d'événements HTML
La syntaxe de suivi asynchrone doit également être utilisée depuis des gestionnaires d'événements DOM. Par exemple, le bouton suivant génère un événement lorsqu'un utilisateur clique dessus.
<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"></button>
Même si vous cliquez sur ce bouton avant que le navigateur ait fini de charger ga.js, l'événement est capturé, puis exécuté. À l'aide du suivi traditionnel, le navigateur peut générer une exception dans cette situation.
Placer des fonctions dans la file d'attente
En plus des tableaux de commandes, vous pouvez également placer des objets fonction dans la file d'attente _gaq. Les fonctions peuvent contenir n'importe quel code JavaScript arbitraire. Comme les tableaux de commandes, elles sont exécutées dans l'ordre dans lequel elles sont transmises à _gaq. Cette technique est utile pour appeler les API de suivi qui renvoient des valeurs. Par exemple, le code suivant crée une URL de lien et définit la propriété href pour une association avec le résultat.
_gaq.push(function() {
var pageTracker = _gat._getTracker('UA-XXXXX-X');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
L'exemple ci-dessus utilise _gat pour créer un objet de suivi, mais comme il est attribué à une variable locale, le code en dehors de la fonction ne peut pas l'utiliser. Bien que cette méthode soit acceptable, vous pouvez utiliser la méthode _gat._createTracker pour créer un objet permanent, accessible dans le monde entier.
Le code suivant illustre ce fonctionnement.
_gaq.push(function() {
var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
_gaq.push(['myTracker._trackPageview']);
L'exemple ci-dessus crée un outil de suivi asynchrone dans la fonction, puis le référence plus tard par son nom dans le tableau de commandes.
L'utilisation opposée est également possible. Par exemple, si vous devez utiliser un objet de suivi asynchrone créé via un tableau de commandes précédemment transféré, utilisez la méthode _gat._getTrackerByName. Le code suivant montre comment cela fonctionne.
_gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);
_gaq.push(function() {
var pageTracker = _gat._getTrackerByName('myTracker');
var link = document.getElementById('my-link-id');
link.href = pageTracker._getLinkerUrl('http://example.com/');
});
Un seul envoi, plusieurs commandes
Au lieu de saisir _gaq.push(...) pour chaque appel, vous pouvez exécuter toutes vos commandes simultanément. Le code suivant illustre cette technique.
_gaq.push( ['_setAccount', 'UA-XXXXX-X'], ['_setDomainName', 'example.com'], ['_setCustomVar', 1, 'Section', 'Life & Style', 3], ['_trackPageview'] );
En effet, la méthode _gaq.push imite la méthode Array.push, qui permet de transférer plusieurs éléments avec un seul appel.
Diviser l'extrait
Si vous préférez placer l'extrait Analytics en bas de la page, sachez que vous n'avez pas besoin de placer l'extrait complet au bas de la page.
Vous pouvez conserver la plupart des avantages du chargement asynchrone en divisant l'extrait en deux : la première moitié reste en haut de la page et le reste vers le bas. Étant donné que la première partie de l'extrait de code de suivi n'a que peu ou pas d'effet sur l'affichage de la page, vous pouvez la laisser en haut et insérer la partie de l'extrait qui insère ga.js en bas.
Voici à quoi pourrait ressembler une page comportant l'extrait asynchrone divisé en deux:
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>Page Content</p>
<script src="some_random_script.js"></script>
<p>Page Content</p>
<script type="text/javascript"> (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>
</body>
</html>
Les deux éléments de code doivent être encapsulés dans leurs propres balises de script, mais seules les six dernières lignes de l'extrait asynchrone d'origine doivent être déplacées vers le bas. Toutes les lignes qui transmettent des méthodes sur _gaq peuvent rester en haut.
Éviter les pièges courants
Lorsque vous utilisez la syntaxe asynchrone ou traditionnelle, tenez compte des points suivants:
- Les noms de méthodes sont sensibles à la casse.
Si vous utilisez un nom de méthode sans la casse, vos appels de méthode ne fonctionneront pas. Exemples :_gaq.push(['_trackpageview']); // bad _gaq.push(['_trackPageview']); // good
- Utilisez les noms de méthode appropriés.
Si votre suivi ne fonctionne pas correctement, vérifiez que vous utilisez le nom approprié pour la méthode. Exemples :_gaq.push(['_setDomain', 'example.com']); // bad _gaq.push(['_setDomainName', 'example.com']); // good
- Seules les chaînes doivent être transmises entre guillemets. Tous les autres types ne doivent pas être entre guillemets.
Toute valeur qui n'est pas une chaîne, telle que des valeurs booléennes, des littéraux d'objet, des fonctions ou des tableaux, doit être transmise sans guillemets. Utilisez uniquement des guillemets lorsque vous transmettez un élément destiné à être interprété comme une chaîne. Si vous migrez depuis la syntaxe traditionnelle, tout paramètre de fonction transmis sans guillemets ne doit pas être entre guillemets dans la syntaxe asynchrone. Exemples :_gaq.push(['_setAllowLinker', 'false']); // bad _gaq.push(['_setAllowLinker', false]); // good
- Assurez-vous que les chaînes ne contiennent pas d'espaces au début ou à la fin.
Exemples :_gaq.push(['_setAccount', ' UA-65432-1']); // bad _gaq.push(['_setAccount', 'UA-65432-1']); // good
Désactivation du suivi
Dans certains cas, il peut être nécessaire de désactiver le code de suivi Google Analytics sur une page sans avoir à supprimer l'extrait de code. Vous pouvez par exemple procéder ainsi si les règles de confidentialité de votre site permettent à un visiteur de désactiver le suivi Google Analytics.
L'extrait de code de suivi ga.js inclut désormais une propriété de fenêtre. Lorsqu'il est défini sur true, il désactive l'envoi de données à Google Analytics.
Lorsque Google Analytics tente de définir un cookie ou de renvoyer des données aux serveurs Google Analytics, il vérifie si cette propriété est définie sur true. Si c'est le cas, cette fonctionnalité aura le même effet que si le visiteur avait installé le plug-in de navigateur pour la désactivation de Google Analytics.
Pour désactiver le suivi, définissez la propriété de la fenêtre suivante sur "true" :
window['ga-disable-UA-XXXXXX-Y'] = true;
Où la valeur UA-XXXXXX-Y correspond à l'ID de propriété Web pour lequel vous souhaitez désactiver le suivi.
Cette propriété de fenêtre doit être définie avant que le code de suivi soit appelé. Cette propriété doit être définie sur chaque page où vous souhaitez désactiver le suivi Google Analytics. Si la propriété n'est pas définie ou si elle est définie sur "False", le suivi fonctionnera normalement.
Par exemple, si votre code de suivi Google Analytics sur une page inclut les éléments suivants:
_gaq.push['_setAccount', 'UA-123456-1']
Si vous souhaitez empêcher ce code de suivi de définir des cookies ou de renvoyer des données à Google Analytics, vous devez utiliser le code suivant avant le code de suivi:
window['ga-disable-UA-123456-1'] = true;
Si vous utilisez plusieurs outils de suivi sur une page comportant plusieurs ID de propriété Web, vous devez définir la variable window['ga-disable-UA-XXXXXX-Y'] équivalente sur true pour chaque propriété Web afin de désactiver complètement le suivi Google Analytics sur cette page.
Exemple
Voici un exemple de code que vous pouvez utiliser pour fournir une fonctionnalité de désactivation à vos utilisateurs.
Tout d'abord, ajoutez un nouveau lien HTML à votre site pour exécuter la logique de désactivation:
<a href="javascript:gaOptout()">Click here to opt-out of Google Analytics</a>
Ajoutez ensuite l'extrait de code suivant avant l'extrait de code ga.js. Veillez à remplacer la valeur gaProperty par UA-XXXX-Y par la propriété utilisée sur votre site.
Il s'agit de la même valeur que vous transmettez à la commande _setAccount.
<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';
// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
}
// Opt-out function
function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = true;
}
</script>
Lorsqu'un utilisateur clique sur le lien HTML de désactivation, la fonction gaOptout personnalisée s'exécute. Il définira un cookie pendant une longue période et désactivera la collecte de données analytics.js.
Lorsqu'un utilisateur revient sur ce site, le script ci-dessus vérifie si le cookie de désactivation a été défini. Si c'est le cas, la collecte de données analytics.js sera également désactivée.
Forcer le protocole SSL (HTTPS)
Pour forcer Google Analytics à envoyer systématiquement des données en utilisant le protocole SSL, même depuis des pages non sécurisées (HTTP), utilisez la méthode _gat._forceSSL, comme dans cet exemple:
_gaq.push(['_setAccount', 'UA-12345-1']); _gaq.push(['_gat._forceSSL']); // Send all hits using SSL, even from insecure (HTTP) pages. _gaq.push(['_trackPageview']);