En este instructivo, se muestra cómo usar Google Analytics para hacer un seguimiento del uso de tu extensión. Si estás desarrollando una app de plataforma, consulta Analytics para apps, ya que las apps tienen restricciones diferentes a las de las extensiones.
Requisitos
Para este instructivo, se espera que ya conozcas las extensiones de escritura para Google Chrome. Si necesitas información para escribir una extensión, consulta el instructivo de introducción.
También necesitarás una cuenta de Google Analytics configurada para realizar el seguimiento de tu extensión. Ten en cuenta que, cuando configuras la cuenta, puedes usar cualquier valor en el campo URL del sitio web, ya que tu extensión no tendrá una URL propia.
Cómo instalar el código de seguimiento
El fragmento de código de seguimiento estándar de Google Analytics recupera un archivo llamado ga.js de una URL protegida con SSL si la página actual se cargó con el protocolo https://. Las extensiones y aplicaciones de Chrome solo pueden usar la versión de ga.js protegida por SSL. La Política de Seguridad del Contenido predeterminada de Chrome no permite cargar ga.js en HTTP no seguro. Esto, más el hecho de que las extensiones de Chrome se alojen en el esquema de chrome-extension://, requiere una leve modificación en el fragmento de seguimiento habitual para extraer ga.js directamente desde https://ssl.google-analytics.com/ga.js, en lugar de la ubicación predeterminada.
A continuación, se muestra un fragmento modificado de la API de seguimiento asíncrono (la línea modificada está en negrita):
(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);
})();
También deberás asegurarte de que la extensión tenga acceso para cargar el recurso mediante la flexibilización de la política de seguridad del contenido predeterminada. La definición de la política en tu manifest.json podría verse de la siguiente manera:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
A continuación, se muestra una página emergente (popup.html) que carga el código de seguimiento asíncrono a través de un archivo JavaScript externo (popup.js) y realiza el seguimiento de una sola vista de página:
<!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);
})();
Ten en cuenta que la string UA-XXXXXXXX-X debe reemplazarse por tu propio número de cuenta de
Google Analytics.
Seguimiento de vistas de página
El código _gaq.push(['_trackPageview']); realizará el seguimiento de una sola vista de página. Este código se puede usar en
cualquier página de tu extensión. Cuando se coloca en una página en segundo plano, registra una vista una vez por sesión del navegador. Cuando se coloque en una ventana emergente, se registrará una vista cada vez que se abra.
Si observas los datos de vistas de cada página de tu extensión, puedes tener una idea de cuántas veces los usuarios interactúan con tu extensión por sesión del navegador:
Supervisa solicitudes de estadísticas
Para asegurarte de que los datos de seguimiento de tu extensión se envíen a Google Analytics, puedes inspeccionar las páginas de tu extensión en la ventana de Herramientas para desarrolladores (consulta el instructivo de depuración para obtener más información). Como se muestra en la siguiente figura, deberías ver solicitudes de un archivo llamado __utm.gif si todo está configurado correctamente.
Eventos de seguimiento
Si configuras el seguimiento de eventos, puedes determinar con qué partes de tu extensión interactúan más tus usuarios. Por ejemplo, si tienes tres botones, los usuarios pueden hacer clic:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
Escribe una función que envíe eventos de clic a Google Analytics:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
Además, úsalo como un controlador de eventos para cada clic de botón:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
En la página de descripción general del seguimiento de eventos de Google Analytics, obtendrás métricas sobre la cantidad de veces que se hace clic en cada botón individual:
Si usas este enfoque, puedes ver qué partes de tu extensión tienen un uso infrautilizado o excesivo. Esta información puede ayudar a guiar las decisiones sobre el rediseño de la IU o la funcionalidad adicional para implementar.
Para obtener más información sobre el uso del seguimiento de eventos, consulta la documentación para desarrolladores de Google Analytics.
Código de muestra
Una extensión de ejemplo que usa estas técnicas está disponible en el repositorio de muestras.