Web Analytics para Desenvolvedores - TDC 2011

1. Web Analytics
TDC 2011

2. Apresentao
Fbio Serra
@fabiophms
Leonardo Naressi
@leonaressi
www.directperformance.com.br
2
3. 3
Agenda
Web Analytics para todos
Web Analytics em tempo real
Google Analytics para desenvolvedores
4. Porque Web Analytics?
4
5. 6. 7. 8. 9. 10. 11. 12. O quetudoisso tem emcomum?
13. 14. O projetista
+
O usurio
15. Como seuprojetotrata o usurio?
16. E como o usurioesttratandoseuprojeto?
17. E issopodemelhorar?
18. Opiniotodomundo tem uma
19. Sabendoqualparafusoapertarficamaisfcil
20. Semmtricas, as decisesficamdifceis
21. Mtricassoessenciaisparagesto e manuteno
22. E paraintelignciacompetitiva
23. @marcogomes : Programargrtis",Web analytics tambm
23
24. Web Analytics j existe h quase 20 anos!
Free
Open-Source
Se voc quer comear, aprender, evoluir e investir aos poucos e s no que interessa
Se voc quer customizar, desenvolver, integrar e contribuir com a comunidade
24
Conhea mais a histria: http://dpc.bi/historia-webanalytics
25. Web Analytics Open-Source
25
26. AW Stats Retr mas bemcompleto Analiza logs de Webserver, FTP e E-mail
26
27. W3 Perl Muitorpido- Analiza logs de Webserver, FTP, E-mail, Proxy, Tags e Contadores
27
28. Grape (PHP) Muito, mas muito simples
28
29. BB Clone (PHP) Enxuto e prtico
29
30. Tracewatch (PHP) Inclui Path Analysis
30
31. Slim Stat Simples, fcil e com interface para iPhone
31
32. Open Web Analytics Muitocompleto e com Data Warehouse pronto
32
33. Piwik - Open-source ativoe de altssimaqualidade
33
AlgumasempresasjoferecemPiwik hosting paraquemnoquerter no seuprprioservidor
34. 34
Alguns Projetos Web Analytics Open-Source
35. Web Analytics FREE / FREEMIUM
35
36. W3 Counter Free at 5.000 pageviews/dia e com mais de 30 relatrios
36
37. Stat Counter Free at 250.000 pageviews/ms
37
38. 38
Clicky Free at 3.000 pageviews/dia e com monitoramento de redessociais e feeds
39. Yahoo! Web Analytics - Muitopoderoso
39
40. Google Analytics Sinnimo de Web Analytics
40
41. 41
Ferramentas Web AnalyticsFree / Freemium
42. 42
Agenda
43. 43
44. Pausaparareflexo
45. Vocprecisa de dados em tempo-real?
Vocagirem tempo-real?
Ousfaracompanhamentosdirios, semanais, mensais?
46. Algumasferramentas Web Analytics jatualizam 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 somenteatualizaomaisfrequente
47. Web Analytics REAL-TIME
47
48. Woopra Utilizaaplicativo desktop paravisualizaointerativa
48
49. Pclicks Real-time, Mapa de calor e Anlise de links
49
50. MixPanel Baseadoemeventos e suportaimplementaoemaplicativos mobile
50
51. Reinvigorate Real-Time, Mapa de Calor e aplicativo desktop paraalertas
51
52. Hummingbird Open-source promissor
52
53. ChartBeat visualizaointuitiva e interface para iPhone
53
54. 54
Projetos e ferramentas especializadas em medio real-time
55. Hummingbird dissecando um projeto frente do nosso tempo
55
56. Web Analytics real-time um desafiotecnolgico
56
57. 57
O Hummingbird resolveu cada pea desse quebra-cabea com recursos quentes
58. Saibamaissobre o Hummingbird
https://github.com/mnutt/hummingbird
58
59. 59
Agenda
60. Agenda
Cookies, Javascript, imagens 1px
Mitos e lendas
Estrutura de contas
Configuraes necessrias e boas prticas
Customizaes avanadas
Web, mobile, apps, Flash
Validao de tags
Debug Javascript com Google Analytics
60
61. Como funcionauma tag Google Analytics
61
Tag JS
62. Verses da tag Google Analytics
Google continuamente atualiza seu cdigo de acompanhamento, ento mantenha seu cdigo atualizado
Dica, mantenha sua tag num arquivo fcil de incluso (includes, templates, etc) e atualize a cada nova verso para aproveitar os novos recursos
63. Agenda
Mitos e lendas
Estrutura de contas
Validao de tags
63
64. Mitos e Lendas sobre o Google Analytics
64
65. Mito: O uso do Google Analytics acelera a indexao do site pelo crawler e ajuda no SEO
Muitos webmasters acreditam que a instalao do Google Analytics em seu site melhora a indexao das suas pginas pelo motor do Google
Embora sabemos que os insights fornecidos pelo Google Analytics so de ajuda inestimveis para melhora do site, a ferramenta em si no tem absolutamente nenhum impacto direto sobre os rankings.
65
66. MITO: A tag do Google Analytics torna o carregamento das pginas mais lento
Uma grande preocupao da equipe do Google Analytics evitar ao mximo que a incluso da sua tagatrapalhe o carregamento ou a execuo das pginas.
Uma prova ltima grande atualizao de sua biblioteca para torna-l 100% assncrona.
Mas que isso representa?
Desde a sua chamada nas pginas, passando por sua configurao a execuo, tudo independe do carregamento da pgina. Desta forma, nenhum elemento da pgina precisa esperar a tag ser carregada e executada para rodar.
E como isso possvel?
O truque est na forma como os mtodos so chamados. A sintaxe assncrona apenas um vetor sendo alimentado por Strings (que so os nome das funes). Exemplo:
Alimentar um vetor muito rpido para o navegador, que pode depois, continuar executando os cdigos seguintes da pgina.
Em segundo plano, a tag varre os elementos deste vetor e executa cada funo, 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 servio protegem o usurio, 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
Mitos e lendas
Estrutura de contas
Validao de tags
68
69. Estrutura de Contas e Perfis no Google Analytics
69
70. Boas prticas no Uso de Contas e Perfis
Ao lanar um novo site, em um novo endereo
Criar uma nova conta Google Analytics
Isso isola os dados dos outros usurios
Posso usar 2 contas para medir o mesmo site?
Se no for feita corretamente, pode prejudicar a medio nas 2 contas
Se o interesse compartilhar o relatrio com outra pessoa, basta adicion-lo como usurio da mesma conta
Se houver real necessidade de 2 contas no mesmo site, ser necessrio aplicar as mesmas configuraes 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 no volta atrs em anlises, ento, caso algum filtro ou configurao d errado, com seu perfil original intacto possvel ainda fazer algumas anlises
71. Agenda
Mitos e lendas
Estrutura de contas
Validao de tags
71
72. Criao da Conta Google Analytics
72
73
74
75. Implementao padro da tag GA
Wizard para gerao de tags bsicas ou avanadas
Basta inserir a tag nas pginas monitoradas e seguir as instrues
75
76. Pronto! Sua conta foi criada!
76
77. Metas: Passou por determinada pgina
Funil de converso
77
78. Metas de Engajamento
Quanto tempo passou no site?
Quantas pginas navegou?
78
79. Filtros podem para tratar, adaptar ou selecionar os dados tornando as anlises mais precisas
Incluir ou excluir Trfego dos Domnios
Deve ser aplicado quando a mesma conta do GA usada para diferentes site. Com a aplicao deste tipo de filtro, os dados destes sites no sero misturados.
Tambm pode ser usado quando a conta do GA foi usada indevidamente em outro site (cpia de cdigo).
Incluir ou excluir Trfego dos Endereos IP
Muito til para excluir os acessos dos colaboradores da prpria empresa evitando divergncia nos dados.
Da mesma maneira possvel isolar os acessos apenas dos colaboradores ao site para algum estudo especfico.
Incluir ou excluir Trfego para os subdiretrios
Isolar os acessos a apenas uma seo do site. Por exemplo, remover os acessos a rea logada do site que fica no endereo: www.meusite.com.br/arealogada/...
Maisculas/minsculas
Converte todo o contedo do campo em caracteres maisculos ou minsculos. Esses filtros afetam apenas as letras.
Pesquisar e substituir
Esse um filtro que pode ser utilizado para pesquisar um padrodentro de um campo e substituir esse padro poruma forma alternativa.
Avanado
Esse tipo de filtro permite que voc crie um campo a partir de outros campos (um ou dois). O mecanismo de filtragem aplicar as expresses dos dois campos "Extrair" nos campos especificados e, em seguida, construir um campo utilizando a expresso "Construtor".
79
80. Agenda
Mitos e lendas
Estrutura de contas
Web, Mobile, Apps, Flash
Validao de tags
80
81. Monitoramento de download e links externos
Por padro o clique em links que levam para outros sites (externos) ou que para o download de algum arquivo, no so monitorados pela tag padro do Google Analytics.
Mas usando a biblioteca jQuery muito simples acompanhar o uso desses links. Basta adicionar o este trecho javascript em uma pgina que j possua a jQuery e a tag do GA:
1 jQuery("a").live("mousedown",(function(){ 2 if(typeofthis.hostname==='string'){ 3 if(this.hostname.toLowerCase()!==document.location.hostname.toLowerCase()){ 4 window._gaq.push(['_trackEvent', 5 'LinkExterno', 6 this.href, 7 document.location.pathname8 ]); 9 } 10 if(this.pathname.indexOf(".zip")||this.pathname.indexOf(".pdf")){ 11 window._gaq.push(['_trackEvent', 12 'Download', 13 this.href, 14 document.location.pathname15 ]); 16 } 17 } 18 }));
82. Tempo de carregamento e Social Tracker
Recentemente o Google lanou 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 pginas e exibe essa informao em um relatrio especfico na ferramenta.
Para habilitar esse recurso simplesmente adicione aps a tag padro em todas as pginas a seguinte linha javascript:
O Social Plugin uma funo especfica para monitorar o uso do compartilhamento das suas pginas nas redes sociais. Como o boto Like do Facebook ou o +1 do Google.
Sua instalao deve ser feita para cada link, fornecendo o nome da rede e ao executada. Segue alguns exemplos:
Neste pgina possvel analisar a integrao do Social Plugin com as chamadas assncronas e sncronas 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 vrios relatrios especficospara o monitoramento das vendas de sites de comrcio eletrnico.
So necessrios trs mtodos para o acompanhamento das transaes de comrcio eletrnico em seu site
Estes devem ser chamados nessa ordem e apenas na pgina de confirmao da compra:
_addTrans() - criao da transao
Aqui fornecemos todas as informaes relacionadas a compra, como o cdigo de pedido, valor total do pedido e do frete.
_addItem() - adio de itens transao
Recebe as informaes sobre cada produto, como preo, descrio, categoria e quantidade.
O item associado a transao por meio do campoorderId.
_trackTrans() - envio da transao para o Google Analytics
Confirma uma compra e todos os dados que foram fornecido anteriormente, finalizando essa transao.
Documentao oficial: http://goo.gl/0zuwE
84. Recibo de compra de roupas - ClothingAcme var _gaq= _gaq||[]; _gaq.push(['_setAccount','UA-XXXXX-X']); _gaq.push(['_trackPageview']);
_gaq.push(['_addTrans', '1234', // compra ID - obrigatrio 'Acme Clothing', // nome da loja '11.99', // total - obrigatrio '1.29', // taxa '5' // frete ]); _gaq.push(['_addItem', '1234', // compra ID - obrigatrio 'DD44', // cdigo do produto - obrigatrio 'T-Shirt', // nome 'Green Medium', // categoria '11.99', // preo - obrigatrio '1' // quantidade - obrigatrio ]);
_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); })();
85. GAS! = Google AnalyticsonSteroids
Projeto Open-Source de biblioteca para implementao de Google Analytics
https://bitbucket.org/dpc/gas
85
86. Agenda
Mitos e lendas
Estrutura de contas
Validao de tags
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/
Porm o Google Analytics tambm possui bibliotecas especficas para as principais plataformas mveis, como Android e iOS.
Usando o GA voc pode concentrar em uma nica ferramenta os relatrios 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 mveis que podem ser acompanhada nos mesmo relatrios convencionais do GA.
Voc pode usar este SDK para calcular volume de visitas, durao da sesso, a taxa de rejeio e nmero 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, tambm est disponvel um SDK especfico 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 funes criadas para cada ao que deseja-se monitorar
No Javascript:
1 importflash.external.ExternalInterface; 2 3 publicfunctiontrack_pageview(uri:String){ 4 ExternalInterface.call("track_pageview",uri); 5 return; 6 } 7 8 publicfunctiontrack_event(category:String,action:String,label:String,value:String){ 9 ExternalInterface.call("track_event",category,action,label,value); 10 return; 11 }
1 functiontrack_pageview(uri){ 2 _gaq.push(["_trackPageview",uri]); 3 } 4 5 functiontrack_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 prpria Adobe e contm todos os recursos do cdigojavascript presente no ga.js.
Este componente um objeto compilado para ActionScript 3, que torna a implementao do Google Analytics intuitiva no Flash e em ambientes de desenvolvimento Flex.
Ele til para vrios objetivos de acompanhamento comuns em Flash, como:
um widget em Flash incorporado a uma pgina HTML
um aplicativo Flex independente ou um site somente em Flash hospedado em uma pgina HTML
um jogo ou programa Flex/Flash distribudo em que o desenvolvedor no controla onde o widget ser posicionado
Download e manual: http://code.google.com/p/gaforflash/
92. Agenda
Mitos e lendas
Estrutura de contas
Validao de tags
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 validao de tags
Extenso oficial Google
Mais informaes sobre Ferramentas de depurao: http://goo.gl/FVdDW
93
94. Validando tags no Firefox com o httpfox
Tecla atalho para iniciar o plugin:
Alt+F2
Boto Start!
Filtrar por:
utm
Selecionar a aba:
Query String
Mais informaes sobre os parmetros do GIF solicitao: http://goo.gl/0iFkG
94
95. Agenda
Mitos e lendas
Estrutura de contas
Validao de tags
95
96. Tcnicas e ferramentasparatestes e debugsde 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 suasinfinidadesde verses
Diversos dispositivos, como celulares e tablets
Velocidade da conexo e impactos nos timeouts
Regras de firewall ou proxy
No seria legal uma forma de acompanhar os erros de Javascript gerados pelos usurios da mesma forma, por exemplo, que analisando um log de erros do Apache?
97
98. Log de errosJavascript pelo Google Analytics
Voc pode utilizar o relatrio de EVENTOS do Google Analytics para fazer um log de erros Javascript que aconteam com seus usurios.
Alm do erros, voc tambm ter vrias informaes relacionadas como:
Detalhes da exceo
Pgina em que ocorrem
Verso do navegador
Sistema Operacional
Caminho da navegao
Munido de todas esses dados fica muito fcil 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
101. Log de Erros: Pginas
101
102. Cdigo principal
1
Fonte: http://www.directperformance.com.br/javascript-debug-simples-com-google-analytics
102
103. Exemplo de implementao
1 2021
103
104. Implementao para captura de erros global
Para alguns navegadores, podemos simplificar e aplicar monitoramento de erro para toda a pgina:
1
104
105. Agenda
Para saber mais
105
106. Maissobre o tema - Livros
LivroWeb Analytics 2.0
Livro Google Analytics
http://dpc.bi/livro-wa-20
http://dpc.bi/livro-ga
Livro
Otimizao de Converso
http://dpc.bi/livro-otimizacao
107. Maissobre o tema blogs, fruns e podcasts
Grupo de discusso
Webanalytics_Brasil
http://dpc.bi/webanalytics_brasil
Blog Direct Performance
http://dpc.bi/blog-performance
SearchCast Analytics
http://dpc.bi/searchcast-analytics
108. @FabioPHMS
@LeoNaressi
www.directperformance.com.br
@dperformance

Business

Web Analytics para Desenvolvedores - TDC 2011