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.

1. for Developers

2. for Developers

3. @brunobar79

4. Analytics
Lo que pensamos los programadores…
• Herramienta de Marke.ng
• SEO
• E-­‐commerce
• Publicidad (Adsense / Adwords)
• Social Media

6. Analytics
Lo que no todos saben…
• Velocidad del si.o
• Browser Info
• Mobile Stats
• Alertas
• Eventos

7. Tracking Code

8. 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>!

9. 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 -->!

10. 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!

11. Eventos

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

13. 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);

14. Eventos
Los reportes se encuentran en
Menu :: Comportamiento :: Eventos

15. Error Tracking

16. 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!
!
!

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

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

19. 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]);
}!
!

20. 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);
!
}

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

22. Tracking de Errores
EJEMPLOS

23. Alertas

24. Alertas

26. GAP.js

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

28. 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);!
});!
!
!
!

29. 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>
!

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

31. GAP.js
Ejemplos:
Tracking de errores javascript
!
Código Javascript
!
!
GAP.track.errors();
!
!

32. GAP.js
#DEMO

33. Links
GAP.js: bit.ly/GAPdotJS
GA Debugger: bit.ly/GADebugger
!
Slides: bit.ly/GA4DEVS

34. ¿Preguntas?

35. We are hiring!
CakePHP + jQuery
Part time & Remote
bruno@thehackerway.co

36. ¡Gracias!