Web Analytics para Desenvolvedores - TDC 2011

ApresentaçãoFábio Serra@fabiophmsLeonardo Naressi@leonaressiwww.directperformance.com.br2

3AgendaWeb Analytics para todosWeb Analytics em tempo realGoogle 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ém23

Web Analytics já existe há quase 20 anos!FreeOpen-SourceSe você quer começar, aprender, evoluir e investir aos poucos e só no que interessaSe você quer customizar, desenvolver, integrar e contribuir com a comunidade24Conheça mais a história: http://dpc.bi/historia-webanalytics

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

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

Grape (PHP) – Muito, mas muito simples28

BB Clone (PHP) – Enxuto e prático29

Tracewatch (PHP) – Inclui Path Analysis 30

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

Open Web Analytics – Muitocompleto e com Data Warehouse pronto32

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

34Alguns Projetos Web Analytics Open-Source

Web Analytics FREE / FREEMIUM35

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

Stat Counter – Free até 250.000 pageviews/mês37

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

Yahoo! Web Analytics - Muitopoderoso39

Google Analytics – Sinônimo de Web Analytics40

41Ferramentas 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-realFreeYahoo! Web Analytics - http://web.analytics.yahoo.com/W3 Counter - http://www.w3counter.com/StatCounter - http://statcounter.com/Clicky - http://getclicky.com/Open-sourcePiwik- http://piwik.org/OWA - http://www.openwebanalytics.com/SlimStat - http://slimstat.net/46Mas, todasessasferramentasaplicam o mesmoconceitotradicional de Web Analytics, com somenteatualizaçãomaisfrequente

Woopra – Utilizaaplicativo desktop paravisualizaçãointerativa48

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

MixPanel – Baseadoemeventos e suportaimplementaçãoemaplicativos mobile50

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

Hummingbird – Open-source promissor52

ChartBeat – visualizaçãointuitiva e interface para iPhone53

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

Hummingbird – dissecando um projeto à frente do nosso tempo55

Web Analytics real-time é um desafiotecnológico56

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

Saibamaissobre o Hummingbirdhttps://github.com/mnutt/hummingbird58

AgendaWeb Analytics para todosWeb Analytics em tempo realGoogle Analytics para desenvolvedoresCookies, Javascript, imagens 1pxMitos e lendasEstrutura de contasConfigurações necessárias e boas práticasCustomizações avançadasWeb, mobile, apps, FlashValidação de tagsDebug Javascript com Google Analytics60

Como funcionauma tag Google Analytics61Tag JS

Versões da tag Google AnalyticsGoogle continuamente atualiza seu código de acompanhamento, então mantenha seu código atualizadoDica, 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 Analytics64

Mito: O uso do Google Analytics acelera a indexação do site pelo crawler e ajuda no SEOMuitos webmasters acreditam que a instalação do Google Analytics em seu site melhora a indexação das suas páginas pelo motor do GoogleEmbora 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 lentoUma 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 empresasOs 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/N7DKS67

Estrutura de Contas e Perfis no Google Analytics69

Boas práticas no Uso de Contas e PerfisAo lançar um novo site, em um novo endereçoCriar uma nova conta Google AnalyticsIsso isola os dados dos outros usuáriosPosso usar 2 contas para medir o mesmo site?Se não for feita corretamente, pode prejudicar a medição nas 2 contasSe o interesse é compartilhar o relatório com outra pessoa, basta adicioná-lo como usuário da mesma contaSe houver real necessidade de 2 contas no mesmo site, será necessário aplicar as mesmas configurações de cookies para total compatibilidadeQuero configurar em detalhes um perfil ou fazer testesCrie novos perfis utilizando a mesma conta, mas mantenha o perfil original intactoO 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 Analytics72

Implementação padrão da tag GA“Wizard” para geração de tags básicas ou avançadasBasta inserir a tag nas páginas monitoradas e seguir as instruções75

Pronto! Sua conta foi criada!76

Metas: Passou por determinada páginaFunil de conversão77

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

Filtros podem para tratar, adaptar ou selecionar os dados tornando as análises mais precisasIncluir ou excluir Tráfego dos DomíniosDeve 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 IPMuito ú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óriosIsolar 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úsculasConverte todo o conteúdo do campo em caracteres maiúsculos ou minúsculos. Esses filtros afetam apenas as letras.Pesquisar e substituirEsse é um filtro que pode ser utilizado para pesquisar um padrãodentro de um campo e substituir esse padrão por uma forma alternativa.AvançadoEsse 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

AgendaWeb Analytics para todosWeb Analytics em tempo realGoogle Analytics para desenvolvedoresCookies, Javascript, imagens 1pxMitos e lendasEstrutura de contasConfigurações necessárias e boas práticasCustomizações avançadasWeb, Mobile, Apps, FlashValidação de tagsDebug Javascript com Google Analytics80

Monitoramento de download e links externosPor 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 TrackerRecentemente o Google lançou duas novas funcionalidades em sua biblioteca javascript:Site Speed - http://goo.gl/a64KjSocial Plugin - http://goo.gl/u9ApOO 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 EcommerceO 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çãoAqui 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çãoRecebe 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 AnalyticsConfirma 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 AnalyticsonSteroidsProjeto Open-Source de biblioteca para implementação de Google Analyticshttps://bitbucket.org/dpc/gas85

Web Analytics para aplicativos MobileAtualmente 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 AndroidO 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 iOSDa forma que para os aplicados Android, também está disponível um SDK específico para o iOS da AppleTrecho 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];1011 if(![[GANTrackersharedTracker]trackPageview:@"/app_entry_point"12 withError:&error]){13 // Handleerrorhere14 }1516 [window_ makeKeyAndVisible];17}Download e manual: http://goo.gl/39aMc

Google Analytics para Adobe Flash: ActionScript 3No Flash:E executar uma das funções criadas para cada ação que deseja-se monitorarNo 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 FlashO 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 HTMLum aplicativo Flex independente ou um site somente em Flash hospedado em uma página HTMLum jogo ou programa Flex/Flash distribuído em que o desenvolvedor não controla onde o widget será posicionadoDownload e manual: http://code.google.com/p/gaforflash/

Todos os NavegadoresFiddler (Win)http://www.fiddler2.com/fiddler2/Charles (Win, Mac, Linux) (Pago)http://www.charlesproxy.com/ChromeGoogle AnalyticsTrackingCodeDebuggerhttp://goo.gl/KrvcXFirefoxHttpfoxhttps://addons.mozilla.org/pt-br/firefox/addon/httpfox/Firebughttps://addons.mozilla.org/pt-br/firefox/addon/firebug/Ferramentas para validação de tagsExtensão oficial GoogleMais informações sobre Ferramentas de depuração: http://goo.gl/FVdDW93

Validando tags no Firefox com o httpfoxTecla atalho para iniciar o plugin:Alt+F2Botão ‘Start’!Filtrar por:‘utm’Selecionar a aba:Query StringMais informações sobre os parâmetros do GIF solicitação: http://goo.gl/0iFkG94

Técnicas e ferramentas para testes e debugs de erros em JavascriptFirebug + Fireunithttp://fireunit.orgTestSwarm http://github.com/jquery/testswarmjQuery + QUnithttp://docs.jquery.com/QUnitJsUnithttp://www.jsunit.netjs-test-driverhttp://code.google.com/p/js-test-driver 96

Mas nem tudo pode ser testado... Todos os navegadores e suas infinidades de versõesDiversos dispositivos, como celulares e tabletsVelocidade da conexão e impactos nos timeoutsRegras de firewall ou proxyNã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 AnalyticsVocê 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çãoPágina em que ocorremVersão do navegadorSistema OperacionalCaminho da navegaçãoMunido de todas esses dados fica muito fácil entender e solucionar os erros.98

Log de Erros: CategoriasExemplos: TypeError, URIErro, ReferenceError99

Log de Erros: MensagemExemplos: jQuery notavailable, var undefined100

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

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 globalPara 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 - LivrosLivroWeb Analytics 2.0Livro Google Analyticshttp://dpc.bi/livro-wa-20http://dpc.bi/livro-gaLivroOtimização de Conversãohttp://dpc.bi/livro-otimizacao

Maissobre o tema – blogs, fóruns e podcastsGrupo de discussãoWebanalytics_Brasilhttp://dpc.bi/webanalytics_brasilBlog Direct Performancehttp://dpc.bi/blog-performanceSearchCast Analyticshttp://dpc.bi/searchcast-analytics

@FabioPHMS@LeoNaressiwww.directperformance.com.br@dperformance

Web Analytics para Desenvolvedores - TDC 2011

Web Analytics para Desenvolvedores - TDC 2011

Mais conteúdo relacionado

Mais procurados

Semelhante a Web Analytics para Desenvolvedores - TDC 2011

Mais de dp6

Web Analytics para Desenvolvedores - TDC 2011