Administrador de etiquetas de Google: la capa de datos

Una capa de datos puede verse como un objeto que contiene toda la información para pasar y procesar con Google Tag Manager. Este es un concepto un poco técnico. El término capa de datos se utiliza para denotar la estructura de datos utilizada por Google Tag Manager para almacenar, procesar y pasar datos entre su sitio web / blog y el administrador de etiquetas.

Para elaborarlo más, una capa de datos puede alimentar los datos en su herramienta de análisis sobre su visitante. Tomando otra perspectiva para la definición, la capa de datos es en realidad una lista de requisitos y objetivos comerciales para cada subconjunto del contexto digital.

Tomemos un ejemplo de un sitio web de comercio electrónico, los requisitos comerciales pueden incluir:

  • Información transaccional, teniendo los detalles sobre lo que se compró

  • Datos del visitante, sobre quién compró

  • Otros detalles sobre la compra, como dónde se realizó la compra y a qué hora

  • Por último, la información sobre otros factores, como si el visitante se suscribió a las actualizaciones por correo electrónico o no

Entonces, en pocas palabras, la capa de datos contiene información que puede ser utilizada por diferentes herramientas / usuarios / partes interesadas según sea necesario.

En Google Tag Manager, dataLayer es una matriz de JavaScript. Consiste en pares clave-valor. A continuación se muestra un ejemplo rápido de dataLayer con diferentes tipos de datos:

dataLayer = [{
   'products': [{
      'name': 'Western Cotton',
      'tuning': 'High-G',
      'price': 49.75
   },
   {
      'name': 'Fenda Speakers',
      'tuning': 'Drop-C',
      'price': 199
   }],
   'stores': ['Hyderabad', 'Bangloer],
   'date': Sat Sep 13 2017 17:05:32 GMT+0530 (IST),
   'employee': {'name': 'Raghav}
}];

Aquí, tenemos diferentes valores como una matriz de objetos (los productos), valores numéricos (el precio), una matriz de cadenas (tiendas), un objeto de fecha y un objeto (nombre).

En otra nota, cuando coloca el código de contenedor de Google Tag Manager en su sitio web, la capa de datos se crea automáticamente.

En sí mismo, la capa de datos es un concepto bastante complejo de entender a la primera. Este capítulo proporcionará más información sobre cómo interactuar con la capa de datos.

Eventos de la capa de datos

Un ejemplo rápido de un evento de capa de datos puede ser un formulario de suscripción a un boletín, que no se puede rastrear fácilmente con los oyentes automáticos de GTM. Un desarrollador de sitios web puede ayudarlo a impulsar un evento de capa de datos una vez que un nuevo suscriptor haya ingresado su correo electrónico en su sitio web. El código de este evento debería verse así:

push({‘event’: ‘new_subscriber’});

Si lo necesita, puede pedirle a su desarrollador más información, como la ubicación del formulario. Esto es necesario si hay más de un formulario en su sitio web. Se puede lograr usando el siguiente código.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'formLocation': ‘footer’,
   'event': new_subscriber
});

Además, Google Tag Manager envía un determinado conjunto de valores a la capa de datos de las aplicaciones web de forma predeterminada. Estos valores son:

  • gtm.js - Se envía a la capa de datos tan pronto como Google Tag Manager esté listo para ejecutarse

  • gtm.dom - Empujado a la capa de datos cuando el DOM está listo

  • gtm.load - Empujado a la capa de datos cuando la ventana está completamente cargada

Inspeccionar la capa de datos

Como ya sabemos a estas alturas, hay ciertos eventos que se crean como resultado de cualquier interacción en la pantalla.

Por ejemplo, consideremos este simple evento de carga de página. Para ver los eventos, debe tener el depurador en ejecución. Una vez que tenga el depurador en ejecución (en modo de vista previa), visite el blog. Si miras la ventana de resumen en la esquina inferior izquierda, esto es lo que verás:

Step 1 - Haga clic en Ventana cargada y luego en Capa de datos.

La información que se muestra en la pestaña Capa de datos es sobre el evento Window Loaded.

Se muestra como - {event: 'gtm.load', gtm.uniqueEventId: 3}

Además, si desea echar un vistazo más de cerca, debe obtener el soporte de la pestaña de la consola de Chrome. Inspeccionar una capa de datos se vuelve fácil cuando sabe cómo usar el depurador de Chrome de la manera correcta.

Step 2- Cuando esté en su blog, haga clic con el botón derecho en cualquier parte de la página. En el menú contextual que se muestra, haga clic en Inspeccionar. El panel se mostrará en el lado derecho de la pantalla, con la pestaña Elementos activada.

Step 3- Haga clic en Consola. Cuando esté en el modo de consola, haga clic en el icono de la esquina superior izquierda para borrar todos los mensajes que se muestran. Consulte la siguiente captura de pantalla como referencia.

Step 4- Una vez que la ventana esté limpia para los mensajes anteriores, escriba dataLayer, asegúrese de que se haya escrito L en mayúsculas. Google Tag Manager proporciona este nombre a su capa de datos. Sin embargo, sus desarrolladores pueden asignarle un nombre diferente cuando sea necesario.

Step 5- Presione enter después de dataLayer. Mostrará los siguientes detalles.

Hay tres objetos y cada objeto contiene información. Ahora bien, es posible que estos objetos no sean los mismos para usted, como se muestran en la captura de pantalla anterior. El dataLayer es configurable y está en gran medida bajo el control del desarrollador configurarlo según el requisito.

Los valores que están presentes se deben al gadget de Blogger que está en uso en esa posición / espacio en particular. Esta es la razón por la que hay cierta información allí.

Si observa el objeto 1, notará que el evento que se dispara es - gtm.dom . GTM lo dispara mientras carga la página.

De esta manera, puede inspeccionar la capa de datos y agregar información cuando sea necesario.

Variables en la capa de datos

Ahora que estamos familiarizados con la capa de datos, intentemos leer una de las variables usando la interfaz de Google Tag Manager.

Aquí, vamos a intentar leer el evento usando una variable de capa de datos.

Si vemos la figura anterior, el evento variable contiene el gtm.dom . Vamos a crear una variable desde la interfaz de GTM y veremos cómo se refleja en la pestaña Variables en Google Tag Manager.

Step 1- En la interfaz del Administrador de etiquetas de Google, vaya a Variables. Desplácese hacia abajo hasta las variables definidas por el usuario. Haga clic en NUEVO.

Step 2 - Proporcione un nombre a esta nueva variable, llamémosla varEvent.

Step 3 - Haga clic en Elegir un tipo de variable para comenzar la configuración ...

Step 4 - Seleccione Variable de capa de datos de la lista.

Step 5 - Cuando seleccione Variable de capa de datos, se le pedirá que proporcione el nombre y la versión.

Este nombre será de la capa de datos real de Google Tag Manager. Como se mencionó anteriormente, la variable que rastrearemos es - event.

Step 6 - Ingrese el evento en el Nombre de la variable de la capa de datos.

Step 7 - Haga clic en GUARDAR.

Step 8 - Haga clic en Vista previa para ver los cambios reflejados en el depurador.

Step 9- Una vez cargada la página, haga clic en Ventana cargada y luego en Variables. Desplácese hasta la parte inferior de la sección Variables, verá varEvent, como se resalta en la captura de pantalla anterior.

Como se ve en la captura de pantalla anterior, el valor será gtm.load.

De esta manera, se puede inspeccionar la capa de datos y capturar los valores en la capa de datos según sea necesario.