Embed Size (px)
DESCRIPTION
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.
Citation preview
for Developers
for Developers
@brunobar79
• Herramienta de Marke.ng
• SEO
• E-‐commerce
• Publicidad (Adsense / Adwords)
• Social Media
AnalyticsLo que pensamos los programadores…
• Velocidad del si.o
• Browser Info
• Mobile Stats
• Alertas
• Eventos
AnalyticsLo que no todos saben…
Tracking Code
Tracking Code (ga.js)
<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>!
El más u.lizado:
Universal Analytics (analytics.js)
<!-- 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 -->!
El nuevo código:
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!
Eventos
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
• Categoría
Tienen 4 parámetros:
Eventos
_gaq.push(['_trackEvent','category','ac.on','label_opt', value_opt]);
Estructura del código Javascript (versión clásica)
Estructura del código Javascript (versión universal analy8cs)
ga('send','event',category, ac.on, label_opt, value_opt);
• Acción • E.queta • Valor
Los reportes se encuentran en Menu :: Comportamiento :: Eventos
Eventos
Error Tracking
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! !
!
Tracking de Errores JS
• Capturando el evento window.onerror
window.onerror = function(message, url, linenumber) { alert("JavaScript error: " + message + " en línea " + linenumber + " de " + url); }
¿Cómo?
• 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
Tracking de Errores JS
¿Cómo lo registramos en Analy<cs?
• Lanzando un evento con Google Analy.cs ! Version clásica (ga.js) !!
!
!
Version universal analy8cs (analy8cs.js)
window.onerror = function(message, url, linenumber) { _gaq.push(['_trackEvent','JS ERROR',message,url + ':' + linenumber]);}
window.onerror = function(message, url, linenumber) { ga('send','event', 'JS ERROR',message,url + ':' + linenumber); }
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]); }
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); !}
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
Tracking de ErroresEJEMPLOS
Alertas
Alertas
GAP.js
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
GAP.js
Ejemplos: -‐ Asignando un evento a un link ( crossbrowser ) !!
!
!
!
!
GAP.track.addListener(document.getElementById("btn"),'click',!function(){! GAP.track.event('buttons','btn','top-menu',1);!});!
Código Javascript
GAP.js
Ejemplos: -‐ Asignando un evento a un link con data-‐akributes !
!!
!
!
!
!
GAP.track.element('click',document.getElementById("link"));!
Código Javascript
<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>
Código HTML
GAP.js
Ejemplos: -‐ Asignando un evento a todos los elementos con data-‐akributes u.lizando jQuery !!
!
!
!
!
$("[data-ga-category]").each(function(e){! GAP.track.element("click",this);!});!
Código Javascript
<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>
Código HTML
GAP.js
Ejemplos:
Tracking de errores javascript !!
!
!
!
GAP.track.errors();
Código Javascript
GAP.js
#DEMO
GAP.js: bit.ly/GAPdotJS GA Debugger: bit.ly/GADebugger !
Slides: bit.ly/GA4DEVS
Links
¿Preguntas?
¡Gracias!
