Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Analytics<br />TDC 2011<br />
Apresentação<br />Fábio Serra<br />@fabiophms<br />Leonardo Naressi<br />@leonaressi<br />www.directperformance.com.br<br ...
3<br />Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />
Porque Web Analytics?<br />4<br />
O quetudoisso tem emcomum?<br />
O projetista<br />+<br />O usuário<br />
Como seuprojetotrata o usuário?<br />
E como o usuárioestátratandoseuprojeto?<br />
E issopodemelhorar?<br />
Opiniãotodomundo tem uma<br />
Sabendoqualparafusoapertarficamaisfácil…<br />
Semmétricas, as decisõesficamdifíceis…<br />
Métricassãoessenciaisparagestão e manutenção<br />
E parainteligênciacompetitiva<br />
”@marcogomes : Programarégrátis",Web analytics também<br />23<br />
Web Analytics já existe há quase 20 anos!<br />Free<br />Open-Source<br />Se você quer começar, aprender, evoluir e invest...
Web Analytics Open-Source<br />25<br />
AW Stats – “Retrô” mas bemcompleto – Analiza logs de Webserver, FTP e E-mail<br />26<br />
W3 Perl – Muitorápido- Analiza logs de Webserver, FTP, E-mail, Proxy, Tags e Contadores<br />27<br />
Grape (PHP) – Muito, mas muito simples<br />28<br />
BB Clone (PHP) – Enxuto e prático<br />29<br />
Tracewatch (PHP) – Inclui Path Analysis <br />30<br />
Slim Stat – Simples, fácil e com interface para iPhone<br />31<br />
Open Web Analytics – Muitocompleto e com Data Warehouse pronto<br />32<br />
Piwik - Open-source ativoe de altíssimaqualidade<br />33<br />AlgumasempresasjáoferecemPiwik hosting paraquemnãoquerter no...
34<br />Alguns Projetos Web Analytics Open-Source<br />
Web Analytics FREE / FREEMIUM<br />35<br />
W3 Counter – Free até 5.000 pageviews/dia e com mais de 30 relatórios<br />36<br />
Stat Counter – Free até 250.000 pageviews/mês<br />37<br />
38<br />Clicky – Free até 3.000 pageviews/dia e com monitoramento de redessociais e feeds<br />
Yahoo! Web Analytics - Muitopoderoso<br />39<br />
Google Analytics – Sinônimo de Web Analytics<br />40<br />
41<br />Ferramentas Web AnalyticsFree / Freemium<br />
42<br />Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<b...
43<br />
Pausaparareflexão<br />
Vocêprecisa de dados em tempo-real?<br />Vocêagiráem tempo-real?<br />Ousófaráacompanhamentosdiários, semanais, mensais?<b...
Algumasferramentas Web Analytics jáatualizam dados em tempo-real<br />Free<br />Yahoo! Web Analytics - http://web.analytic...
Web Analytics REAL-TIME<br />47<br />
Woopra – Utilizaaplicativo desktop paravisualizaçãointerativa<br />48<br />
Pclicks – Real-time, Mapa de calor e Análise de links<br />49<br />
MixPanel – Baseadoemeventos e suportaimplementaçãoemaplicativos mobile<br />50<br />
Reinvigorate – Real-Time, Mapa de Calor e aplicativo desktop paraalertas<br />51<br />
Hummingbird – Open-source promissor<br />52<br />
ChartBeat – visualizaçãointuitiva e interface para iPhone<br />53<br />
54<br />Projetos e ferramentas especializadas em medição real-time<br />
Hummingbird – dissecando um projeto à frente do nosso tempo<br />55<br />
Web Analytics real-time é um desafiotecnológico<br />56<br />
57<br />O Hummingbird resolveu cada peça desse quebra-cabeça com recursos “quentes”<br />
Saibamaissobre o Hummingbird<br />https://github.com/mnutt/hummingbird<br />58<br />
59<br />Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<b...
Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cook...
Como funcionauma tag Google Analytics<br />61<br />Tag JS<br />
Versões da tag Google Analytics<br />Google continuamente atualiza seu código de acompanhamento, então mantenha seu código...
Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cook...
Mitos e Lendas sobre o Google Analytics<br />64<br />
Mito: O uso do Google Analytics acelera a indexação do site pelo crawler e ajuda no SEO<br />Muitos webmasters acreditam q...
MITO: A tag do Google Analytics torna o carregamento das páginas mais lento<br />Uma grande preocupação da equipe do Googl...
MITO: O Google compartilha ou vende os dados do Analytics com outras empresas<br />Os termos do serviço protegem o usuário...
Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cook...
Estrutura de Contas e Perfis no Google Analytics<br />69<br />
Boas práticas no Uso de Contas e Perfis<br />Ao lançar um novo site, em um novo endereço<br />Criar uma nova conta Google ...
Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cook...
Criação da Conta Google Analytics<br />72<br />
Criação da Conta Google Analytics<br />73<br />
Criação da Conta Google Analytics<br />74<br />
Implementação padrão da tag GA<br />“Wizard” para geração de tags básicas ou avançadas<br />Basta inserir a tag nas página...
Pronto! Sua conta foi criada!<br />76<br />
Metas: Passou por determinada página<br />Funil de conversão<br />77<br />
Metas de Engajamento<br />Quanto tempo passou no site?<br />Quantas páginas navegou?<br />78<br />
Filtros podem para tratar, adaptar ou selecionar os dados tornando as análises mais precisas<br />Incluir ou excluir Tráfe...
Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cook...
Monitoramento de download e links externos<br />Por padrão o clique em links que levam para outros sites (externos) ou que...
Tempo de carregamento e Social Tracker<br />Recentemente o Google lançou duas novas funcionalidades em sua biblioteca java...
Google Analytics e Ecommerce<br />O Google Analytics possui um vários relatórios específicos  para o monitoramento das ven...
<head><title>Recibo de compra de roupas - ClothingAcme</title><scripttype="text/javascript">  var _gaq= _gaq||[];  _gaq.pu...
GAS! = Google AnalyticsonSteroids<br />Projeto Open-Source de biblioteca para implementação de Google Analytics<br />https...
Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cook...
Web Analytics para aplicativos Mobile<br />Atualmente já existe uma gama de ferramentas para monitoramentos de Apps para c...
Google Analytics para Android<br />O Google Analytics SDK para aplicativos Android fornecer uma interface para controle da...
Google Analytics para iOS<br />Da forma que para os aplicados Android, também está disponível um SDK específico para o iOS...
Google Analytics para Adobe Flash: ActionScript 3<br />No Flash:<br />E executar uma das funções criadas para cada ação qu...
Google Analytics para Adobe Flash: Ga for Flash<br />O gaforflash foi desenvolvido pela própria Adobe e contém todos os re...
Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cook...
Todos os Navegadores<br />Fiddler (Win)<br />http://www.fiddler2.com/fiddler2/<br />Charles (Win, Mac, Linux) (Pago)<br />...
Validando tags no Firefox com o httpfox<br />Tecla atalho para iniciar o plugin:<br />Alt+F2<br />Botão ‘Start’!<br />Filt...
Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cook...
Técnicas e ferramentas para testes e debugs de erros em Javascript<br />Firebug + Fireunit<br />http://fireunit.org<br />T...
Mas nem tudo pode ser testado... <br />Todos os navegadores e suas infinidades de versões<br />Diversos dispositivos, como...
Log de erros  Javascript pelo Google Analytics<br />Você pode utilizar o relatório de EVENTOS do Google Analytics para faz...
Log de Erros: Categorias<br />Exemplos: TypeError, URIErro, ReferenceError<br />99<br />
Log de Erros: Mensagem<br />Exemplos: jQuery notavailable, var undefined<br />100<br />
Log de Erros: Páginas<br />101<br />
Código principal<br />  1 <script type="text/javascript"><br />  2 <br />  3 functiontrack_error_event (exception) {<br />...
Exemplo de implementação<br /> 1 <script type="text/javascript">2var _gaq = _gaq || [];3 _gaq.push(4     ['_setAccount','U...
Implementação para captura de erros global<br />Para alguns navegadores, podemos simplificar e aplicar monitoramento de er...
Agenda<br />Para saber mais<br />105<br />
Maissobre o tema - Livros<br />LivroWeb Analytics 2.0<br />Livro Google Analytics<br />http://dpc.bi/livro-wa-20<br />http...
Maissobre o tema – blogs, fóruns e podcasts<br />Grupo de discussão<br />Webanalytics_Brasil<br />http://dpc.bi/webanalyti...
@FabioPHMS<br />@LeoNaressi<br />www.directperformance.com.br<br />@dperformance<br />
Web Analytics para Desenvolvedores - TDC 2011
Upcoming SlideShare
Loading in …5
×

Web Analytics para Desenvolvedores - TDC 2011

4,821 views

Published on

Apresentação de @leonaressi e Fábio Serra (@fabiophms) na trilha web do TDC 2011

Web Analytics para Desenvolvedores - TDC 2011

  1. 1. Web Analytics<br />TDC 2011<br />
  2. 2. Apresentação<br />Fábio Serra<br />@fabiophms<br />Leonardo Naressi<br />@leonaressi<br />www.directperformance.com.br<br />2<br />
  3. 3. 3<br />Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />
  4. 4. Porque Web Analytics?<br />4<br />
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12. O quetudoisso tem emcomum?<br />
  13. 13.
  14. 14. O projetista<br />+<br />O usuário<br />
  15. 15. Como seuprojetotrata o usuário?<br />
  16. 16. E como o usuárioestátratandoseuprojeto?<br />
  17. 17. E issopodemelhorar?<br />
  18. 18. Opiniãotodomundo tem uma<br />
  19. 19. Sabendoqualparafusoapertarficamaisfácil…<br />
  20. 20. Semmétricas, as decisõesficamdifíceis…<br />
  21. 21. Métricassãoessenciaisparagestão e manutenção<br />
  22. 22. E parainteligênciacompetitiva<br />
  23. 23. ”@marcogomes : Programarégrátis",Web analytics também<br />23<br />
  24. 24. Web Analytics já existe há quase 20 anos!<br />Free<br />Open-Source<br />Se você quer começar, aprender, evoluir e investir aos poucos e só no que interessa<br />Se você quer customizar, desenvolver, integrar e contribuir com a comunidade<br />24<br />Conheça mais a história: http://dpc.bi/historia-webanalytics<br />
  25. 25. Web Analytics Open-Source<br />25<br />
  26. 26. AW Stats – “Retrô” mas bemcompleto – Analiza logs de Webserver, FTP e E-mail<br />26<br />
  27. 27. W3 Perl – Muitorápido- Analiza logs de Webserver, FTP, E-mail, Proxy, Tags e Contadores<br />27<br />
  28. 28. Grape (PHP) – Muito, mas muito simples<br />28<br />
  29. 29. BB Clone (PHP) – Enxuto e prático<br />29<br />
  30. 30. Tracewatch (PHP) – Inclui Path Analysis <br />30<br />
  31. 31. Slim Stat – Simples, fácil e com interface para iPhone<br />31<br />
  32. 32. Open Web Analytics – Muitocompleto e com Data Warehouse pronto<br />32<br />
  33. 33. Piwik - Open-source ativoe de altíssimaqualidade<br />33<br />AlgumasempresasjáoferecemPiwik hosting paraquemnãoquerter no seupróprioservidor<br />
  34. 34. 34<br />Alguns Projetos Web Analytics Open-Source<br />
  35. 35. Web Analytics FREE / FREEMIUM<br />35<br />
  36. 36. W3 Counter – Free até 5.000 pageviews/dia e com mais de 30 relatórios<br />36<br />
  37. 37. Stat Counter – Free até 250.000 pageviews/mês<br />37<br />
  38. 38. 38<br />Clicky – Free até 3.000 pageviews/dia e com monitoramento de redessociais e feeds<br />
  39. 39. Yahoo! Web Analytics - Muitopoderoso<br />39<br />
  40. 40. Google Analytics – Sinônimo de Web Analytics<br />40<br />
  41. 41. 41<br />Ferramentas Web AnalyticsFree / Freemium<br />
  42. 42. 42<br />Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />
  43. 43. 43<br />
  44. 44. Pausaparareflexão<br />
  45. 45. Vocêprecisa de dados em tempo-real?<br />Vocêagiráem tempo-real?<br />Ousófaráacompanhamentosdiários, semanais, mensais?<br />
  46. 46. Algumasferramentas Web Analytics jáatualizam dados em tempo-real<br />Free<br />Yahoo! Web Analytics - http://web.analytics.yahoo.com/<br />W3 Counter - http://www.w3counter.com/<br />StatCounter - http://statcounter.com/<br />Clicky - http://getclicky.com/<br />Open-source<br />Piwik- http://piwik.org/<br />OWA - http://www.openwebanalytics.com/<br />SlimStat - http://slimstat.net/<br />46<br />Mas, todasessasferramentasaplicam o mesmoconceitotradicional de Web Analytics, com somenteatualizaçãomaisfrequente<br />
  47. 47. Web Analytics REAL-TIME<br />47<br />
  48. 48. Woopra – Utilizaaplicativo desktop paravisualizaçãointerativa<br />48<br />
  49. 49. Pclicks – Real-time, Mapa de calor e Análise de links<br />49<br />
  50. 50. MixPanel – Baseadoemeventos e suportaimplementaçãoemaplicativos mobile<br />50<br />
  51. 51. Reinvigorate – Real-Time, Mapa de Calor e aplicativo desktop paraalertas<br />51<br />
  52. 52. Hummingbird – Open-source promissor<br />52<br />
  53. 53. ChartBeat – visualizaçãointuitiva e interface para iPhone<br />53<br />
  54. 54. 54<br />Projetos e ferramentas especializadas em medição real-time<br />
  55. 55. Hummingbird – dissecando um projeto à frente do nosso tempo<br />55<br />
  56. 56. Web Analytics real-time é um desafiotecnológico<br />56<br />
  57. 57. 57<br />O Hummingbird resolveu cada peça desse quebra-cabeça com recursos “quentes”<br />
  58. 58. Saibamaissobre o Hummingbird<br />https://github.com/mnutt/hummingbird<br />58<br />
  59. 59. 59<br />Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />
  60. 60. Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cookies, Javascript, imagens 1px<br />Mitos e lendas<br />Estrutura de contas<br />Configurações necessárias e boas práticas<br />Customizações avançadas<br />Web, mobile, apps, Flash<br />Validação de tags<br />Debug Javascript com Google Analytics<br />60<br />
  61. 61. Como funcionauma tag Google Analytics<br />61<br />Tag JS<br />
  62. 62. Versões da tag Google Analytics<br />Google continuamente atualiza seu código de acompanhamento, então mantenha seu código atualizado<br />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<br />
  63. 63. Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cookies, Javascript, imagens 1px<br />Mitos e lendas<br />Estrutura de contas<br />Configurações necessárias e boas práticas<br />Customizações avançadas<br />Web, mobile, apps, Flash<br />Validação de tags<br />Debug Javascript com Google Analytics<br />63<br />
  64. 64. Mitos e Lendas sobre o Google Analytics<br />64<br />
  65. 65. Mito: O uso do Google Analytics acelera a indexação do site pelo crawler e ajuda no SEO<br />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<br />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.<br />65<br />
  66. 66. MITO: A tag do Google Analytics torna o carregamento das páginas mais lento<br />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.<br />Uma prova é última grande atualização de sua biblioteca para torna-lá 100% assíncrona. <br />Mas que isso representa?<br />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.<br />E como isso é possível?<br />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:<br />Alimentar um vetor é muito rápido para o navegador, que pode depois, continuar executando os códigos seguintes da página.<br />Em segundo plano, a tag varre os elementos deste vetor e executa cada função, quais foram passadas apenas seus nomes.<br /> 1var _gaq= _gaq||[]; 2_gaq.push(['_setAccount','UA-XXXXX-X']); 3_gaq.push(['_trackPageview']);<br />66<br />
  67. 67. MITO: O Google compartilha ou vende os dados do Analytics com outras empresas<br />Os termos do serviço protegem o usuário, que pode escolher como e quando compartilhar dados com o Google:<br />http://www.google.com/analytics/pt-BR/tos.htmlhttp://goo.gl/N7DKS<br />67<br />
  68. 68. Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cookies, Javascript, imagens 1px<br />Mitos e lendas<br />Estrutura de contas<br />Configurações necessárias e boas práticas<br />Customizações avançadas<br />Web, mobile, apps, Flash<br />Validação de tags<br />Debug Javascript com Google Analytics<br />68<br />
  69. 69. Estrutura de Contas e Perfis no Google Analytics<br />69<br />
  70. 70. Boas práticas no Uso de Contas e Perfis<br />Ao lançar um novo site, em um novo endereço<br />Criar uma nova conta Google Analytics<br />Isso isola os dados dos outros usuários<br />Posso usar 2 contas para medir o mesmo site?<br />Se não for feita corretamente, pode prejudicar a medição nas 2 contas<br />Se o interesse é compartilhar o relatório com outra pessoa, basta adicioná-lo como usuário da mesma conta<br />Se houver real necessidade de 2 contas no mesmo site, será necessário aplicar as mesmas configurações de cookies para total compatibilidade<br />Quero configurar em detalhes um perfil ou fazer testes<br />Crie novos perfis utilizando a mesma conta, mas mantenha o perfil original intacto<br />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<br />
  71. 71. Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cookies, Javascript, imagens 1px<br />Mitos e lendas<br />Estrutura de contas<br />Configurações necessárias e boas práticas<br />Customizações avançadas<br />Web, mobile, apps, Flash<br />Validação de tags<br />Debug Javascript com Google Analytics<br />71<br />
  72. 72. Criação da Conta Google Analytics<br />72<br />
  73. 73. Criação da Conta Google Analytics<br />73<br />
  74. 74. Criação da Conta Google Analytics<br />74<br />
  75. 75. Implementação padrão da tag GA<br />“Wizard” para geração de tags básicas ou avançadas<br />Basta inserir a tag nas páginas monitoradas e seguir as instruções<br />75<br />
  76. 76. Pronto! Sua conta foi criada!<br />76<br />
  77. 77. Metas: Passou por determinada página<br />Funil de conversão<br />77<br />
  78. 78. Metas de Engajamento<br />Quanto tempo passou no site?<br />Quantas páginas navegou?<br />78<br />
  79. 79. Filtros podem para tratar, adaptar ou selecionar os dados tornando as análises mais precisas<br />Incluir ou excluir Tráfego dos Domínios<br />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.<br />Também pode ser usado quando a conta do GA foi usada indevidamente em outro site (cópia de código).<br />Incluir ou excluir Tráfego dos Endereços IP<br />Muito útil para excluir os acessos dos colaboradores da própria empresa evitando divergência nos dados.<br />Da mesma maneira é possível isolar os acessos apenas dos colaboradores ao site para algum estudo específico.<br />Incluir ou excluir Tráfego para os subdiretórios<br />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/...<br />Maiúsculas/minúsculas<br />Converte todo o conteúdo do campo em caracteres maiúsculos ou minúsculos. Esses filtros afetam apenas as letras.<br />Pesquisar e substituir<br />Esse é um filtro que pode ser utilizado para pesquisar um padrãodentro de um campo e substituir esse padrão por uma forma alternativa.<br />Avançado<br />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".<br />79<br />
  80. 80. Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cookies, Javascript, imagens 1px<br />Mitos e lendas<br />Estrutura de contas<br />Configurações necessárias e boas práticas<br />Customizações avançadas<br />Web, Mobile, Apps, Flash<br />Validação de tags<br />Debug Javascript com Google Analytics<br />80<br />
  81. 81. Monitoramento de download e links externos<br />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.<br />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:<br />  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 })); <br />
  82. 82. Tempo de carregamento e Social Tracker<br />Recentemente o Google lançou duas novas funcionalidades em sua biblioteca javascript:<br />Site Speed - http://goo.gl/a64Kj<br />Social Plugin - http://goo.gl/u9ApO<br />O Site Speed, monitora o tempo de carregamento das páginas e exibe essa informação em um relatório específico na ferramenta. <br />Para habilitar esse recurso simplesmente adicione após a tag padrão em todas as páginas a seguinte linha javascript:<br />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.<br />Sua instalação deve ser feita para cada link, fornecendo o nome da rede e ação executada. Segue alguns exemplos:<br />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:<br />http://goo.gl/fJtJV<br /> 1 _gaq.push(['_trackPageLoadTime']); <br />1 _gaq.push(['_trackSocial', 'facebook', 'like']);<br /> 2 _gaq.push(['_trackSocial', 'twitter', 'tweet']); <br />
  83. 83. Google Analytics e Ecommerce<br />O Google Analytics possui um vários relatórios específicos para o monitoramento das vendas de sites de comércio eletrônico.<br />São necessários três métodos para o acompanhamento das transações de comércio eletrônico em seu site <br />Estes devem ser chamados nessa ordem e apenas na página de confirmação da compra:<br />_addTrans() - criação da transação<br />Aqui fornecemos todas as informações relacionadas a compra, como o código de pedido, valor total do pedido e do frete.<br />_addItem() - adição de itens à transação<br />Recebe as informações sobre cada produto, como preço, descrição, categoria e quantidade.<br />O item é associado a transação por meio do campo orderId.<br />_trackTrans() - envio da transação para o Google Analytics<br />Confirma uma compra e todos os dados que foram fornecido anteriormente, finalizando essa transação.<br />Documentação oficial: http://goo.gl/0zuwE<br />
  84. 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']);<br />  _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   ]);<br />  _gaq.push(['_trackTrans']);<br />  (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><br />
  85. 85. GAS! = Google AnalyticsonSteroids<br />Projeto Open-Source de biblioteca para implementação de Google Analytics<br />https://bitbucket.org/dpc/gas<br />85<br />
  86. 86. Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cookies, Javascript, imagens 1px<br />Mitos e lendas<br />Estrutura de contas<br />Configurações necessárias e boas práticas<br />Customizações avançadas<br />Web, Mobile, Apps, Flash<br />Validação de tags<br />Debug Javascript com Google Analytics<br />86<br />
  87. 87. Web Analytics para aplicativos Mobile<br />Atualmente já existe uma gama de ferramentas para monitoramentos de Apps para celulares e tablets:<br />Flurry - http://www.flurry.com/<br />PercentMobile - http://percentmobile.com/<br />Motally - http://www.motally.com/<br />AdMod - http://analytics.admob.com/home/<br />Mobilytics - http://www.mobilytics.net/<br />Localytics - http://www.localytics.com/app-analytics/<br />Porém o Google Analytics também possui bibliotecas específicas para as principais plataformas móveis, como Android e iOS.<br />Usando o GA você pode concentrar em uma única ferramenta os relatórios sobre os acessos ao site, aplicativos e widgets.<br />
  88. 88. Google Analytics para Android<br />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.<br />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.<br />Trecho de exemplo para um evento: <br /> 1 importcom.google.android.apps.analytics.GoogleAnalyticsTracker;<br /> 2 ...<br /> 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);<br />11    }<br />12 });<br />Download e manual: http://goo.gl/Nn17A<br />
  89. 89. Google Analytics para iOS<br />Da forma que para os aplicados Android, também está disponível um SDK específico para o iOS da Apple<br />Trecho de exemplo para um pageview:<br /> 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<br />11  if(![[GANTrackersharedTracker]trackPageview:@"/app_entry_point"12                                   withError:&error]){13    // Handleerrorhere14  }<br />15<br />16  [window_ makeKeyAndVisible];<br />17}<br />Download e manual: http://goo.gl/39aMc<br />
  90. 90. Google Analytics para Adobe Flash: ActionScript 3<br />No Flash:<br />E executar uma das funções criadas para cada ação que deseja-se monitorar<br />No Javascript:<br /> 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 } <br />  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 } <br />90<br />
  91. 91. Google Analytics para Adobe Flash: Ga for Flash<br />O gaforflash foi desenvolvido pela própria Adobe e contém todos os recursos do código javascript presente no “ga.js”. <br />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. <br />Ele é útil para vários objetivos de acompanhamento comuns em Flash, como:<br />um widget em Flash incorporado a uma página HTML<br />um aplicativo Flex independente ou um site somente em Flash hospedado em uma página HTML<br />um jogo ou programa Flex/Flash distribuído em que o desenvolvedor não controla onde o widget será posicionado<br />Download e manual: http://code.google.com/p/gaforflash/ <br />
  92. 92. Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cookies, Javascript, imagens 1px<br />Mitos e lendas<br />Estrutura de contas<br />Configurações necessárias e boas práticas<br />Customizações avançadas<br />Web, Mobile, Apps, Flash<br />Validação de tags<br />Debug Javascript com Google Analytics<br />92<br />
  93. 93. Todos os Navegadores<br />Fiddler (Win)<br />http://www.fiddler2.com/fiddler2/<br />Charles (Win, Mac, Linux) (Pago)<br />http://www.charlesproxy.com/<br />Chrome<br />Google AnalyticsTrackingCodeDebugger<br />http://goo.gl/KrvcX<br />Firefox<br />Httpfox<br />https://addons.mozilla.org/pt-br/firefox/addon/httpfox/<br />Firebug<br />https://addons.mozilla.org/pt-br/firefox/addon/firebug/<br />Ferramentas para validação de tags<br />Extensão oficial Google<br />Mais informações sobre Ferramentas de depuração: http://goo.gl/FVdDW<br />93<br />
  94. 94. Validando tags no Firefox com o httpfox<br />Tecla atalho para iniciar o plugin:<br />Alt+F2<br />Botão ‘Start’!<br />Filtrar por:<br />‘utm’<br />Selecionar a aba:<br />Query String<br />Mais informações sobre os parâmetros do GIF solicitação: http://goo.gl/0iFkG<br />94<br />
  95. 95. Agenda<br />Web Analytics para todos<br />Web Analytics em tempo real<br />Google Analytics para desenvolvedores<br />Cookies, Javascript, imagens 1px<br />Mitos e lendas<br />Estrutura de contas<br />Configurações necessárias e boas práticas<br />Customizações avançadas<br />Web, Mobile, Apps, Flash<br />Validação de tags<br />Debug Javascript com Google Analytics<br />95<br />
  96. 96. Técnicas e ferramentas para testes e debugs de erros em Javascript<br />Firebug + Fireunit<br />http://fireunit.org<br />TestSwarm <br />http://github.com/jquery/testswarm<br />jQuery + QUnit<br />http://docs.jquery.com/QUnit<br />JsUnit<br />http://www.jsunit.net<br />js-test-driver<br />http://code.google.com/p/js-test-driver<br /> <br />96<br />
  97. 97. Mas nem tudo pode ser testado... <br />Todos os navegadores e suas infinidades de versões<br />Diversos dispositivos, como celulares e tablets<br />Velocidade da conexão e impactos nos timeouts<br />Regras de firewall ou proxy<br />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?<br />97<br />
  98. 98. Log de erros Javascript pelo Google Analytics<br />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.<br />Além do erros, você também terá várias informações relacionadas como:<br />Detalhes da exceção<br />Página em que ocorrem<br />Versão do navegador<br />Sistema Operacional<br />Caminho da navegação<br />Munido de todas esses dados fica muito fácil entender e solucionar os erros.<br />98<br />
  99. 99. Log de Erros: Categorias<br />Exemplos: TypeError, URIErro, ReferenceError<br />99<br />
  100. 100. Log de Erros: Mensagem<br />Exemplos: jQuery notavailable, var undefined<br />100<br />
  101. 101. Log de Erros: Páginas<br />101<br />
  102. 102. Código principal<br /> 1 <script type="text/javascript"><br /> 2 <br /> 3 functiontrack_error_event (exception) {<br /> 4 _gaq.push(['_trackEvent',<br /> 5 'Exception '+(exception.name||'Error'), //Categoria<br /> 6 exception.message || exception, //Mensagem<br /> 7 document.location.href//Pagina<br /> 8 ]);<br /> 9 }<br /> 10 <br /> 11 </script><br />Fonte: http://www.directperformance.com.br/javascript-debug-simples-com-google-analytics<br />102<br />
  103. 103. Exemplo de implementação<br /> 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><br />103<br />
  104. 104. Implementação para captura de erros global<br />Para alguns navegadores, podemos simplificar e aplicar monitoramento de erro para toda a página:<br /> 1 <script type="text/javascript"><br /> 2 <br /> 3 window.onerror = function(errorMsg, url, lineNumber) {<br /> 4 _gaq.push(['_trackEvent',<br /> 5 'ExceptionError'), //Categoria<br /> 6 errorMsg, //Mensagem<br /> 7 url + " (" + lineNumber + ")" //Pagina e linha<br /> 8 ]);<br /> 9 }<br /> 10 <br /> 11 </script><br />104<br />
  105. 105. Agenda<br />Para saber mais<br />105<br />
  106. 106. Maissobre o tema - Livros<br />LivroWeb Analytics 2.0<br />Livro Google Analytics<br />http://dpc.bi/livro-wa-20<br />http://dpc.bi/livro-ga<br />Livro<br />Otimização de Conversão<br />http://dpc.bi/livro-otimizacao<br />
  107. 107. Maissobre o tema – blogs, fóruns e podcasts<br />Grupo de discussão<br />Webanalytics_Brasil<br />http://dpc.bi/webanalytics_brasil<br />Blog Direct Performance<br />http://dpc.bi/blog-performance<br />SearchCast Analytics<br />http://dpc.bi/searchcast-analytics<br />
  108. 108. @FabioPHMS<br />@LeoNaressi<br />www.directperformance.com.br<br />@dperformance<br />

×