Ce tutoriel explique comment utiliser Google Analytics pour suivre l'utilisation de votre extension. Si vous développez une application de plate-forme, consultez Analytics pour les applications, car les restrictions sont différentes pour les applications et les extensions.
Conditions requises
Ce tutoriel suppose que vous soyez déjà familiarisé avec l'écriture d'extensions pour Google Chrome. Pour savoir comment écrire une extension, consultez le tutoriel de démarrage.
De plus, vous devez configurer un compte Google Analytics pour suivre votre extension. Notez que lors de la configuration du compte, vous pouvez utiliser n'importe quelle valeur dans le champ "URL du site Web", car votre extension n'aura pas sa propre URL.
Installation du code de suivi
L'extrait de code de suivi Google Analytics standard extrait un fichier nommé ga.js à partir d'une URL protégée par SSL si la page actuelle a été chargée à l'aide du protocole https://. Les extensions et les applications Chrome peuvent uniquement utiliser la version de ga.js protégée par SSL. Le chargement de ga.js via HTTP non sécurisé n'est pas autorisé par la Content Security Policy par défaut de Chrome. En plus du fait que les extensions Chrome sont hébergées sous le schéma chrome-extension://, vous devez modifier légèrement l'extrait de suivi habituel pour extraire ga.js directement de https://ssl.google-analytics.com/ga.js au lieu de l'emplacement par défaut.
Vous trouverez ci-dessous un extrait de code modifié pour l'API de suivi asynchrone (la ligne modifiée est mise en gras):
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Vous devez également vous assurer que votre extension a accès au chargement de la ressource en assouplissant la stratégie de sécurité du contenu par défaut. La définition de la règle dans manifest.json peut se présenter comme suit:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
Voici une page pop-up (popup.html) qui charge le code de suivi asynchrone via un fichier JavaScript externe (popup.js) et effectue le suivi d'une seule page vue:
<!DOCTYPE html>
<html>
<head>
...
<script src="popup.js"></script>
</head>
<body>
...
</body>
</html>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = 'https://ssl.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
N'oubliez pas que la chaîne UA-XXXXXXXX-X doit être remplacée par votre numéro de compte Google Analytics.
Suivi des pages vues
Le code _gaq.push(['_trackPageview']); permet de suivre une seule page vue. Ce code peut être utilisé sur n'importe quelle page de votre extension. Lorsqu'elle est placée sur une page en arrière-plan, elle enregistre une vue une fois par session de navigateur. Lorsqu'elle est placée dans un pop-up, elle enregistre une vue une fois à chaque ouverture de cette fenêtre.
En examinant les données sur les pages vues pour chaque page de votre extension, vous pouvez vous faire une idée du nombre de fois où les utilisateurs interagissent avec votre extension par session de navigateur:
Surveiller les demandes d'analyse
Pour vous assurer que les données de suivi de votre extension sont envoyées à Google Analytics, vous pouvez inspecter les pages de votre extension dans la fenêtre "Outils de développement" (pour en savoir plus, consultez le tutoriel de débogage). Comme le montre la figure suivante, vous devriez voir des requêtes pour un fichier nommé __utm.gif si tout est correctement configuré.
Événements de suivi
En configurant le suivi des événements, vous pouvez déterminer les parties de votre extension avec lesquelles vos utilisateurs interagissent le plus. Par exemple, si vous disposez de trois boutons sur lesquels les utilisateurs peuvent cliquer:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
Écrivez une fonction qui envoie des événements de clic à Google Analytics:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
Et utilisez-le comme gestionnaire d'événements pour chaque clic sur chaque bouton:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
La page de présentation du suivi des événements Google Analytics fournit des métriques sur le nombre de clics sur chaque bouton:
Cette approche vous permet d'identifier les parties de votre extension qui sont sous-ou surexploitées. Ces informations peuvent vous aider à prendre des décisions concernant la refonte de l'interface utilisateur ou les fonctionnalités supplémentaires à implémenter.
Pour en savoir plus sur l'utilisation du suivi des événements, consultez la documentation destinée aux développeurs de Google Analytics.
Exemple de code
Vous trouverez un exemple d'extension utilisant ces techniques dans le dépôt d'exemples.