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

Disponer de datos fiables en el servidor de Google Tag Manager es la clave para un etiquetado preciso del lado del servidor. Una de las formas más populares de enviar datos desde la web al servidor GTM es Google Analytics 4. GA4 tiene sus limitaciones. Por eso hemos creado Data Tag y Data Client que deben trabajar juntos para enviar los datos de eventos y usuarios desde la web al servidor GTM.

En este artículo, quiero mostrarle cómo utilizar Data Tag. Esta etiqueta personalizada envía parámetros desde el contenedor web de Google Tag Manager al contenedor del servidor. Cuando se utiliza junto con el Data Client para el contenedor del servidor de Google Tag Manager, permite enviar variables de la capa de datos, parámetros personalizados y otros datos de la web al contenedor del servidor. Como resultado, el Data Client recupera la información de la Data Tag en los Eventos del Servidor de Google Tag Manager.  

Cómo enviar datos desde la web de Google Tag Manager al contenedor del servidorCopie el enlace a esta sección

Las empresas comenzaron a aprovechar los contenedores del lado del servidor de Google Tag Manager en los últimos dos años. Algunas de ellas están implementando la combinación de contenedores web y de servidor. Otras quieren trasladar su seguimiento del lado del cliente y empezar a utilizar el seguimiento del lado del servidor. El Data Tag que hemos creado está diseñado para entregar los datos de la web al contenedor del servidor. Los clientes que deseen combinar el seguimiento web y de servidor lo encontrarán especialmente útil.

El server-side tracking permite trasladar la instrumentación de Google Tag Manager al entorno del servidor. En otras palabras, se puede trasladar el seguimiento fuera del navegador y al servidor. Nuestro Data Tag y Data Client resuelven el problema de transportar los datos desde la web de Google Tag Manager al contenedor del servidor. Digamos que usted tiene todos los datos que necesita configurados en el contenedor web, pero el entorno del servidor no puede utilizar los mismos datos Variables de capa, elementos DOM, etc. Nuestro Data Tag y Data Client resuelven el problema de transportar todos los datos desde la web al contenedor del servidor sin necesidad de realizar esfuerzos adicionales.

Con la ayuda del Data Tag, usted puede configurar qué eventos, parámetros de eventos y datos de usuario quiere enviar al contenedor del servidor y cuándo. Por otro lado, nuestro Data Client debe ser colocado dentro del contenedor del servidor para recibir la información del Data Tag y procesarla en los datos de los eventos.

Toda la información se almacenará en su servidor. Data Tag y Data Client permitirán almacenar, moldear y recuperar los datos desde el contenedor web y utilizarlos para establecer etiquetas del lado del servidor. Data Tag y Data Client dentro del contenedor del servidor darán forma y guiarán los datos a los destinos adecuados utilizando etiquetas.

Descripciones de Data TagCopie el enlace a esta sección

Empezaré describiendo todos los campos y opciones que tiene esta etiqueta. Le ayudará a entender mejor qué información puede enviar desde la web al servidor.

Nombre del evento. Tiene dos opciones: seleccionar un evento estándar en el menú desplegable o enviar un evento personalizado. Usando el evento personalizado, usted puede añadir la variable {{event}}, y en este caso, el Data Tag enviará todos los eventos que vea dentro del modo de vista previa.

El dominio del lado del servidor de GTM es un campo obligatorio. Puede encontrarlo en la configuración del contenedor del servidor de Google Tag Manager en URL del servidor de etiquetado. Data Tag utilizará este dominio para enviar solicitudes.

Puede elegir enviar todos los valores de la capa de datos al contenedor del servidor activando Enviar todo desde la capa de datos.

Si habilita Enviar datos comunes, la etiqueta de datos enviará page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size.

Dentro de la pestaña de datos del evento, puedes añadir el parámetro del evento personalizado que quieras enviar al contenedor del servidor. Puede elegir cualquier variable del gestor de etiquetas web o escribir un valor estático o un texto dentro de los campos Nombre y Valor. También hay una opción para modificar los valores con las funciones Trim o To lower case. En el ejemplo de la captura de pantalla, envié el texto del clic de la web al contenedor del servidor alterado con la función de minúsculas.

Con la ayuda de los Datos de Usuario, puede enviar parámetros de usuario. Debe seleccionar el nombre del parámetro en el menú desplegable, añadir un valor estático o utilizar la variable. También hay una opción para transformar el valor con funciones de recorte o a minúsculas. Usted puede utilizar estos campos para enviar los datos del usuario a la etiqueta de Facebook del servidor para aumentar la coincidencia de eventos para su Facebook CAPI. Si utiliza nuestra Data Tag, Data Client y Facebook CAPI, la etiqueta de Facebook tomará automáticamente los datos del usuario de la Data Tag.

Dentro de la Sección de Configuración, puede cambiar el tipo de solicitud (por defecto, el tipo de solicitud es POST, cámbielo a GET), la ruta y las versiones de protocolo.

La Configuración avanzada es la configuración estándar que tiene dentro de todas las etiquetas web de Google Tag Manager.

Ventajas de Data TagCopie el enlace a esta sección

Por ahora, hay dos maneras de enviar datos desde la web al contenedor del servidor: usando GA4 tag y Data Tag/Data Client.

Data Tag/Data Client tiene varias ventajas sobre GA4:

1. Data Tag puede enviar arrays de datos. En comparación, la etiqueta GA4 sólo puede enviar variables y devuelve un error si se intenta enviar un array.

2. Con la ayuda del Data Tag/Data Client, puede enviar toda la información de la capa de datos de la web a los datos de eventos dentro del contenedor del servidor. Mientras que con GA4, usted tendrá que enviar cada variable manualmente.

3. Si desea almacenar los datos del usuario en las variables de GTM, entonces utilice un Data Tag. Por ejemplo, se puede utilizar cuando el orm envía tiene datos de usuario disponibles en los clics de los botones, pero no en las páginas de agradecimiento. Demostraré cómo funciona esta función más adelante en la sección de Casos de Uso de Data Tag.

4. Data Tag/Data Client permite transformar los datos. Por ejemplo, datos hash, minúsculas, trim.

Cómo enviar datos desde la web al contenedor del servidor utilizando Data Tag/Data ClientCopie el enlace a esta sección

Voy a mostrar cómo utilizar Data Tag/Data Client para el evento de compra. Esta lógica de uso de Data Tag/Data Client es la misma para todos los eventos.

1. Añada Data Tag al contenedor GTM Web desde la Galería de plantillas.

2. Descargue el Cliente de Datos desde GitHub -> Abra la pestaña Plantilla dentro del contenedor Servidor -> Haga clic en Nuevo bajo la sección Clientes -> Haga clic en los tres puntos de la esquina superior derecha -> Import -> Haga clic en Save.

3. Hay que abrir contenedor web -> Crear nueva etiqueta -> Tipo de etiqueta Datos al lado del servidor de GTM -> Seleccionar el nombre del evento -> Añadir la URL del lado del servidor de GTM -> Añadir los datos del evento (como el nombre del producto, SKU, ID, etc.) -> Añadir los datos del usuario.

4. Seleccione el trigger para el evento y haga clic en guardar.

5. Abra el contenedor del Servidor -> Abra el Cliente -> Agregue un nuevo cliente -> Client type Request Data a Event Data -> Haga clic en Guardar. Publique el contenedor Servidor.

6. Abra el modo de vista previa del contenedor web y del servidor y compruebe que el contenedor del servidor ve la información de Data Tag. Si no ve las solicitudes de Data Tag, actualice el encabezado HTTP de la vista previa del servidor GTM.

7. Una vez que haya verificado que el Data Tag y el Data Client funcionan correctamente, publique un contenedor web y de servidor.

Casos de uso de Data TagCopie el enlace a esta sección

1. Capas de datos de la web al contenedor del servidor.Copie el enlace a esta sección

El primer caso de uso que se me ocurre es el envío de una capa de datos desde el contenedor web al servidor. Con la ayuda de estos datos, puede alimentar parámetros adicionales a sus etiquetas del lado del servidor. En la captura de pantalla de abajo, he utilizado estos ajustes para enviar la capa de datos al contenedor del servidor:

• Custom event: {{event}}

• Enabled send all from data layer

• Enabled send common data

Esta etiqueta de datos se dispara cuando un usuario pasa por el proceso de checkout en el sitio.

Si voy al modo de vista previa del contenedor web y del servidor, puedo ver que Data Tag se disparó tres veces en el contenedor web, y Data Client recibió y procesó los tres eventos dentro del contenedor del servidor. Si hago clic en el nombre del evento y compruebo request_data, puedo ver todos los parámetros de la capa de datos web.

2. Enviando los datos del usuario a la API de conversión de Facebook.Copie el enlace a esta sección

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

Quería enviar el correo electrónico, el nombre y el apellido del usuario junto con los eventos de pago en los ejemplos siguientes. Añadí los datos del usuario al Data Tag en el contenedor Web Google Tag Manager. Estoy utilizando parámetros estáticos para la prueba, pero usted puede pasar estos parámetros dinámicamente utilizando variables. Nuestra etiqueta de Facebook captura automáticamente los parámetros del usuario desde el cliente de datos y envía la información con hash a Facebook.

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

3. Envíe datos personalizados desde el contenedor web a cualquier otro servidor.Copie el enlace a esta sección

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

1. Asegúrese de que envía la información correcta desde el contenedor web de Google Tag Manager mediante Data Tag.

2. Genere un webhook https://api.slack.com/tutorials/slack-apps-hello-world en Slack.

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

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

5. HTTP método POST.

6. En el Request body, añada el texto y los parámetros que desee enviar a Slack.        

{"text": "New Purchase \n email: {{email}}  \n transation_id: {{transaction ID}} \n purchase_value: {{transaction ID}}"}

4. Guarde los datos.Copie el enlace a esta sección

Si usted trabaja con Google Tag Manager con bastante frecuencia, entonces ha habido un momento en que la capa de datos (o cualquier otra variable) tuvo que pasar de una página de su sitio a otro.

Desafortunadamente, Google Tag Manager no tiene una opción para almacenar datos y pasarlos entre las páginas del sitio. Por ejemplo, es posible enviar un correo electrónico al usuario sólo cuando existe en la página. Pero, ¿qué ocurre si los datos del usuario no están disponibles en la página de agradecimiento y sólo se pueden capturar desde la página anterior a la de agradecimiento?

Usando un Data Tag, usted puede almacenar cualquier variable que quiera pasar a otras páginas.

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

Para tener una alta puntuación de calidad de coincidencia de eventos en Facebook, debe enviar los parámetros del usuario junto con el evento CAPI. Por eso usé Data Tag para almacenar los datos del usuario en el almacenamiento local. Creé un Data Tag de la aplicación de envío que toma los parámetros del usuario de la capa de datos y los almacena en el almacenamiento local. Esta etiqueta se dispara cuando un usuario hace clic en el botón de evaluación de envío.

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

Luego, agregué un nuevo tipo de variable en el contenedor web (puede descargarlo usando este enlace.)  Cree nuevas variables para todos los datos que ha almacenado.

Y por último, he creado un Lead Data Tag que envía los datos almacenados al contenedor del servidor.

5. Recuperar cualquier solicitud entrante.Copie el enlace a esta sección

Puede utilizar el Data Client para recuperar las solicitudes entrantes. Para ello, debe modificar Path Settings. Se puede utilizar, por ejemplo, para recuperar datos de Webhooks. Tenemos este artículo que describe cómo utilizar los webhooks entrantes.

Problemas comunes con Data Tag y Data Client Copie el enlace a esta sección

Si no puede ver las solicitudes de Data Tag dentro del contenedor del servidor, puede suceder por las siguientes razones:

1. El Data Client no está publicado. Abra el contenedor del servidor y publique el cliente de datos.

ConclusiónCopie el enlace a esta sección

Data Tag y Data Client proporcionarán una sólida fuente de información para introducir en las etiquetas que utilice dentro del contenedor del servidor. Con la ayuda de esta etiqueta, podrá avanzar más rápidamente en el despliegue de nuevas tecnologías y seguimientos del lado del servidor. Esta etiqueta ahorrará tiempo y costes tanto a los departamentos de TI como a los de marketing – ¡un claro éxito para todos!