Introducción al etiquetado del servidor

El etiquetado del servidor es una nueva forma de usar Google Tag Manager para instrumentar tu aplicación en todos los dispositivos. Los contenedores de servidores usan el mismo modelo de etiqueta, activador y variable al que estás acostumbrado, a la vez que proporcionan herramientas nuevas que te permiten medir la actividad del usuario dondequiera que ocurra.

Una configuración de etiquetado típica sin el etiquetado del servidor se basa en un contenedor en la página para enviar datos de medición a varios servidores de recopilación. En la Figura 1, se muestra un ejemplo de cómo un contenedor web de Tag Manager que se ejecuta en un navegador web envía datos a varios servidores.

Figura 1: Diagrama de un sitio instrumentado para usar un contenedor web de Google Tag Manager.

Por el contrario, un contenedor de servidor no se ejecuta en el navegador del usuario ni en su teléfono. En cambio, se ejecuta en un servidor que tú controlas.

Figura 2: Ejemplo de una configuración de etiquetado que usa un contenedor de servidor

El servidor se ejecuta en tu propio proyecto de Google Cloud Platform, o en un entorno diferente que elijas, y solo tú tienes acceso a los datos del servidor hasta que decidas enviarlos a otro lugar. Tienes control total sobre cómo se forman esos datos y hacia dónde se enrutan desde el servidor. Las etiquetas se compilan con la tecnología de JavaScript en zona de pruebas. Los permisos te permiten ver lo que puede hacer la etiqueta, y las políticas te permiten establecer límites alrededor del contenedor.

El servidor recibe solicitudes web del dispositivo del usuario y las transforma en eventos. Cada evento es procesado por las etiquetas, los activadores y las variables del contenedor. Las etiquetas, los activadores y las variables en un contenedor de servidor funcionan exactamente igual que en otros tipos de contenedores: los activadores examinan cada evento para buscar ciertas condiciones y, cuando corresponde, activan etiquetas que envían los datos del evento para que se procesen.

Este modelo presenta dos preguntas importantes para los contenedores de servidores:

• ¿Cómo llegan los datos de medición del dispositivo del usuario al contenedor del servidor?
• ¿Cómo se convierten los datos de medición enviados a un contenedor de servidor en un evento?

La respuesta a ambas preguntas es un nuevo tipo de entidad para usar en contenedores de servidores: un cliente.

Cómo funcionan los clientes

Los clientes son adaptadores que vinculan el software en ejecución del dispositivo de un usuario con tu contenedor de servidor. El cliente recibe datos de medición de un dispositivo, los transforma en uno o más eventos, enruta los datos para que se procesen en el contenedor y empaqueta los resultados para enviarlos al solicitante.

¡Eso es mucho! Analicemos cada parte por separado. En la Figura 3, se muestran los datos que fluyen al contenedor de servidor desde el navegador web del usuario y desde tu servidor web al contenedor de servidor.

Figura 3: Un cliente diferente controla cada flujo de datos.

Los clientes reciben datos de medición de un dispositivo. Supongamos que deseas medir la actividad del usuario en tres lugares: un sitio web, una app para teléfonos y una tostadora inteligente. Tu sitio web usa Google Analytics, tu app para teléfonos usa Google Analytics para Firebase y tu tostadora usa un protocolo propietario llamado "ToastMeasure".

Por lo general, la instrumentación de estos tres dispositivos con Google Tag Manager requiere un contenedor diferente para cada plataforma. Dado que el contenedor de servidor no se ejecuta en el dispositivo, el mismo contenedor puede controlar la instrumentación de estadísticas para las tres plataformas de dispositivos. Sin embargo, hay un problema. Estos dispositivos no se comunican de la misma manera. El protocolo de Google Analytics no es el mismo que el protocolo de ToastMeasure. Aquí es donde entran los clientes.

En lugar de esos tres contenedores, tu contenedor de servidor tiene tres clientes. Cada cliente procesará cada solicitud que llegue al contenedor en orden de prioridad, primero el cliente con la prioridad más alta. Lo primero que hará cada cliente será decidir si sabe cómo procesar ese tipo de solicitud. Si es posible, el cliente “reclama” la solicitud y continúa con la siguiente etapa del procesamiento. El acto de reclamar la solicitud evita que se ejecuten clientes posteriores. Si el cliente no puede procesar la solicitud, no hace nada y permite que los demás clientes decidan si controlarla o no.

Los clientes transforman los datos de la solicitud en uno o más eventos. Una vez que el cliente de ToastMeasure reclama una solicitud, debe transformarla en algo que el resto del contenedor comprenda. Ese algo es un conjunto de eventos.

Los eventos son eventos que ocurren y que deseas medir. Pueden ser cualquier valor: start_toasting, finish_toasting o buy_bread. Hay algunas recomendaciones sobre la estructura de los eventos que genera un cliente, pero el único requisito es que el resto del contenedor los comprenda.

Los clientes ejecutan el contenedor. El cliente reclamó la solicitud y la convirtió en eventos. Ahora es el momento de las etiquetas, los activadores y las variables. El cliente pasa cada evento al resto del contenedor para que se procese más.

Los clientes empaquetan los resultados para enviarlos al dispositivo. Una vez que se haya ejecutado el contenedor, es momento de responder a la tostadora. La respuesta puede tener muchos formatos. Tal vez el cliente solo diga “De acuerdo, listo”. Es posible que una de las etiquetas quiera redireccionar la solicitud a otro servidor de recopilación. O tal vez una de las etiquetas le diga a las luces de la tostadora que cambien de color. Independientemente de lo que se deba hacer, es tarea del cliente empaquetar los resultados y devolverlos al solicitante.

Afortunadamente, Tag Manager se encarga de gran parte de esto por ti. Los contenedores de servidor incluyen 2 clientes: Google Analytics 4 y el Protocolo de medición. Estos clientes proporcionan las herramientas que necesitas para comenzar a instrumentar tu aplicación apenas crees tu contenedor.

Ejemplo breve

Veamos un ejemplo rápido para ver cómo encajan todas las piezas. En este ejemplo, crearás lo siguiente:

1. Un sitio web simple que usa gtag.js para enviar un evento click a un contenedor de servidor
2. Un cliente de Google Analytics 4 que recibe el evento.
3. Es un activador que se activa en un evento click.
4. Una etiqueta de Google Analytics 4 que envía los datos del evento a Google Analytics para su procesamiento.

En este ejemplo, suponemos que ya creaste y implementaste tu contenedor de servidor.

Configura gtag.js

Primero, configura gtag.js para que envíe los datos a tu contenedor de servidor. Con gtag.js, el envío de datos a tu contenedor de servidor funciona igual que el envío de datos a Google Analytics, con una modificación. Como en la página de ejemplo que aparece a continuación, configura la opción de configuración server_container_url para que apunte al contenedor del servidor.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });
</script>

Reemplaza TAG_ID por el ID de la etiqueta. Reemplazahttps://analytics.example.com por la URL del contenedor del servidor.

A continuación, agrega una función sendEvent() para controlar los eventos click:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

Reemplaza TAG_ID por el ID de la etiqueta. Reemplazahttps://analytics.example.com por la URL del contenedor del servidor.

Con esta configuración, los controladores de eventos, como la función sendEvent() incluida en este ejemplo, enviarán un evento click a tu contenedor de servidor.

Nota: En el caso de las instalaciones de Tag Manager, consulta "Cómo enviar datos a Tag Manager del servidor" para obtener más detalles sobre cómo configurar tus contenedores.

Cliente de Google Analytics 4

Tu contenedor necesita un cliente para recibir el evento una vez que llega al servidor. Por suerte, los contenedores de servidor incluyen un cliente de Google Analytics 4 preinstalado, por lo que ya completaste este paso.

Activador de clics

A continuación, crea un activador que se active en el evento click. Crea un activador personalizado que se active cuando la variable integrada Nombre del evento sea igual a "click".

Etiqueta de Google Analytics 4

Por último, adjunta una etiqueta de GA4 al activador. Al igual que con los clientes, un contenedor de servidor incluye una etiqueta de GA4. Solo tienes que crear la etiqueta, configurar los parámetros y conectar el contenedor. Los clientes y las etiquetas de GA4 están diseñados para trabajar en conjunto. Esto significa que todo lo que tienes que hacer es crear una etiqueta de GA4 y su configuración se extraerá automáticamente de los eventos que provienen del cliente.

Obtén una vista previa del contenedor

Ahora que el contenedor está configurado, haz clic en Vista previa. Visita tu sitio web en una ventana del navegador diferente. A medida que las solicitudes y los eventos se envíen a tu contenedor de servidor, verás las solicitudes y los eventos en la parte izquierda de la página de vista previa.

Una vez que estés conforme con los cambios, publica el contenedor de servidor.

Configura tu servidor para el modo de producción con la publicación propia

Antes de enviar tráfico de producción a tu contenedor de servidor, te recomendamos instalar el servidor en tu dominio propio y actualizarlo al modo de producción.