Este tutorial demonstra como usar o Google Analytics para acompanhar o uso da sua extensão. Se você estiver desenvolvendo um app de plataforma, consulte Analytics para apps, porque os apps têm restrições diferentes das extensões.
Requisitos
Este tutorial espera que você tenha alguma familiaridade com a criação de extensões para o Google Chrome. Se você precisar de informações sobre como escrever uma extensão, leia o Tutorial para começar.
Você também precisa de uma conta do Google Analytics configurada para acompanhar sua extensão. Ao configurar a conta, você pode usar qualquer valor no campo de URL do site, já que sua extensão não terá um URL próprio.
Como instalar o código de acompanhamento
O snippet de código de acompanhamento padrão do Google Analytics busca um arquivo chamado ga.js em um URL protegido por SSL se a página atual foi carregada usando o protocolo https://. As extensões e os apps do Chrome
podem usar apenas a versão protegida por SSL do ga.js. A Política de Segurança de Conteúdo padrão do Chrome não permite carregar ga.js por HTTP não seguro. Além disso, as extensões do Chrome são hospedadas no esquema chrome-extension:// e requerem uma pequena modificação no snippet de acompanhamento normal para extrair ga.js diretamente de https://ssl.google-analytics.com/ga.js, em vez do local padrão.
Veja abaixo um snippet modificado para a API de acompanhamento assíncrona (a linha modificada está em negrito):
(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);
})();
Também é necessário garantir que sua extensão tenha acesso para carregar o recurso relaxando a
política de segurança de conteúdo padrão. A definição da política no manifest.json pode ter esta aparência:
{
...,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
...
}
Veja uma página pop-up (popup.html) que carrega o código de acompanhamento assíncrono usando um arquivo JavaScript externo (popup.js) e acompanha uma única visualização 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);
})();
Lembre-se de que a string UA-XXXXXXXX-X precisa ser substituída pelo número da sua própria conta do Google Analytics.
Acompanhamento de visualizações de página
O código _gaq.push(['_trackPageview']); acompanhará uma única visualização de página. Esse código pode ser usado em
qualquer página da sua extensão. Quando colocado em uma página em segundo plano, ele registra uma visualização uma vez por
sessão do navegador. Quando colocado em um pop-up, ele registra uma visualização sempre que o pop-up é
aberto.
Ao analisar os dados de visualização de página de cada página da sua extensão, você pode ter uma ideia de quantas vezes os usuários interagem com sua extensão por sessão do navegador:
Como monitorar solicitações de análise
Para garantir que os dados de acompanhamento da extensão sejam enviados ao Google Analytics, inspecione as páginas da extensão na janela "Ferramentas para desenvolvedores". Consulte o tutorial de depuração para mais informações. Como mostra a figura a seguir, se tudo estiver configurado corretamente, você verá solicitações para um arquivo chamado __utm.gif.
Como acompanhar eventos
Ao configurar o acompanhamento de eventos, você pode determinar com quais partes da sua extensão os usuários mais interagem. Por exemplo, se você tiver três botões que os usuários podem clicar:
<button id='button1'>Button 1</button>
<button id='button2'>Button 2</button>
<button id='button3'>Button 3</button>
Escreva uma função que envie eventos de clique para o Google Analytics:
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
E use-a como um manipulador de eventos para o clique de cada botão:
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
A página de visão geral do acompanhamento de eventos do Google Analytics mostra métricas de quantas vezes cada botão é clicado:
Com essa abordagem, você pode ver quais partes da sua extensão estão sendo subutilizadas ou subutilizadas. Essas informações podem ajudar a orientar decisões sobre a reformulação da IU ou outras funcionalidades a serem implementadas.
Para mais informações sobre como usar o acompanhamento de eventos, consulte a documentação para desenvolvedores do Google Analytics.
Exemplo de código
Uma extensão de exemplo que usa essas técnicas está disponível no repositório de amostras.