Como probar tus tags de una manera divertida.

22. junio 2018 Google Analytics, GTM 0
Como probar tus tags de una manera divertida.
Como probar tus tags de una manera divertida.
5 (100%) 1 vote

Como todos los post que escribo, espero esté sea de ayuda también para ti,  aunque sinceramente más allá de buscar explicar alguna funcionalidad de Google Analytics u otra herramienta de Analítica, lo hago con la intención de que te identifiques con algunas situaciones que vivimos a la hora de  estar trabajando en una implementación y/o configuración de  cualquier herramienta de Análisis Web……”EL TESTING”.

Con el paso del tiempo me he dado cuenta que el trabajo de un consultor de datos, al menos en cuestión de implementación es muy similar a la de un programador, estudiamos mucho, investigamos mas,   nos documentamos para resolver algún problema y realmente el tiempo que estamos ejecutando o configurando las herramientas puede ser menor  es el menor, pero bueno así es como se aprende y tiene al paso que avanza la tecnología nos permite estar a la vanguardia.

¿Porque decidí buscar una forma interesante de estar probando mis tags?

Hace algún tiempo trabaje con Adobe Analytics, particularmente en su implementación para un nuevo sitio  y al no tener un debugger tal cual como el preview de GTM tuve que jugar con alertas de js y mandando mensajes en la  consola de desarrolladores para validar mis reglas o etiquetas. Esto conllevo algunos desafíos ya que no me permitían ejecutar mensajes de alertas en el sitio y decidí hacerlo en la consola con el famoso console.log()

console.log()

En un momento fue cansado ya que así como se mostraban mis  mensajes , aparecían muchísimos otros como errores de carga o bien algún otro mensaje de plug ins implementados.

.Mensajes Consola

Esto podría parecer simple, pero qué imaginate un poquito cuando  tienes mas de 100 mensajes  y si necesitas validar diferentes etiquetas o reglas en una misma sección puede ser algo tedioso al estar revisando la consola,  al menos a mi me costo trabajo y para divertirme comencé a aprender a activar comandos personalizados como el siguiente y es por ello que decidí escribir este post:

console.log('%c El evento se está X se está ejecutando correctamente !', 'color: green; font-weight: bold;');

El resultado fue como este al momento de que se ejecute nuestra regla, resaltando dentro de la consola contra los demás mensajes y se veía algo como la siguiente imagen:

Mensajes Consola

Como te podrás dar cuenta es solo cuestión de aprender un poquito de CSS o bien HTML y jugar. Y una ventaja que al menos a mi me funciono es que en lugar de leer todas las líneas de la consola solo validaba que se imprimían los mensajes de acuerdo a los colores.

¿Cómo puedo probarlo algunos mensajes en console ?

Es muy sencillo solo abre tu consola de desarrolladores ( ctrl +i ) y a continuación te dejo un listado de los ejemplos que  utilicé esperando los puedas probar y  aprendas algo mas de internet y en tus siguientes implementaciones puedas probar mensajes jugando con la consola de desarrolladores.

1.- Cambiando el color y tamaño de mis letras

Prueba este comando y valida como se puede cambiar el testo y los tamaños de la letra.

console.log("%cuppercase %cLOWERCASE %cThis is capitalized", "color: red; text-transform: uppercase", "color: green; text-transform: lowercase", "color: blue; text-transform: capitalize");

consola-msg

2.- Colocando sombra a mi texto

En este sencillo mensaje enviamos los atributos text-shadows de color rojo a nuestro texti

console.log("%c Esto es una linea de texto toda rara ", "text-shadow: 3px 2px red;");

consola-msg

3.- Texto con doble Color

En este mensaje es muy sencillo si necesitas enviar 2 variables puedes hacer uso del indicador de color con el signo de porcentaje  y c (%c) que es una directiva de estilo. Si quieres ahondar mas en el tema puedes ver aqui 

console.log('%c Aqui envia un msj && %c Le pone otro color' +, "color: blue", "color: green");

consola-msg

4.- Un Cuadro ya mas elaborado.

Aquí ya vas a ocupar requerir un poco mas de conocimiento ya que asignamos un arreglo asignando un conjunto de valores para al final a traves del método join() asignarlo a nuestro mensaje

var styles = [
 'background: linear-gradient(#D33106, #571402)'
 , 'border: 1px solid #3E0E02'
 , 'color: white'
 , 'display: block'
 , 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)'
 , 'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
 , 'line-height: 40px'
 , 'text-align: center'
 , 'font-weight: bold'
].join(';');

console.log('%c Mensaje en mi consola que parece un boton?', styles);

Resultado de nuestro mensaje 

consola-msg

Conclusión:

Como bien lo dije, solo es cuestión de aprender un poco mas de CSS y HTML para poder avanzar.  Siéntete como siempre libre de dejar tus comentarios o bien si te pareció interesante te invito a continuar con el siguiente tutorial de cómo mandar un mensaje de consola dentro de GTM obteniendo el ID de Google y una Cookie generada por el usuario

 


Deja un comentario