Tracking de Sesión en Google Analytics

Tracking de Sesión en Google Analytics
Tracking de Sesión en Google Analytics
Calificar

Muy bien, este post es una continuación de donde hablamos de como  probar nuestros de manera divertida en la consola de desarrolladores , por lo que te invito a leerlo si aun no lo has hecho o bien puedes continuar ya que tambión para complementarlo aprenderemos un poco:

  • Como crear cookies con GTM
  • Trackear el Session id de Google Analytics y guardarlo en una variable dentro del Data Layer.
  •  Pintarlo o mandarlo dentro de la consola de desarrolladores

Dicho esto puedes tomar nota y espero que todos los ejemplos sean claros  ya que haré mi mayor esfuerzo en explicarlos.

Primeros pasos. ¿ Que es el Id de Sesion de Google Analytics?.

El sesión id es tal cual la cookie de sesión que se implementa cuando abres un sitio Web que tiene el código de Google Analytics, este implementa cookies para realizar el seguimiento de tu comportamiento pero asigna un id de sessión a tu dispositivo y/o explorador.  y si quieres ahondar mas en el tema te invito a revisar el post de explorador de usuarios con Google Analytics en donde explico un ejemplo mas claro de como analizarlo.

GA-Cookie

 

¿Que es una Cookie?

Sin entrar a mayor detalle ya que me gustaría hacer un post donde explique cada una de las cookies de Google Analytics, las podemos comprender como un pequeño archivo que contiene información, la cual ha sido es enviada por un sitio web (el dominio que visitas)  y se almacena en tu  navegador, de manera que el sitio web puede consultar la actividad previa del navegador.

edith this cookie

En la imagen anterior puedes ver con el plug in de edith this cookie cuales son las cookies que fueron incrustadas en tu computador y a que dominio hacen referencia. 

Ahora si después de esta breve explicación,  ha llegado el momento de crear nuestras variables dentro de GTM y configurar nuestra etiqueta HTML para que obtengamos estos valores y los coloquemos para validarlos los arrojaremos en la consola.

Variables dentro de GTM

Dentro de google Tag Manager en la sección de variables hemos creado 3 nuevas variables del  tipo Capa de Datos o Data Layer, las cuales podrían ser utilizadas para futuras etiquetas dentro de Google Tag Manager.

ejemplo de variables en GTM

La creación de estas variables es muy sencilla, ya que solo se coloca el nombre de la variable y listo al enviarla a través del data Layer en código podremos capturarla

Data Layer

Creamos una etiqueta HTML.

Muy bien ahora que ya hemos configurado nuestras variables, llego el momento de crear  un nuevo tag del tipo HTML, el cual nos abre un cuadro de texto que reconoce lenguaje HTML para incluir el código  donde incluiremos las funciones para capturar el valor del id de cliente y la cookie en Google a través de funciones de javascript.

¿Que es una función en Javascript?

Sin ser programador puedo decirte que una función de Javascript así como en cualquier lenguaje de programación la podremos comprender como un procedimiento, el cual incluye sentencias o acciones que debe realizar para obtener un valor.

En el caso de nuestra etiqueta HTMl creamos una script de JS y iniciamos nuestra función llamada  doSomething() y dentro de las llaves iniciamos las sentencias o taras que debe realizar nuestra función.

Obtenemos el del client ID

  1. Lo primero que vemos es una impresión del comando console.log()
  2. Iniciamos la variable fecha a través de la keyword reservada var y creamos el objeto New date(), el cual  nos debe imprimir la fecha y hora central de cuando navegamos en el sitio.
  3. Creamos una nueva variable llamada _trackear a través del meéodo getAl()l del objeto ga (Google Analytics), el cual nos debe devolver todos los valores asociados a dicho objeto ga.
    1. Asignamos el valor clientId con el nombre
  4. Imprimimos en la consola el client Id.
function doSomething(){  	
 console.group('Se envia nuestro Tag Hacia Data Layer'); 
 
 var _fecha = new Date(); 
 console.log('%c La hora Central es: %c' + _fecha, "color: blue", "color: green");
 
 var _tracker = ga.getAll()[0];
 var clientId = _tracker.get('clientId')
 console.log('%c El ClientId de Google Analytics es %c' + clientId, "color: blue", "color: green"); 

} // Cierre de las sentencias de la función

 

Obtenemos el del client ID

Ahora ha llegado el turno de crear nuestra cookie. Al igual que la anterior creamos una función que se llama readCookie(name) la cual debe tener un valor (name).

  1. Creamos una variable llamada nameEQ que asigne el nombre de la cookie concatentando el signo de igual (“=”)
  2. creamos una nueva variable ca y a través del comando document.location obtenemos las cookies y las separamos por punto y coma (“;”) con la método split
  3. Creamos ciclo a traves de la palabra reservada for y buscamos la  longitud de la cookie ca y vamos iternando asignandola a una nueva variable con el nombre de c para finalmente regresarlo en un string
  4. Creamos 2 variables donde:
    1. cookieSource: llamando la función asignando el nombre de la cookie (source) y partiéndola con el split
    2. cookielength en donde agregamos el método length para obtener la longitud
  5. Finalmente imprimimos 2 mensajes de consola en los que para ver la ruta de la cookie y la otra buscando el ultimo valor de la cookie length con la sentencia cookielength -1
function readCookie(name) {
	    var nameEQ = name + "=";
	    var ca = document.cookie.split(';');
	    
	    	for(var i=0;i < ca.length;i++) {
		        var c = ca[i];
		        while (c.charAt(0)==' ') c = c.substring(1,c.length);
		        if (c.indexOf(nameEQ) == 0)  return c.substring(nameEQ.length,c.length);
	    	}
	    		return null;
	}
		
var cookieSource = readCookie('source').split("|");
var cookielength = readCookie('source').split("|").length;

console.log('%c La ruta de mi Cookie separado por comas es: %c' + cookieSource, "color: blue", "color: green"); 
console.log('%c La última fuente es Cookie es %c' + cookieSource[cookielength -1], "color: blue", "color: green");

 

Validamos que exista el clientId, Daya Layer e  Inicializamos la función

A través del condicional if validamos que exista el clientId y se ser valido creamos la sentencia para cagar nuestro data Layer alimentando las variables que ya creamos y asignandole los valores de nuestras funciones para finalmente solo llamamos la funcion doSomething()

if (clientId) {
			dataLayer.push({
				'ID_DE_SESION': clientId,
				'cookieSource':cookieSource,
				'lastSourceCookie': cookieSource[cookielength -1]

				});
	}
}
doSomething()

 

Configuración de nuestro tag en GTM

Muy bien una vez comprendido el código anterior solo será cuestión de cargar nuestro tag y la regla de activación será que después de cargar las paginas contabilice 10 segundos para activarlo y así validamos  que todos los elementos han sido cargados.

HTML tag

 

Validación de mi Etiqueta HTML

Ahora podrás validar tu tag sin necesidad utilizar el debugger de GTM y solo inspeccionando la consola y después de 10 segundos que carga la página se deberá imprimir un mensaje como el que a continuación te muestro:

Validacion tag HTML

Una vez visto esto resta solo escribir en la consola dataLayer podrás verificar las variables que se enviaron a traves de la capa de Datos para ser utilizadas con algún otro tag.

 

Data Layer consola

Conclusion

Muy bien, si te gusto este Tutorial podrías darle like, compartirlo o bien replicarlo con tus proyectos y recuerda, en este mundo de la analítica digital requiere mucho practica y contante aprendizaje por lo que te invito a seguir avanzado y si tienes dudas o bien te gustaría que escribira acerca de un tema en particular y lo conozco con gusto lo haré.

 


Deja un comentario