Hacks técnicos de analítica para no técnicos

Una de las preocupaciones más frecuentes de los analistas y marketers tiene que ver con el aspecto técnico de la analítica digital. Es normal, si no vienes del mundillo técnico, puede que te resulten muy complejos los entresijos de esta disciplina.

De hecho, uno de los mayores “hacks” que puede haber es el de perder el miedo a las herramientas para desarrolladores. No solo están ahí para los programadores, sino que resultan útiles para todas las personas que trabajan en el mundo web.

Para un analista digital, son imprescindibles en la validación de la implementación, la detección de problemas y en el entendimiento de cómo funcionan las “tripas” de las páginas web.

Estarás de acuerdo con nosotros en que lo fascinante del mundo de la Analítica Digital es que reconvierte el mundo profesional de los técnicos (llevándolos más por el camino del marketing y negocio), y de los marketers (que alcanzan un entendimiento mucho más enriquecido del marketing digital, desde la base).

Y, ¿qué son las herramientas para desarrolladores?

Todos los navegadores modernos nos ofrecen una serie de herramientas que son muy prácticas para los desarrolladores, y también para los no tan técnicos. Estas herramientas pueden servir para, desde inspeccionar código HTML, CCS y JavaScript y revisar estilos, hasta detectar errores en implementaciones técnicas. Además, es posible ver los distintos elementos que se han lanzado al activar ciertas opciones de la página web y cuánto tiempo tardaron en cargarse, por ejemplo.

¿Cómo accedemos a estas herramientas?

En función del navegador, tenemos distintas maneras de acceder a ellas, veamos:

• Chrome: Menú > Más herramientas > Herramientas para desarrolladores.
• Firefox: Menú > Más herramientas > Herramientas para desarrolladores.
• Safari: Preferencias > Avanzado > Mostrar el menú Desarrollo en la barra de menús > Desarrollo.

Igualmente, se puede pulsar F12 o el atajo de teclado Ctrl + Shift + I.

¿Qué nos aporta utilizar estas herramientas?

Hay varios beneficios que obtenemos de trabajar con estas herramientas, mencionaremos algunos:

• Revisar scripts y HTML de la página

Lo más cómodo para observar la estructura de la web es con el DOM (Document Object Model), aunque también se puede ver el código fuente para ver el HTML “bruto”:

• Ver código fuente: Clic derecho “Ver Código Fuente de la Página” o Ctrl + U.
• Ver DOM: Pestaña “Elements” de las herramientas para desarrolladores.

El DOM (Document Object Model) permite ver los elementos de la página, sus clases, ids, scripts, estilos y otros recursos que se carguen en las diferentes secciones de la web.

Incluso se puede inspeccionar el HTML de la página para crear nuevos eventos (por ejemplo, para medir los clics en un botón).

No es mala idea revisar la estructura de la página, con el fin de cerciorarse que los fragmentos de código relacionados con la analítica estén implementados correctamente siguiendo su documentación pertinente.

• Detectar posibles errores y consultar variables.

La pestaña de “Console” muestra la consola con la información que se envía con console.log() en JavaScript mientras se renderiza la página. Los errores, advertencias e información que transmite resultan muy valiosos para detectar problemas en la medición y otras incidencias de la web.

También, es posible ejecutar código de JS que funcione con nuestra página. Y así probar código que pueda utilizarse, por ejemplo, en GTM. O consultar el valor de variables y objetos, como en el caso del dataLayer o del document.referrer.

Si se necesitan herramientas de debugging más avanzadas, está la pestaña de “Sources”, que contiene los archivos de la página y posibilita la lectura y edición de código. Además, permite insertar breakpoints, con los que ir pausando la ejecución del código durante ciertos eventos, para ver si ocurre algún error (y dónde).

• Comprobar que se está mandando la información a la herramienta de analítica

La pestaña de “Network” contiene información relativa a las operaciones red, las comunicaciones entre tu navegador y el servidor que entrega la información de la página web.

Esta pantalla está cargada de información, pero lo que a nosotros nos va a interesar es si se está mandando la información adecuada al servidor.

Así pues, por ejemplo, si hay sospecha de que puede haber algún problema con la información que se manda a Google Analytics, lo primero será filtrar la pestaña por el nombre de “Collect”, y verificar si se está mandando al servidor (Method POST) la información esperada, examinar posibles errores de Status (Código 200 es que está todo OK), distinguir si es de Universal Analytics (v=1) o GA4 (v=2), y confirmar que la información que contiene es la esperada haciendo clic en el nombre.

• Ver y borrar cookies

Al igual que con el resto de las pestañas, en “Application” hay mucha información. Pero lo más interesante para un analista es la sección de cookies. Donde se encuentran sus características detalladas, como puede ser el nombre, valor, dominio, fecha de expiración etc. Las cookies cuyo dominio sea el de la página actual son las “first-party” (cookies de origen), mientras que aquellas con diferente dominio son “third-party“(cookies de terceros).

Aunque puede ser tentador usar plugins o la pestaña de incógnito para evitar borrar cookies. Desde la pestaña de “Application” puedes borrar todas las cookies, o solo unas pocas con clic derecho.

• Simular dispositivos móviles

No siempre necesitamos un móvil real para revisar la analítica web de un dispositivo móvil. Desde el pequeño icono en la parte superior izquierda de la herramienta de desarrolladores podemos “simular” la navegación web desde un dispositivo móvil.

De todas formas, esta es una solución “parcial” que no va a servir para todos los casos e incidencias. Por lo que, tampoco es mala idea emplear un emulador de Android/iOS, debuggear vía USB o con software como Charles.

¿Por qué usar las herramientas para desarrolladores?

Es cierto que la mayoría de estas funcionalidades (en el caso de un analista digital), pueden ser reemplazadas por extensiones del navegador que, de forma más intuitiva y visual, ofrecen información similar.

No obstante, es importante saber manejarse con las herramientas de desarrolladores, en primer lugar, para entender mejor como están funcionando las cosas y, en segundo lugar, para recurrir a ellas cuando haga falta una mayor flexibilidad o fiabilidad.

Esperamos que estos hacks te ayuden en tu día a día. Y, si quieres dar un paso más, podemos ayudarte a asegurar la calidad de tus datos con el auditado y validación técnica de tu analítica. Nuestros Business Improvers estarán encantados 😊 pincha en el botón de abajo y te contactaremos.

Javier Rodríguez Martín

Analista Digital