24. Web Analytics já existe há quase 20 anos! Free Open-Source Se você quer começar, aprender, evoluir e investir aos poucos e só no que interessa Se você quer customizar, desenvolver, integrar e contribuir com a comunidade 24 Conheça mais a história: http://dpc.bi/historia-webanalytics
59. 59 Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores
60. Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores Cookies, Javascript, imagens 1px Mitos e lendas Estrutura de contas Configurações necessárias e boas práticas Customizações avançadas Web, mobile, apps, Flash Validação de tags Debug Javascript com Google Analytics 60
62. Versões da tag Google Analytics Google continuamente atualiza seu código de acompanhamento, então mantenha seu código atualizado Dica, mantenha sua tag num arquivo fácil de inclusão (includes, templates, etc) e atualize a cada nova versão para aproveitar os novos recursos
63. Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores Cookies, Javascript, imagens 1px Mitos e lendas Estrutura de contas Configurações necessárias e boas práticas Customizações avançadas Web, mobile, apps, Flash Validação de tags Debug Javascript com Google Analytics 63
65. Mito: O uso do Google Analytics acelera a indexação do site pelo crawler e ajuda no SEO Muitos webmasters acreditam que a instalação do Google Analytics em seu site melhora a indexação das suas páginas pelo motor do Google Embora sabemos que os insights fornecidos pelo Google Analytics são de ajuda inestimáveis para melhora do site, a ferramenta em si não tem absolutamente nenhum impacto direto sobre os rankings. 65
66. MITO: A tag do Google Analytics torna o carregamento das páginas mais lento Uma grande preocupação da equipe do Google Analytics é evitar ao máximo que a inclusão da sua tagatrapalhe o carregamento ou a execução das páginas. Uma prova é última grande atualização de sua biblioteca para torna-lá 100% assíncrona. Mas que isso representa? Desde a sua chamada nas páginas, passando por sua configuração a execução, tudo é independe do carregamento da página. Desta forma, nenhum elemento da página precisa esperar a tag ser carregada e executada para rodar. E como isso é possível? O truque está na forma como os métodos são chamados. A sintaxe assíncrona é apenas um vetor sendo alimentado por Strings (que são os nome das funções). Exemplo: Alimentar um vetor é muito rápido para o navegador, que pode depois, continuar executando os códigos seguintes da página. Em segundo plano, a tag varre os elementos deste vetor e executa cada função, quais foram passadas apenas seus nomes. 1var _gaq= _gaq||[]; 2_gaq.push(['_setAccount','UA-XXXXX-X']); 3_gaq.push(['_trackPageview']); 66
67. MITO: O Google compartilha ou vende os dados do Analytics com outras empresas Os termos do serviço protegem o usuário, que pode escolher como e quando compartilhar dados com o Google: http://www.google.com/analytics/pt-BR/tos.htmlhttp://goo.gl/N7DKS 67
68. Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores Cookies, Javascript, imagens 1px Mitos e lendas Estrutura de contas Configurações necessárias e boas práticas Customizações avançadas Web, mobile, apps, Flash Validação de tags Debug Javascript com Google Analytics 68
70. Boas práticas no Uso de Contas e Perfis Ao lançar um novo site, em um novo endereço Criar uma nova conta Google Analytics Isso isola os dados dos outros usuários Posso usar 2 contas para medir o mesmo site? Se não for feita corretamente, pode prejudicar a medição nas 2 contas Se o interesse é compartilhar o relatório com outra pessoa, basta adicioná-lo como usuário da mesma conta Se houver real necessidade de 2 contas no mesmo site, será necessário aplicar as mesmas configurações de cookies para total compatibilidade Quero configurar em detalhes um perfil ou fazer testes Crie novos perfis utilizando a mesma conta, mas mantenha o perfil original intacto O Google Analytics não volta atrás em análises, então, caso algum filtro ou configuração dê errado, com seu perfil original intacto é possível ainda fazer algumas análises
71. Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores Cookies, Javascript, imagens 1px Mitos e lendas Estrutura de contas Configurações necessárias e boas práticas Customizações avançadas Web, mobile, apps, Flash Validação de tags Debug Javascript com Google Analytics 71
75. Implementação padrão da tag GA “Wizard” para geração de tags básicas ou avançadas Basta inserir a tag nas páginas monitoradas e seguir as instruções 75
79. Filtros podem para tratar, adaptar ou selecionar os dados tornando as análises mais precisas Incluir ou excluir Tráfego dos Domínios Deve ser aplicado quando a mesma conta do GA é usada para diferentes site. Com a aplicação deste tipo de filtro, os dados destes sites não serão misturados. Também pode ser usado quando a conta do GA foi usada indevidamente em outro site (cópia de código). Incluir ou excluir Tráfego dos Endereços IP Muito útil para excluir os acessos dos colaboradores da própria empresa evitando divergência nos dados. Da mesma maneira é possível isolar os acessos apenas dos colaboradores ao site para algum estudo específico. Incluir ou excluir Tráfego para os subdiretórios Isolar os acessos a apenas uma seção do site. Por exemplo, remover os acessos a área logada do site que fica no endereço: www.meusite.com.br/arealogada/... Maiúsculas/minúsculas Converte todo o conteúdo do campo em caracteres maiúsculos ou minúsculos. Esses filtros afetam apenas as letras. Pesquisar e substituir Esse é um filtro que pode ser utilizado para pesquisar um padrãodentro de um campo e substituir esse padrão por uma forma alternativa. Avançado Esse tipo de filtro permite que você crie um campo a partir de outros campos (um ou dois). O mecanismo de filtragem aplicará as expressões dos dois campos "Extrair" nos campos especificados e, em seguida, construirá um campo utilizando a expressão "Construtor". 79
80. Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores Cookies, Javascript, imagens 1px Mitos e lendas Estrutura de contas Configurações necessárias e boas práticas Customizações avançadas Web, Mobile, Apps, Flash Validação de tags Debug Javascript com Google Analytics 80
81. Monitoramento de download e links externos Por padrão o clique em links que levam para outros sites (externos) ou que para o download de algum arquivo, não são monitorados pela tag padrão do Google Analytics. Mas usando a biblioteca jQuery é muito simples acompanhar o uso desses links. Basta adicionar o este trecho javascript em uma página que já possua a jQuery e a tag do GA: 1 jQuery("a").live("mousedown", (function () { 2 if (typeof this.hostname === 'string'){ 3 if (this.hostname.toLowerCase() !== document.location.hostname.toLowerCase()) { 4 window._gaq.push(['_trackEvent', 5 'Link Externo', 6 this.href, 7 document.location.pathname 8 ]); 9 } 10 if (this.pathname.indexOf(".zip") || this.pathname.indexOf(".pdf")) { 11 window._gaq.push(['_trackEvent', 12 'Download', 13 this.href, 14 document.location.pathname 15 ]); 16 } 17 } 18 }));
82. Tempo de carregamento e Social Tracker Recentemente o Google lançou duas novas funcionalidades em sua biblioteca javascript: Site Speed - http://goo.gl/a64Kj Social Plugin - http://goo.gl/u9ApO O Site Speed, monitora o tempo de carregamento das páginas e exibe essa informação em um relatório específico na ferramenta. Para habilitar esse recurso simplesmente adicione após a tag padrão em todas as páginas a seguinte linha javascript: O Social Plugin é uma função específica para monitorar o uso do compartilhamento das suas páginas nas redes sociais. Como o botão “Like” do Facebook ou o “+1” do Google. Sua instalação deve ser feita para cada link, fornecendo o nome da rede e ação executada. Segue alguns exemplos: Neste página é possível analisar a integração do Social Plugin com as chamadas assíncronas e síncronas dos widgets do Facebook e Twitter: http://goo.gl/fJtJV 1 _gaq.push(['_trackPageLoadTime']); 1 _gaq.push(['_trackSocial', 'facebook', 'like']); 2 _gaq.push(['_trackSocial', 'twitter', 'tweet']);
83. Google Analytics e Ecommerce O Google Analytics possui um vários relatórios específicos para o monitoramento das vendas de sites de comércio eletrônico. São necessários três métodos para o acompanhamento das transações de comércio eletrônico em seu site Estes devem ser chamados nessa ordem e apenas na página de confirmação da compra: _addTrans() - criação da transação Aqui fornecemos todas as informações relacionadas a compra, como o código de pedido, valor total do pedido e do frete. _addItem() - adição de itens à transação Recebe as informações sobre cada produto, como preço, descrição, categoria e quantidade. O item é associado a transação por meio do campo orderId. _trackTrans() - envio da transação para o Google Analytics Confirma uma compra e todos os dados que foram fornecido anteriormente, finalizando essa transação. Documentação oficial: http://goo.gl/0zuwE
84. <head><title>Recibo de compra de roupas - ClothingAcme</title><scripttype="text/javascript"> var _gaq= _gaq||[]; _gaq.push(['_setAccount','UA-XXXXX-X']); _gaq.push(['_trackPageview']); _gaq.push(['_addTrans', '1234', // compra ID - obrigatório 'Acme Clothing', // nome da loja '11.99', // total - obrigatório '1.29', // taxa '5' // frete ]); _gaq.push(['_addItem', '1234', // compra ID - obrigatório 'DD44', // código do produto - obrigatório 'T-Shirt', // nome 'Green Medium', // categoria '11.99', // preço - obrigatório '1' // quantidade - obrigatório ]); _gaq.push(['_trackTrans']); (function(){ varga=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'; vars=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s); })();</script></head>
85. GAS! = Google AnalyticsonSteroids Projeto Open-Source de biblioteca para implementação de Google Analytics https://bitbucket.org/dpc/gas 85
86. Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores Cookies, Javascript, imagens 1px Mitos e lendas Estrutura de contas Configurações necessárias e boas práticas Customizações avançadas Web, Mobile, Apps, Flash Validação de tags Debug Javascript com Google Analytics 86
87. Web Analytics para aplicativos Mobile Atualmente já existe uma gama de ferramentas para monitoramentos de Apps para celulares e tablets: Flurry - http://www.flurry.com/ PercentMobile - http://percentmobile.com/ Motally - http://www.motally.com/ AdMod - http://analytics.admob.com/home/ Mobilytics - http://www.mobilytics.net/ Localytics - http://www.localytics.com/app-analytics/ Porém o Google Analytics também possui bibliotecas específicas para as principais plataformas móveis, como Android e iOS. Usando o GA você pode concentrar em uma única ferramenta os relatórios sobre os acessos ao site, aplicativos e widgets.
88. Google Analytics para Android O Google Analytics SDK para aplicativos Android fornecer uma interface para controle das atividades dentro do aplicativo móveis que podem ser acompanhada nos mesmo relatórios convencionais do GA. Você pode usar este SDK para calcular volume de visitas, duração da sessão, a taxa de rejeição e número de visitantes únicos. Trecho de exemplo para um evento: 1 importcom.google.android.apps.analytics.GoogleAnalyticsTracker; 2 ... 3 tracker =GoogleAnalyticsTracker.getInstance();4tracker.start("UA-YOUR-ACCOUNT-HERE",this);56ButtoncreateEventButton=(Button)findViewById(R.id.NewEventButton);7createEventButton.setOnClickListener(newOnClickListener(){8@Override 9 publicvoidonClick(View v){10 tracker.trackEvent("Clicks","Button","clicked",77); 11 } 12 }); Download e manual: http://goo.gl/Nn17A
89. Google Analytics para iOS Da forma que para os aplicados Android, também está disponível um SDK específico para o iOS da Apple Trecho de exemplo para um pageview: 1 #import "BasicExampleAppDelegate.h"2#import "GANTracker.h"3staticconstNSIntegerkGANDispatchPeriodSec=10;4@implementationBasicExampleAppDelegate5@synthesize window = window_;6-(void)applicationDidFinishLaunching:(UIApplication*)application {7 [[GANTrackersharedTracker]startTrackerWithAccountID:@"UA-0000000-1"8 dispatchPeriod:kGANDispatchPeriodSec9 delegate:nil];10 11 if(![[GANTrackersharedTracker]trackPageview:@"/app_entry_point"12 withError:&error]){13 // Handleerrorhere14 } 15 16 [window_ makeKeyAndVisible]; 17} Download e manual: http://goo.gl/39aMc
90. Google Analytics para Adobe Flash: ActionScript 3 No Flash: E executar uma das funções criadas para cada ação que deseja-se monitorar No Javascript: 1 import flash.external.ExternalInterface; 2 3 public function track_pageview(uri:String) { 4 ExternalInterface.call("track_pageview", uri); 5 return; 6 } 7 8 public function track_event(category:String, action:String, label:String, value:String){ 9 ExternalInterface.call("track_event", category, action, label, value); 10 return; 11 } 1 function track_pageview(uri){ 2 _gaq.push(["_trackPageview", uri]); 3 } 4 5 function track_event(category, action, label, value){ 6 _gaq.push(["_trackEvent", category, action, label, value]); 7 } 90
91. Google Analytics para Adobe Flash: Ga for Flash O gaforflash foi desenvolvido pela própria Adobe e contém todos os recursos do código javascript presente no “ga.js”. Este componente é um objeto compilado para ActionScript 3, que torna a implementação do Google Analytics intuitiva no Flash e em ambientes de desenvolvimento Flex. Ele é útil para vários objetivos de acompanhamento comuns em Flash, como: um widget em Flash incorporado a uma página HTML um aplicativo Flex independente ou um site somente em Flash hospedado em uma página HTML um jogo ou programa Flex/Flash distribuído em que o desenvolvedor não controla onde o widget será posicionado Download e manual: http://code.google.com/p/gaforflash/
92. Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores Cookies, Javascript, imagens 1px Mitos e lendas Estrutura de contas Configurações necessárias e boas práticas Customizações avançadas Web, Mobile, Apps, Flash Validação de tags Debug Javascript com Google Analytics 92
93. Todos os Navegadores Fiddler (Win) http://www.fiddler2.com/fiddler2/ Charles (Win, Mac, Linux) (Pago) http://www.charlesproxy.com/ Chrome Google AnalyticsTrackingCodeDebugger http://goo.gl/KrvcX Firefox Httpfox https://addons.mozilla.org/pt-br/firefox/addon/httpfox/ Firebug https://addons.mozilla.org/pt-br/firefox/addon/firebug/ Ferramentas para validação de tags Extensão oficial Google Mais informações sobre Ferramentas de depuração: http://goo.gl/FVdDW 93
94. Validando tags no Firefox com o httpfox Tecla atalho para iniciar o plugin: Alt+F2 Botão ‘Start’! Filtrar por: ‘utm’ Selecionar a aba: Query String Mais informações sobre os parâmetros do GIF solicitação: http://goo.gl/0iFkG 94
95. Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores Cookies, Javascript, imagens 1px Mitos e lendas Estrutura de contas Configurações necessárias e boas práticas Customizações avançadas Web, Mobile, Apps, Flash Validação de tags Debug Javascript com Google Analytics 95
96. Técnicas e ferramentas para testes e debugs de erros em Javascript Firebug + Fireunit http://fireunit.org TestSwarm http://github.com/jquery/testswarm jQuery + QUnit http://docs.jquery.com/QUnit JsUnit http://www.jsunit.net js-test-driver http://code.google.com/p/js-test-driver 96
97. Mas nem tudo pode ser testado... Todos os navegadores e suas infinidades de versões Diversos dispositivos, como celulares e tablets Velocidade da conexão e impactos nos timeouts Regras de firewall ou proxy Não seria legal uma forma de acompanhar os erros de Javascript gerados pelos usuários da mesma forma, por exemplo, que analisando um log de erros do Apache? 97
98. Log de erros Javascript pelo Google Analytics Você pode utilizar o relatório de EVENTOS do Google Analytics para fazer um log de erros Javascript que aconteçam com seus usuários. Além do erros, você também terá várias informações relacionadas como: Detalhes da exceção Página em que ocorrem Versão do navegador Sistema Operacional Caminho da navegação Munido de todas esses dados fica muito fácil entender e solucionar os erros. 98
99. Log de Erros: Categorias Exemplos: TypeError, URIErro, ReferenceError 99
100. Log de Erros: Mensagem Exemplos: jQuery notavailable, var undefined 100
104. Implementação para captura de erros global Para alguns navegadores, podemos simplificar e aplicar monitoramento de erro para toda a página: 1 <script type="text/javascript"> 2 3 window.onerror = function(errorMsg, url, lineNumber) { 4 _gaq.push(['_trackEvent', 5 'ExceptionError'), //Categoria 6 errorMsg, //Mensagem 7 url + " (" + lineNumber + ")" //Pagina e linha 8 ]); 9 } 10 11 </script> 104
106. Maissobre o tema - Livros LivroWeb Analytics 2.0 Livro Google Analytics http://dpc.bi/livro-wa-20 http://dpc.bi/livro-ga Livro Otimização de Conversão http://dpc.bi/livro-otimizacao
107. Maissobre o tema – blogs, fóruns e podcasts Grupo de discussão Webanalytics_Brasil http://dpc.bi/webanalytics_brasil Blog Direct Performance http://dpc.bi/blog-performance SearchCast Analytics http://dpc.bi/searchcast-analytics