for Developers
for Developers
@brunobar79
Analytics
Lo  que  pensamos  los  programadores…
• Herramienta  de  Marke.ng

• SEO  

• E-­‐commerce  

• Publicidad  (Ad...
Analytics
Lo  que  no  todos  saben…
• Velocidad  del  si.o

• Browser  Info  

• Mobile  Stats

• Alertas

• Eventos
Tracking Code
Tracking Code (ga.js)
El  más  u.lizado:  
<script type="text/javascript">!

!

  var _gaq = _gaq || [];!
  _gaq.push(['_s...
Universal Analytics (analytics.js)
El  nuevo  código:  
<!-- Google Analytics -->!
<script>!
(function(i,s,o,g,r,a,m){i['G...
Universal Analytics (analytics.js)
Ventajas
•   Script  mejorado  (ej.  plugins)  
•   Protocolo  de  Medición  (HTTP  Req...
Eventos
Eventos
Permite   registrar   la   interacción   del   usuario   con  
determinados  elementos  de  la  web

Ejemplos

•  ...
Eventos
Tienen  4  parámetros:
•  Categoría

•  Acción

•  E.queta

•  Valor

Estructura  del  código  Javascript  (versió...
Eventos
Los  reportes  se  encuentran  en  
Menu  ::  Comportamiento  ::  Eventos
Error Tracking
Tracking de Errores JS
¿Por qué?
•  Demasiados  navegadores

•  Somos  devs  (Los  peores  testers  del  mundo)  
!

•  Pa...
Tracking de Errores JS
¿Cómo?
•  Capturando  el  evento  window.onerror  
window.onerror = function(message, url, linenumb...
Tracking de Errores JS
¿Cómo  lo  registramos  en  Analy<cs?  
  •  Lanzando  un  evento  con  Google  Analy.cs  
!

    V...
Tracking de Errores 404
¿Cómo  lo  registramos  en  Analy<cs?  
Con  una  pág.  404  propia  podemos  saber  

desde  dond...
Tracking de Errores 500
¿Cómo  lo  registramos  en  Analy<cs?  
Con  una  pág.  500  propia  debemos:  
• Retornar  el  er...
Tracking de Errores
VENTAJAS  
• Podemos  ver  desde  donde  vino  el  usuario  
• Cual  fue  el  error  
• En  que  archi...
Tracking de Errores
EJEMPLOS
Alertas
Alertas
GAP.js
GAP.js
¿Qué  es?    
Wrapper  en  Javascript,  autodetecta  la  versión,  
provee  una  API  única.  
Ventajas  
!•  Evita...
GAP.js
Ejemplos:  
  -­‐  Asignando  un  evento  a  un  link    (  crossbrowser  )  
      
    Código  Javascript  

!
!G...
GAP.js
Ejemplos:  
  -­‐  Asignando  un  evento  a  un  link  con  data-­‐akributes  
!
    Código  Javascript  
      GAP...
GAP.js
Ejemplos:  
  -­‐  Asignando  un  evento  a  todos  los  elementos    con

      data-­‐akributes  u.lizando  jQuer...
GAP.js
Ejemplos:  
Tracking  de  errores  javascript  
    
!
    Código  Javascript  
!
!
GAP.track.errors();
!
!
GAP.js

#DEMO    
Links

  

GAP.js:    bit.ly/GAPdotJS        


GA  Debugger:    bit.ly/GADebugger    
!

Slides:    bit.ly/GA4DEVS  
¿Preguntas?
We are hiring!
CakePHP + jQuery
Part time & Remote

bruno@thehackerway.co
¡Gracias!
Google Analytics para Desarrolladores
Google Analytics para Desarrolladores
Upcoming SlideShare
Loading in …5
×

Google Analytics para Desarrolladores

1,684 views

Published on

Una mirada diferente a Google Analytics, enfocada a los desarrolladores. Esta fue mi presentación en Google DevFest Montevideo, Uruguay el 25 de octubre de 2013.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,684
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Google Analytics para Desarrolladores

  1. 1. for Developers
  2. 2. for Developers
  3. 3. @brunobar79
  4. 4. Analytics Lo  que  pensamos  los  programadores… • Herramienta  de  Marke.ng
 • SEO  
 • E-­‐commerce  
 • Publicidad  (Adsense  /  Adwords)
 • Social  Media
  5. 5. Analytics Lo  que  no  todos  saben… • Velocidad  del  si.o
 • Browser  Info  
 • Mobile  Stats
 • Alertas
 • Eventos
  6. 6. Tracking Code
  7. 7. Tracking Code (ga.js) El  más  u.lizado:   <script type="text/javascript">! !   var _gaq = _gaq || [];!   _gaq.push(['_setAccount', 'UA-XXXXX-X']);!   _gaq.push(['_trackPageview']);! !   (function() {!     var ga = 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';!     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);!   })();! ! </script>!
  8. 8. Universal Analytics (analytics.js) El  nuevo  código:   <!-- Google Analytics -->! <script>! (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]|| function(){! (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),! m=s.getElementsByTagName(o) [0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)! })(window,document,'script','//www.google-analytics.com/ analytics.js','ga');! ! ga('create', 'UA-XXXX-Y');! ga('send', 'pageview');! ! </script>! <!-- End Google Analytics -->!
  9. 9. Universal Analytics (analytics.js) Ventajas •   Script  mejorado  (ej.  plugins)   •   Protocolo  de  Medición  (HTTP  Requests)   •   Mejoras  en  reportes  (Dimensiones  custom)
 •   User-­‐Centric  Approach Desventajas   •    Cambió  toda  la  sintaxis!    
  10. 10. Eventos
  11. 11. Eventos Permite   registrar   la   interacción   del   usuario   con   determinados  elementos  de  la  web
 Ejemplos
 •      Ajax  Callbacks   •      Descargas  de  archivos   •      Tracking  de  enlaces,  por  ejemplo  de  salida   •    Interacción  con  diferentes    botones   •    Cualquier  otro  evento  JS  
  12. 12. Eventos Tienen  4  parámetros: •  Categoría •  Acción •  E.queta •  Valor Estructura  del  código  Javascript  (versión  clásica) _gaq.push(['_trackEvent','category','ac.on','label_opt',  value_opt]); Estructura  del  código  Javascript  (versión  universal  analy8cs)   ga('send','event',category,  ac.on,  label_opt,  value_opt);
  13. 13. Eventos Los  reportes  se  encuentran  en   Menu  ::  Comportamiento  ::  Eventos
  14. 14. Error Tracking
  15. 15. Tracking de Errores JS ¿Por qué? •  Demasiados  navegadores
 •  Somos  devs  (Los  peores  testers  del  mundo)   ! •  Para  el  backend  hay  logs,  para  el  frontend  no   
 •  Lleva  5  minutos  implementarlo!   ! !
  16. 16. Tracking de Errores JS ¿Cómo? •  Capturando  el  evento  window.onerror   window.onerror = function(message, url, linenumber) { alert("JavaScript error: " + message + " en línea " + linenumber + " de " + url); } •  Recibe  3  argumentos:  
    message:    Mensaje  de  error  o  excepción   url:  La  url  del  archivo  que  con.ene  el  error   linenumber:    La  línea  donde  ocurrió  el  error 

  17. 17. Tracking de Errores JS ¿Cómo  lo  registramos  en  Analy<cs?    •  Lanzando  un  evento  con  Google  Analy.cs   !    Version  clásica  (ga.js)   ! window.onerror = function(message, url, linenumber) { ! _gaq.push(['_trackEvent','JS  ERROR',message,url  +  ':'  +  linenumber]);
 } ! !    Version  universal  analy8cs  (analy8cs.js)
 window.onerror = function(message, url, linenumber) {          ga('send','event',  'JS  ERROR',message,url  +  ':'  +  linenumber);   }
  18. 18. Tracking de Errores 404 ¿Cómo  lo  registramos  en  Analy<cs?   Con  una  pág.  404  propia  podemos  saber  
 desde  donde  viene  el  link  mal  apuntado.   ! Ejemplo
 window.onload = function(){ !var referrer = document.referrer!=""?"Referrer:"+document.referrer:null; gaq.push(["_trackEvent","ERROR 404”,"Not found:"+location.href,referrer]); }! !
  19. 19. Tracking de Errores 500 ¿Cómo  lo  registramos  en  Analy<cs?   Con  una  pág.  500  propia  debemos:   • Retornar  el  error  en  el  html  como  un  String  en    js   • Usar  ese  String  como  parámetro  del  evento   ! Ejemplo
 window.onload = function(){ !var referrer = document.referrer!=""?"Referrer:"+document.referrer:null; var data = ["_trackEvent",
 "ERROR 500”, ! ”<?php echo ($error_data); ?>”, referrer]; ! _gaq.push(data); ! }
  20. 20. Tracking de Errores VENTAJAS   • Podemos  ver  desde  donde  vino  el  usuario   • Cual  fue  el  error   • En  que  archivo  y  línea   • Con  que  Browser,    Versión  y    S.O.   
 ! ! ! #PRICELESS  
  21. 21. Tracking de Errores EJEMPLOS
  22. 22. Alertas
  23. 23. Alertas
  24. 24. GAP.js
  25. 25. GAP.js ¿Qué  es?     Wrapper  en  Javascript,  autodetecta  la  versión,   provee  una  API  única.   Ventajas   !•  Evitamos  manejar  la  sintaxis  de  las  2  versiones  
 • Cambiar  de  versión  es  transparente   •  El  trackeo  de  errores  es  MUY  fácil!   •  No  depende  de  ninguna  librería  (ej.  jQuery)   •  Es  crossbrowser
  26. 26. GAP.js Ejemplos:    -­‐  Asignando  un  evento  a  un  link    (  crossbrowser  )            Código  Javascript   ! !GAP.track.addListener(document.getElementById("btn"),'click',! function(){! ! GAP.track.event('buttons','btn','top-menu',1);! });! ! ! !
  27. 27. GAP.js Ejemplos:    -­‐  Asignando  un  evento  a  un  link  con  data-­‐akributes   !    Código  Javascript        GAP.track.element('click',document.getElementById("link"));! ! !    !Código  HTML   <a href="http://aa.com" data-ga-category="Event-cat" data-ga!action="my action" data-ga-label="some label" data-ga!value="1" id=”link”>my link!</a> !
  28. 28. GAP.js Ejemplos:    -­‐  Asignando  un  evento  a  todos  los  elementos    con
      data-­‐akributes  u.lizando  jQuery            !Código  Javascript   ! $("[data-ga-category]").each(function(e){! ! GAP.track.element("click",this);! });! ! !    !Código  HTML   <a href="http://aa.com" data-ga-category="Event-cat" data-gaaction="my action" data-ga-label="some label" data-gavalue="1" id=”link”>my link!</a>
  29. 29. GAP.js Ejemplos:   Tracking  de  errores  javascript       !    Código  Javascript   ! ! GAP.track.errors(); ! !
  30. 30. GAP.js #DEMO    
  31. 31. Links  
 GAP.js:    bit.ly/GAPdotJS         
 GA  Debugger:    bit.ly/GADebugger     ! Slides:    bit.ly/GA4DEVS  
  32. 32. ¿Preguntas?
  33. 33. We are hiring! CakePHP + jQuery Part time & Remote bruno@thehackerway.co
  34. 34. ¡Gracias!

×