Enviando datos del contenedor web de Google Tag Manager al contenedor del servidor

Tener datos confiables en el servidor de Google Tag Manager es clave para un etiquetado certero en el lado del servidor. Una de las formas más populares de enviar datos de la web al servidor de GTM es Google Analytics 4. GA4 tiene sus limitaciones. Por ello hemos creado Data Tag y Data Client que deberían trabajar juntos para entregar datos de eventos y usuarios desde la web al servidor de GTM.

En este artículo, quiero mostrarle cómo utilizar Data Tag. Estas etiquetas personalizadas envían parámetros desde el contenedor web de Google Tag Manager al contenedor del servidor.Cuando se utilizan juntas con Data Client para el contenedor de servidor de Google Tag Manager, permite enviar capas variables de datos, parámetros personalizados y otra información desde la web al contenedor del servidor. Como resultado, Data Client obtiene datos desde Data Tag al servidor de eventos de Google Tag Manager.

El contenedor del servidor no tiene acceso directo a los datos del lado del navegador —como la capa de datos, las cookies o el contexto de la página—, por lo que estos datos deben enviarse explícitamente desde el contenedor web. Para ello, existen dos métodos disponibles:

• Data Tag, junto con Data Client en el contenedor del servidor para recibir y analizar sus solicitudes, envía variables de la capa de datos y otros parámetros independientemente de cualquier plataforma específica;
• Google Analytics 4, que envía datos a través de una etiqueta de Google configurada con la URL del contenedor del servidor. A continuación se describen ambos métodos.

Paso 1. Instala la plantilla de Data Tag:

1. 1.
   Haz clic en el menú Etiquetas.
2. 2.
   Haz clic en Nuevo.
3. 3.
   Abre la sección Plantillas de tu contenedor de Google Tag Manager para la web → añade la etiqueta de datosdesde la galería de plantillas.
4. 4.
   Haz clic en la pestaña Configuración de la etiqueta.
5. 5.
   Haz clic en Descubre más tipos de etiquetas en la Galería de plantillas de la comunidad → busca Etiqueta de datos → haz clic en Añadir al espacio de trabajo → haz clic en Añadir.

Paso 2. A continuación, configuraremos Data Tag para el evento de visita a la página:

1. 1.
   En Nombre del evento, puedes seleccionar un nombre de evento estándar, añadir un nombre de evento personalizado o añadir un nombre de evento dinámico utilizando la variable {{Event}}.
2. 2.
   Introduce tu URL del lado del servidor de GTM (puedes encontrar tu URL del lado del servidor de GTM dentro de la cuenta de stape.io abriendo el contenedor sGTM y consultando la sección Dominio).
3. 3.
   Marca cómo deseas que se envíen los datos:

   1. 3.1.
      Enviar todo desde DataLayer: enviará toda la información que tengas en la capa de datos web de GTM a los datos de eventos del servidor de GTM.
   2. 3.2.
      Enviar datos comunes: añade a la solicitud page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution y viewport_size.
   3. 3.3.
      Añadir estado de consentimiento: añade el objeto consent_state a la solicitud. Incluye las siguientes propiedades: ad_storage, analytics_storage, functionality_storage, personalization_storage y security_storage.
   4. 3.4.
      Añadir cookies comunes: la etiqueta enviará cookies comunes en «eventData» para evitar algunas limitaciones de las plataformas de comercio electrónico. Por ejemplo, esto es necesario para los eventos que funcionan en las páginas de pago de Shopify.
4. 4.
   En Datos del evento, puedes añadir cualquier dato manualmente a la solicitud. También puedes aplicar transformaciones (como hash, recorte, etc.) o almacenar datos.
5. 5.
   En Datos del usuario, puedes enviar parámetros de usuario y aplicar transformaciones o almacenar datos.
6. 6.
   En Configuración y configuración avanzada encontrarás precisamente eso: opciones de configuración avanzadas. A menos que sepas lo que estás haciendo, es mejor no modificar estos ajustes.
7. 7.
   Asigna a tu etiqueta un nombre descriptivo y haz clic en Guardar.

Paso 3. A continuación, puedes configurar Data Tag para otros eventos. El ejemplo siguiente muestra cómo configurar eventos de comercio electrónico cuando se dispone de Data Layer.

Esta etiqueta activa cada evento de comercio electrónico en la capa de datos. En este ejemplo, todos los eventos de comercio electrónico terminan en _stape, por lo que utilizamos una expresión regular que incluye todos los eventos que contengan _stape.

Ejemplo de la variable que extrae los datos de usuario de la capa de datos.

Paso 4. A continuación, descarga Data Client desde GitHub:

1. 1.
   Sigue este enlace.
2. 2.
   Haz clic en Código → Descargar ZIP.

Paso 5. Ahora, para importar Data Client:

1. 1.
   Abre el contenedor de Google Tag Manager de tu servidor.
2. 2.
   Haz clic en Plantillas.
3. 3.
   En Clientes, haz clic en Nuevo.
4. 4.
   Haz clic en los tres puntos de la esquina superior derecha.
5. 5.
   Haz clic en Importar y selecciona el cliente de datos que has descargado de GitHub (es posible que tengas que descomprimir primero el archivo).
6. 6.
   Una vez finalizada la importación, haz clic en Guardar.

Paso 6. Abre la pestaña Clientes y haz clic en Nuevo → selecciona Data Client → haz clic en Guardar.

Paso 7. Abre las pantallas de vista previa de GTM para web y servidor y comprueba la configuración. Deberías ver que Data Tag se activa en el contenedor de GTM para web y que Data Client analiza las solicitudes de Data Tag en sGTM.

Paso 1. Crea una variable de configuración para la URL del contenedor del servidor. Para ello:

1. 1.
   Haz clic en el menú Variables.
2. 2.
   Haz clic en Nuevo debajo de la barra Variable definida por el usuario.
3. 3.
   Haz clic en la barra Configuración de la variable.
4. 4.
   Selecciona el tipo Etiqueta de Google: Ajustes de configuración.
5. 5.
   Haz clic en Añadir parámetro.
6. 6.
   Introduce los siguientes parámetros:

   1. 6.1.
      Parámetro de configuración: server_container_url.
   2. 6.2.
      Valor: la URL de tu contenedor de servidor de Tag Manager.
7. 7.
   Asigna a tu variable un nombre descriptivo y haz clic en Guardar.

Paso 2. Crea una etiqueta de Google Analytics 4:

1. 1.
   Haz clic en el menú Etiquetas.
2. 2.
   Haz clic en Nuevo.
3. 3.
   Haz clic en la pestaña Configuración de la etiqueta.
4. 4.
   Selecciona Google Analytics → Etiqueta de Google.
5. 5.
   En ID de la etiqueta, introduce el ID de tu cuenta de GA4 (para encontrarlo, ve a tu GA4 → haz clic en Admin → Flujos de datos → selecciona el flujo → busca el ID de medición).
6. 6.
   En Ajustes de configuración, selecciona la variable del contenedor del servidor que has creado anteriormente.
7. 7.
   En Activación, asegúrate de que la opción Inicialización: activador de todas las páginas esté seleccionada.
8. 8.
   Asigna a tu etiqueta un nombre descriptivo y haz clic en Guardar.
9. 9.
   Haz clic en Publicar para que el contenedor entre en funcionamiento.

Paso 3. A continuación, veamos cómo crear un evento de GA4, utilizando el evento «Todos los clics» como ejemplo:

1. 1.
   Haz clic en el menú Etiquetas.
2. 2.
   Haz clic en Nuevo.
3. 3.
   Haz clic en la pestaña Configuración de etiquetas.
4. 4.
   Selecciona Google Analytics → Google Analytics: Evento GA4.
5. 5.
   Introduce tu ID de medición (del menú Flujos de datos de GA4).
6. 6.
   Asigna un nombre descriptivo a tu evento.
7. 7.
   Haz clic en Activación → Todos los clics.
8. 8.
   Asigna un nombre descriptivo a la etiqueta.
9. 9.
   Haz clic en Guardar.

A continuación, tendrás que configurar el envío de los datos de tus eventos a tu plataforma de marketing o análisis. Los pasos exactos dependerán de la plataforma que elijas. Consulta nuestras guías sobre las plataformas más populares para obtener más información:

• Cómo configurar la API de conversiones de Meta
• Cómo configurar el seguimiento de Google Analytics 4 (GA4)
• Cómo configurar el seguimiento de conversiones de Google Ads
• Otras plataformas

El primer caso de uso que me viene a la mente es enviar una capa de datos desde el contenedor web al servidor. Con la ayuda de estos datos, puede nutrir parámetros adicionales a sus etiquetas del lado del servidor.

En la captura de pantalla a continuación, he utilizado estos ajustes para enviar la capa de datos al contenedor de tags del servidor:

• Evento personalizado: {{Event}}
• Habilitado send all from data layer
• Habilitado send commond data

Esta etiqueta de datos se activa en todos los eventos de e-commerce mejorados.

En el modo de vista previa del contenedor del servidor verá que Data Tag envía peticiones en todos los eventos de e-commerce, y Data Client recibió y procesó esas peticiones dentro del contenedor del servidor. Si hago clic en el nombre del evento y compruebo event_data, debería ver todos los parámetros desde la capa de datos web.

Digamos que quiere enviar datos del usuario como su nombre, apellido o correo electrónico a la API de conversión de Facebook para incrementar la calidad de su coincidencia de eventos. Puede utilizar Data Tag para ello. Y si estás utilizando nuestra etiqueta para configurar una etiqueta de la API de conversión de Facebook, la etiqueta FB automáticamente capturará los datos del usuario desde Data Tag.

Quería enviar el correo electrónico, nombre y apellido del usuario todo junto con los eventos de pago en los ejemplos a continuación. He añadido los datos del usuario a la Data Tag en el contenedor web de Google Tag Manager. Estoy utilizando parámetros estáticos para la prueba, pero tú puede pasar estos parámetros dinámicamente utilizando variables. Nuestra etiqueta Facebook captura automáticamente los parámetros de usuario desde el Data Client y envía datos en hash a Facebook.

Para confirmar si Facebook ha recibido estos parámetros, puede añadir la prueba de ID de Facebook a la etiqueta de servidor Facebook y comprobar qué parámetros ve Facebook en la herramienta de prueba de administrador de eventos.

Puede enviar datos desde el contenedor web de Google Tag Manager a su CRM, Slack, webhooks, etc. Este ejemplo muestra cómo puede enviar datos sobre una nueva compra en su sitio al canal de Slack. 

1. Asegúrese que envía los datos correcta desde el contenedor web de Google Tag Manager utilizando Data Tag. 

2. Cree un webhook en Slack. 

3. Dentro del contenedor del servidor, cree una nueva etiqueta y escoja un tipo de etiqueta HTTP Request. 

4. En la URL de destino, añada la URL que has generado en Slack. 

5. HTTP método POST.

6. En el cuerpo Request, añada el texto y parámetros que quieres enviar a Slack. 

{“text”: “Nueva Compra \n email: {{email}}  \n transation_id: {{transaction ID}} \n purchase_value: {{transaction ID}}”}

Si trabaja con Google Tag Manager continuamente, entonces ha habido algún momento en el que la capa de datos (o cualquier otra variable) ha tenido que pasar de una página de su sitio a otra.

Desafortunadamente, Google Tag Manager no tiene una opción para almacenar datos y pasarlos entre páginas. Por ejemplo, es posible enviar el email de un usuario sólo cuando existe en la página. ¿Pero qué sucede si los datos del usuario no están disponibles en la página de agradecimiento, y sólo pueden ser obtenidos antes de la página de agradecimiento?

Utilizando una etiqueta de datos, puede almacenar cualquier variable que quiera para pasarla a otras páginas. 

Como ejemplo, voy a utilizar una evaluación construida con Instapage. Necesitábamos configurar un evento principal para la API de conversión de Facebook. Al enviar la evaluación, el usuario tenía que introducir detalles como correo electrónico, número de teléfono, nombre, etc. Estos datos de usuario estaban disponibles en las páginas de evaluación, pero no en la página de agradecimiento.

Para obtener una alta puntuación de calidad de coincidencia en eventos de Facebook, debería enviar parámetros de usuario junto con el evento CAPI. Por eso utilicé Data Tag para almacenar los datos del usuario en el almacenamiento local. He creado una etiqueta de datos para enviar la aplicación que toma los parámetros de usuario de la capa de datos y los guarda en el almacenamiento local. Esta etiqueta se activa cuando un usuario hace clic en el botón de enviar evaluación.

Para activar el almacenamiento de datos en Data Tag, seleccione la opción de almacenamiento junto a los datos que quieres almacenar.

Entonces, he añadido un nuevo tipo de variable en el contenedor web (puede descargarla utilizando este enlace). Cree nuevas variables para todos los datos que he almacenado.

Finalmente, he creado una Lead Data Tag que envía los datos almacenados al contenedor del servidor.

Puede utilizar Data Client para recuperar cualquier solicitud entrante. Para hacerlo, necesita modificar los Path Settings. Puede ser utilizado, por ejemplo, para recuperar datos desde webhooks. Tenemos este artículo que describe cómo utilizar webhooks entrantes. 

Si no puede ver las peticiones Data Tag dentro del contendor del servidor, puede que sea por la siguiente razón: Data Client no está publicado. Abra el contenedor Servidor y publica Data Client. 

Data Tag y Data Client le darán una fuente de datos sólida para introducir en las etiquetas que utilices dentro del contenedor del servidor. Con la ayuda de esta etiqueta, puede moverse más rápido en el despliegue de nuevos rastreos y tecnologías del lado del servidor. Esta etiqueta le ahorrará tiempo y dinero tanto en IT como marketing – ¡un claro win-win!