3 minTabla de Contenidos
Te presento un truco para reducir la sobrecarga que el uso de Google Analytics tiene sobre tu página web, optimizando el tiempo de carga y reduciendo el código JavaScript que se ejecuta cada vez que se solicita una página.
Google Analytics
Google Analytics es de largo la aplicación de analítica digital mas difundida en la web actual. Es gratuita, fácil de integrar y ofrece una gran variedad de información y funciones que podemos personalizar a nuestro gusto.
Para que Google Analytics funcione es necesario que nuestra página web incluya un segmento de código que se ejecuta cada vez que la página se carga y que envía a Google toda la información necesaria para que mas adelante el propietario del sitio pueda analizar su rendimiento (quién se conecta, cuándo, que páginas ha visto y cuanto tiempo ha estado viéndolas, …). Este evento fundamental, que se denomina page-view, es una de las piezas clave para la recolección de datos de Goggle Analytics.
La segunda pieza fundamental para que Google Analytics funcione es que dos page-views procedentes del mismo usuario deben identificarse dentro de Analytics como procedentes de la misma persona. Para ello se usan las tan consabidas Cookies. En concreto Google Analytics almacena en nuestro navegador dos cookies que tienen este propósito: _ga y _gid.
La primera vez que visitamos una web, estas cookies se crean y se les asigna un contenido único. Sucesivas visualizaciones de páginas de esa misma web permiten observar el contenido de estas cookies y entender que dos peticiones concretas al servidor web proceden de un usuario único.
La integración de Google Analytics en nuestra web suele hacerse incluyendo un segmento de código JavaScript en la cabecera de nuestra página web:
<head> <!-- El código HTML que se incluye en esta sección no es visible --> <!-- en la página pero es fundamental para interpretar el cuerpo --> <!-- del documento HTML. --> </head>
Google recomienda dos formas de hacer la integración a través de dos librerías. La primera que se introdujo(*) fue analytics.js, y la forma de integrarse consiste en incluir un segmento de código como este:
<!-- 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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
Donde UA-XXXXX-Y es el código de seguimiento de nuestra página web en Analytics. Un código que obtenemos al dar de alta nuestra web en Google Analytics y demostrar que somos los legítimos propietarios de la web.
ga.js) que fue la primera en estandarizarse pero que a día de hoy se considera obsoleta. Esta librería usa las cookies __utma y __utmb en lugar de _ga y _gid mencionadas anteriormente.La segunda librería, mas moderna y el estándar actual recomendado es gtag.js. El código a incluir no es muy diferente del anterior y también se basa en el mismo código de seguimiento de Analytics:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
</script>
Aunque este segmento de código nos pueda parecer pequeño, realmente lo que hace es cargar una librería externa de Google Analytics
https://www.googletagmanager.com/gtag/js (pulsa para ver el contenido)
que a su vez carga otras librerías como la propia analytics.js. El impacto total que supone todo esto es de 73kB de datos a los que se añade el tiempo de procesamiento del script. Y recuerda que si usas Google Analytics, todas tus páginas están cargando y ejecutando este código.
Reduciendo Google Analytics a su mínima expresión
El truco que te presento aquí para reducir el overhead que el uso de Google Analytics supone, ha sido creado por David Künnen y se basa en hacer una llamada directa a el API de Google Analytics, evitando la carga de las librerías externas que hemos mencionado anteriormente.
El segmento de código que nos permite hacer esta optimización es el siguiente:
<!-- Minimal Google Analytics Snippet - https://minimalanalytics.com/ -->
<script>
(function(a,b,c){var d=a.history,e=document,f=navigator||{},g=localStorage,
h=encodeURIComponent,i=d.pushState,k=function(){return Math.random().toString(36)},
l=function(){return g.cid||(g.cid=k()),g.cid},m=function(r){var s=[];for(var t in r)
r.hasOwnProperty(t)&&void 0!==r[t]&&s.push(h(t)+"="+h(r[t]));return s.join("&")},
n=function(r,s,t,u,v,w,x){var z="https://www.google-analytics.com/collect",
A=m({v:"1",ds:"web",aip:c.anonymizeIp?1:void 0,tid:b,cid:l(),t:r||"pageview",
sd:c.colorDepth&&screen.colorDepth?screen.colorDepth+"-bits":void 0,dr:e.referrer||
void 0,dt:e.title,dl:e.location.origin+e.location.pathname+e.location.search,ul:c.language?
(f.language||"").toLowerCase():void 0,de:c.characterSet?e.characterSet:void 0,
sr:c.screenSize?(a.screen||{}).width+"x"+(a.screen||{}).height:void 0,vp:c.screenSize&&
a.visualViewport?(a.visualViewport||{}).width+"x"+(a.visualViewport||{}).height:void 0,
ec:s||void 0,ea:t||void 0,el:u||void 0,ev:v||void 0,exd:w||void 0,exf:"undefined"!=typeof x&&
!1==!!x?0:void 0});if(f.sendBeacon)f.sendBeacon(z,A);else{var y=new XMLHttpRequest;
y.open("POST",z,!0),y.send(A)}};d.pushState=function(r){return"function"==typeof d.onpushstate&&
d.onpushstate({state:r}),setTimeout(n,c.delay||10),i.apply(d,arguments)},n(),
a.ma={trackEvent:function o(r,s,t,u){return n("event",r,s,t,u)},
trackException:function q(r,s){return n("exception",null,null,null,null,r,s)}}})
(window,"UA-XXXXX-Y",{anonymizeIp:true,colorDepth:true,characterSet:true,screenSize:true,language:true});
</script>
Donde UA-XXXXX-Y sigue siendo nuestro código de seguimiento de la página web en Analytics.
Haciendo esto reducimos los 73kB de la librería de Analytics en tan solo 1.5kB, que además van incluidos en el código de nuestra propia web y no requieren de un segundo acceso a otro servidor. También se reduce notablemente el tiempo necesario para procesar el JavaScript, lo que de forma global disminuye el tiempo de carga de todas nuestras páginas.
Cuando se puede usar este truco
La mayoría de las páginas web se integran con Analytics únicamente a través de la llamada en la cabecera de la página a través de cualquiera de las dos librerías. Esto es suficiente para capturar los page-views y disfrutar de las ventajas de análisis de Google Analytics.
Para este tipo de webs este truco es ampliamente recomendado ya que no disminuye nuestra capacidad de análisis y sin embargo mejora nuestra el tiempo de carga de la página.
Sin embargo hay webs que hacen uso de funciones mas complejas de Google Analytics y Google Tag Manager, en cuyo caso este truco no será lo mas recomendable o al menos no para todas las páginas.
En esencia, si usas funciones avanzadas de Google Analytics, como eventos, seguimiento de comercio electrónico, seguimiento de conversiones con AdWords y/o campañas de remarketing, entonces vas a necesitar la librería de JavaScript completa y ya no será ventajoso capturar los page-views a través del segmento de código mínimo anterior, ya que de todos modos tendrás que cargar la librería gatg.js.
Autor: 
