Web Analytics TDC 2011

Apresentação Fábio Serra @fabiophms Leonardo Naressi @leonaressi www.directperformance.com.br 2

3 Agenda Web Analytics para todos Web Analytics em tempo real Google Analytics para desenvolvedores

Como seuprojetotrata o usuário?

E como o usuárioestátratandoseuprojeto?

Sabendoqualparafusoapertarficamaisfácil…

Semmétricas, as decisõesficamdifíceis…

Métricassãoessenciaisparagestão e manutenção

E parainteligênciacompetitiva

”@marcogomes : Programarégrátis",Web analytics também 23

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

AW Stats – “Retrô” mas bemcompleto – Analiza logs de Webserver, FTP e E-mail 26

W3 Perl – Muitorápido- Analiza logs de Webserver, FTP, E-mail, Proxy, Tags e Contadores 27

Grape (PHP) – Muito, mas muito simples 28

BB Clone (PHP) – Enxuto e prático 29

Tracewatch (PHP) – Inclui Path Analysis 30

Slim Stat – Simples, fácil e com interface para iPhone 31

Open Web Analytics – Muitocompleto e com Data Warehouse pronto 32

Piwik - Open-source ativoe de altíssimaqualidade 33 AlgumasempresasjáoferecemPiwik hosting paraquemnãoquerter no seupróprioservidor

34 Alguns Projetos Web Analytics Open-Source

Web Analytics FREE / FREEMIUM 35

W3 Counter – Free até 5.000 pageviews/dia e com mais de 30 relatórios 36

Stat Counter – Free até 250.000 pageviews/mês 37

38 Clicky – Free até 3.000 pageviews/dia e com monitoramento de redessociais e feeds

Yahoo! Web Analytics - Muitopoderoso 39

Google Analytics – Sinônimo de Web Analytics 40

41 Ferramentas Web AnalyticsFree / Freemium

Vocêprecisa de dados em tempo-real? Vocêagiráem tempo-real? Ousófaráacompanhamentosdiários, semanais, mensais?

Algumasferramentas Web Analytics jáatualizam dados em tempo-real Free Yahoo! Web Analytics - http://web.analytics.yahoo.com/ W3 Counter - http://www.w3counter.com/ StatCounter - http://statcounter.com/ Clicky - http://getclicky.com/ Open-source Piwik- http://piwik.org/ OWA - http://www.openwebanalytics.com/ SlimStat - http://slimstat.net/ 46 Mas, todasessasferramentasaplicam o mesmoconceitotradicional de Web Analytics, com somenteatualizaçãomaisfrequente

Woopra – Utilizaaplicativo desktop paravisualizaçãointerativa 48

Pclicks – Real-time, Mapa de calor e Análise de links 49

MixPanel – Baseadoemeventos e suportaimplementaçãoemaplicativos mobile 50

Reinvigorate – Real-Time, Mapa de Calor e aplicativo desktop paraalertas 51

Hummingbird – Open-source promissor 52

ChartBeat – visualizaçãointuitiva e interface para iPhone 53

54 Projetos e ferramentas especializadas em medição real-time

Hummingbird – dissecando um projeto à frente do nosso tempo 55

Web Analytics real-time é um desafiotecnológico 56

57 O Hummingbird resolveu cada peça desse quebra-cabeça com recursos “quentes”

Saibamaissobre o Hummingbird https://github.com/mnutt/hummingbird 58

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

Como funcionauma tag Google Analytics 61 Tag JS

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

Mitos e Lendas sobre o Google Analytics 64

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

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

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

Estrutura de Contas e Perfis no Google Analytics 69

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

Criação da Conta Google Analytics 72

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

Pronto! Sua conta foi criada! 76

Metas: Passou por determinada página Funil de conversão 77

Metas de Engajamento Quanto tempo passou no site? Quantas páginas navegou? 78

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

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

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 }));

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']);

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

<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>

GAS! = Google AnalyticsonSteroids Projeto Open-Source de biblioteca para implementação de Google Analytics https://bitbucket.org/dpc/gas 85

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.

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

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

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

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/

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

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

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

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

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

Log de Erros: Categorias Exemplos: TypeError, URIErro, ReferenceError 99

Log de Erros: Mensagem Exemplos: jQuery notavailable, var undefined 100

Código principal 1 <script type="text/javascript"> 2 3 functiontrack_error_event (exception) { 4 _gaq.push(['_trackEvent', 5 'Exception '+(exception.name||'Error'), //Categoria 6 exception.message || exception, //Mensagem 7 document.location.href//Pagina 8 ]); 9 } 10 11 </script> Fonte: http://www.directperformance.com.br/javascript-debug-simples-com-google-analytics 102

Exemplo de implementação 1 <script type="text/javascript">2var _gaq = _gaq || [];3 _gaq.push(4 ['_setAccount','UA-XXXXX-X'],5 ['_trackPageview']6 );7functiontrack_error_event (exception) {8 _gaq.push(['_trackEvent',9'Exception ' + (exception.name || 'Error'), //Categoria10exception.message || exception, //Mensagem11document.location.href//Pagina12 ]);13 }14(function() {15varga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;16ga.src = 'http://www'.google-analytics.com/ga.js';17vars = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);18 })();19 </script>2021 <script type="text/javascript">22try{23vari = 1/0; //Exemplo de código com erro24 }25catch(e){26track_error_event(e);27 }28 </script> 103

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

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

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

@FabioPHMS @LeoNaressi www.directperformance.com.br @dperformance

Web Analytics TDC 2011

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Web Analytics TDC 2011

Similar to Web Analytics TDC 2011 (20)

More from dp6

More from dp6 (8)

Recently uploaded

Recently uploaded (19)

Web Analytics TDC 2011