Recogiendo los Headers por dataLayer

Una de las configuraciones más eficientes que puedes hacer con IKASA es evitar que el sistema tenga que lanzar una petición extra solo para averiguar los headers de tus páginas. La información de los headers resulta esencial para IKASA pero pedir estos en cada página puede resultar en demasiados recursos consumidos, sobretodo en sites con muchísmo tráfico.

Por ello se brinda la posibilidad de que esos headers ya vengan dados en la propia página visualizada, permitiéndo así evitar esta petición.

Los pasos a seguir para poder realizar este tipo de implementación serían los siguientes:

1. Crea tus headers como variables del datalayer

GTM usa para su configuración una variable llamada dataLayer. Esta varible sirve como mecanismo de comunicación entre tu servidor y la configuración de GTM. Es decir, es el sitio donde los programadores pueden poner información que nosotros vayamos a usar en nuestras herramientas de analítica y marketing.

Por lo tanto este es el lugar ideal para que desde desarrollo nos ayuden a recoger los headers del negocio.

¿Cómo puedo crear o saber cómo es mi dataLayer?

Lo primero que te aconsejamos es que familiarices con lo que es y no es el dataLayer, para ello y dado que no queremos transformar esta documentación en una clase de analitica te recomendamos que accedas a la documetnación oficial del Google en perfecto español: https://developers.google.com/tag-manager/devguide?hl=es

Tras entender con qué estas trabajando te recomendamos que entres en tu proyecto para averiguar si el mismo ya dispone de un dataLayer. Para ello puedes entrar en el HTML de tu página y buscar simplemente la palabra "dataLayer". Si lo encuentras verás ahí mismo que variables contiene.

En el caso de que no lo encuentres no significa que no tengas uno, es posible que dispongas de él pero que esté escondido entre el código javascript de tu negocio. Lo mejor es siempre preguntar a los responsables de analítica o a los desarrolladores del site.

NOTA: si el proyecto nunca había trabajado con Google Tag Manager es problable que no disponga de un dataLayer.

A partir de aquí podremos saber cómo actuar:

Si ya disponemos de un dataLayer solo tendremos que pedir que nos añadan los datos que necesitamos (los headers) al mismo para poder recogerlos con GTM.
Si no disponemos de dataLayer deberemos seguir la documentación oficial de Google Tag Manager para crearlo y luego añadirle estos valores.

¿Qué valores debemos solicitar a desarrollo/it que nos añadan?

Las cabeceras/headers que de otra forma no podemos leer si no es con esa petición extra que realiza IKASA. ¿Qué cabeceras? ¿Todas? Podrias pedir que te las añadiesen todas pero no es seguro hacerlo y sería perder en rendimiento de la página. Lo mejor es que en la petición les digas exactametne qué cabeceras deseas que te añadan y con qué nombres.

En el dataLayer de GTM cada dato que incorpores debe tener un nombre, este nombre es el nombre la propiedad en dataLayer donde vas a añadir dicho dato. Explicado con un ejemplo sería:

var dataLayer = [{

  'nombre' : 'Perico',

  'apellido' : 'De los palotes'

}];

Donde nombre y apellido serían los nombres de las propiedades y "perico" "de los palotes" sus valores.

Esta estructura de nombres es libre, puedes hacer con ella lo que quieras, por lo tanto debes decidir que nombres quieres darle a cada elemento. Lo que no es tan libre es qué elementos vas a necesitar para que IKASA funcione correctamente, estos serían los siguientes:

HEADER: "Status Code" (que contiene el código de estado de la página: 200, 404, 503, etc. Es el más importante de todos ellos.)
HEADER: "x-robots-tag" (que es un sitio donde podemos definir las directrices de robots de la página: noindex, nofollow, etc.)
HEADER: "link" (donde pueden existir varios links pero especialmente nos interesan los que sean rel="canonical")
HEADER: "Content Encoding" y "Content Type" (básicas en el protocolo HTTP para indicar codificaciones y tipos de archivo pero poco importantes en comparación con las 3 anteriores).

¿Cómo deben quedar los headers en el dataLayer?

Estos valores debemos pedir que nos los añadan al dataLayer para poder usarlos en GTM, al hacerlo escogeremos los nombres de propiedad que deseemos, pero cuanto más descriptivos seamos más fácil será para todos entenderlos. De esta forma un dataLayer con los headers que necesita IKASA ya incorporados podría tener este aspecto:

<script>

var dataLayer = [{

  'statusCode' : '200',

  'xRobotsTag' : 'noindex,follow',

  'link' : '',

  'contentEncoding' : 'gzip',

  'ContentType' : 'text/html; charset=UTF-8'

}];

</script>

NOTA: Aunque aquí no pretendemos explicar exactamente como es un dataLayer si queremos recordar de que es importante que este código se incluya antes del código de GTM (en orden de lectura del HTML) pues de otra forma puede dar serios problemas en la medición.

2. Crea en GTM una variable para recoger cada uno de los headers por separado

Ahora que ya disponemos de los headers en el dataLayer, podemos pedirle a GTM que los recoja para usarlso en IKASA. Para ello accede al contenedor en el que has instalado IKASA, ve a la sección de variables y crea una nueva variable por cada propiedad que te han añadido en el dataLayer.

Vigila poner exactamente el mismo nombre de propiedad que sale escrito en el dataLayer (incluyendo espacios y mayúsculas o minúsculas). El más mínimo error hará que GTM no recoja bien su valor.

Si nos basasemos en el ejemplo anterior, para crear la variable que recoge el dato del header x-robots-tag vemos que le hemos puesto por nombre de propiedad "xRobotsTag" por lo que ese es el valor con el que recogerlo en la variable de GTM:

Al final tendremos que tener cada uno de los headers como una variable distinta para poder usarlos, asi que repetiremos este proceso para cada una.

3. Incorporando las variables de GTM a IKASA

Ya hemos hecho el trabajo difícil y solo nos queda hacer el IKASA use las variables que hemos creado. Para ello debemos ir al apartado de variables de GTM y buscar una llamada "config ikasa"

Dentro de la misma selecciona la opción de definir tus propios headers para evitar la petición extra:

Y finalmente rellena cada campo seleccionando cada una de las variables que añadiste anteriormente. En este ejercicio si no estas muy familiarizado con GTM seguramente te ayude hacer click sobre el botón con forma de pieza de lego que aparece en cada campo. Esto desplegará todas las variables disponibles para que con un solo click puedas seleccionarlas.

El resultado debería ser algo parecido al que sigue:

Le damos a guardar la variable y tendremos ya todo configurado.

4. Publicando los cambios para que surtan efecto

GTM por defecto no aplica los cambios que vas haciendo en el sistema. Para ello tenemos el botón ENVIAR.

Además si queires validar que todo funciona bien puedes usar el sistema del que dispone de vista previa.

Una vez le hayas dado a enviar conseguiras que todo funcione como deseas: ya no se realizarán peticiones extra por culpa de IKASA y dispondrás de los headers en el sistema gracias a que estos serán leidos del dataLayer.

Ya dispones de la configuración más optima posible de IKASA.

Report abuse