Introducción al etiquetado en el servidor

El etiquetado en el servidor es una nueva forma de utilizar Google Tag Manager para medir el rendimiento de tu aplicación en todos los dispositivos. Los contenedores de servidor utilizan el modelo de etiquetas, activadores y variables que ya conoces, y ofrecen además nuevas herramientas que te permiten medir la actividad de usuario sin importar dónde ocurra.

El etiquetado habitual, sin etiquetado en el servidor, funciona con un contenedor instalado en la página que envía datos de medición a varios servidores. 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.

Diagrama de un sitio web configurado para usar un contenedor web de Google Tag Manager

Figura 1: Diagrama de un sitio web configurado 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, sino en un servidor que controlas tú.

Diagrama de un sitio web que usa un contenedor de etiquetado en el servidor

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

El servidor se ejecuta en tu propio proyecto de Google Cloud Platform y solo tú tienes acceso a los datos del servidor hasta que decides enviarlo a otro lugar. Tienes control total sobre el formato de los datos y adónde se envían desde el servidor. Las etiquetas se crean con tecnología JavaScript en zona de pruebas. Los permisos te indican lo que puede hacer la etiqueta, y las políticas te permiten poner límites al contenedor.

El servidor recibe las solicitudes web del dispositivo del usuario y las transforma en eventos. Esos eventos los procesan las etiquetas, los activadores y las variables del contenedor en el servidor, que funcionan exactamente igual que en otros tipos de contenedores: los activadores examinan cada evento para identificar determinadas condiciones y, cuando se cumplen, activan las etiquetas que envían los datos del evento para que se procesen.

Este modelo plantea dos preguntas importantes sobre los contenedores de etiquetado en el servidor:

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

La respuesta a ambas preguntas es un nuevo tipo de entidad que se puede utilizar en los contenedores de servidor: un cliente.

Cómo funcionan los clientes

Los clientes sirven para adaptar el software de los dispositivos de los usuarios a tu contenedor de servidor. El cliente recibe datos de medición de un dispositivo, transforma los datos en uno o varios eventos, enruta los datos para que se procesen en el contenedor y, finalmente, agrupa los resultados del procesamiento para enviarlos al solicitante.

Es decir, que un cliente hace muchas cosas. Veamos cada una por separado. En la figura 3 se muestran datos que se envían al contenedor de servidor desde el navegador web del usuario, y datos que se envían desde tu servidor web al contenedor de servidor.

Diagrama de un sitio web que usa un contenedor de etiquetado en el servidor

Figura 3: Cada flujo de datos lo controla un cliente diferente.

El cliente recibe datos de medición de un dispositivo. Supongamos que quieres medir la actividad de usuario en tres lugares: un sitio web, una aplicación para teléfonos y un tostador inteligente. Tu sitio web usa Google Analytics, tu aplicación para teléfonos usa Firebase Analytics y tu tostador usa un protocolo propio llamado "ToastMeasure."

Para medir la actividad en estos tres dispositivos con Google Tag Manager, normalmente se necesitaría un contenedor independiente para cada plataforma. Como el etiquetado en el servidor se ejecuta en un servidor y no en el dispositivo, el mismo contenedor puede procesar la medición de analíticas de las tres plataformas. Sin embargo, hay un problema. Estos dispositivos no se comunican del mismo modo. El protocolo de Google Analytics no es el mismo que el protocolo ToastMeasure. Aquí es donde entran en juego los clientes.

En lugar de estos tres contenedores, el contenedor de servidor tiene tres clientes. Todas las solicitudes que lleguen al contenedor se procesarán en orden de prioridad; primero, el cliente de mayor prioridad. Lo primero que tiene que hacer cada cliente es decidir si es capaz de procesar ese tipo de solicitud. Si es así, el cliente "reclama" la solicitud y pasa a la siguiente fase del procesamiento. Al reclamar la solicitud, impide que los demás clientes se ejecuten. Si el cliente no puede procesar la solicitud, no hace nada y permite que otros clientes reclamen o no la solicitud.

El cliente transforma los datos de la solicitud en uno o varios eventos. Una vez que el cliente ToastMeasure ha reclamado una solicitud, debe transformarla en algo que el resto del contenedor pueda entender, es decir, en un conjunto de eventos.

Los eventos son cosas que ocurren y que quieres medir. Pueden ser cualquier cosa, como 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 entienda.

El cliente ejecuta el contenedor. El cliente ha reclamado la solicitud y la ha convertido en eventos. Ahora entran en juego las etiquetas, los activadores y las variables. El cliente envía cada evento al resto del contenedor para continuar con el procesamiento.

El cliente prepara los resultados para devolverlos al dispositivo. Una vez que el contenedor se ha ejecutado, es el momento de responder al tostador. La respuesta puede adoptar muchas formas. Puede que el cliente simplemente diga "Listo", puede que una de las etiquetas quiera redirigir la solicitud a otro servidor de recogida o puede que una de las etiquetas indique a las luces del tostador que cambien de color. Pase lo que pase, el cliente es el encargado de devolver los resultados al solicitante.

Por suerte, Tag Manager se encarga de casi todo el proceso. Los contenedores de servidor incluyen tres clientes: Google Analytics: App + Web, Google Analytics: Universal Analytics y el Protocolo de medición. Estos clientes te ofrecen las herramientas que necesitas para empezar a medir la actividad de tu aplicación en cuanto hayas creado el contenedor.

Breve ejemplo

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

  1. Un sitio web sencillo que utiliza gtag.js para enviar un evento click a un contenedor de servidor
  2. Un cliente de Google Analytics: App + Web que recibe el evento
  3. Un activador que se activa con un evento click
  4. Una etiqueta de Google Analytics: App + Web que envía los datos del evento a Google Analytics para que los procese

En este ejemplo, supondremos que ya has creado e implementado el contenedor de servidor.

Configurar gtag.js

Primero, configura gtag.js para enviar los datos a tu servidor de etiquetado. Con gtag.js, el envío de datos al servidor de etiquetado funciona igual que el envío de datos a Google Analytics, excepto por un cambio. Al igual que en la página de ejemplo, configura la opción transport_url para que apunte al servidor de etiquetado.

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

  gtag('config', 'G-EXAMPLE', {
    transport_url: 'https://analytics.example.com',
  });
</script>

A continuación, añade una función sendEvent() para gestionar los eventos click:

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

  gtag('config', 'G-EXAMPLE', {
    transport_url: 'https://analytics.example.com',
  });

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

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

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

Cliente de Google Analytics: App + Web

El contenedor necesita que un cliente reciba el evento cuando llegue al servidor. Por suerte, los contenedores de servidor incluyen un cliente de Google Analytics: App + Web preinstalado, por lo que no tienes que hacer nada.

Activadores de clic

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

Configuración del activador

Etiqueta Google Analytics: App + Web

Por último, añade una etiqueta App + Web al activador. Al igual que con los clientes, las contenedores de etiquetado en el servidor vienen con una etiqueta de Google Analytics: App + Web. Solo tienes que crear la etiqueta y ajustar la configuración. Los clientes y etiquetas App + Web están diseñados para complementarse. Esto significa que lo único que tienes que hacer es crear una etiqueta App + Web para que su configuración se obtenga automáticamente de los eventos que proceden del cliente.

Previsualizar el contenedor

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

Cuando hayas terminado de hacer cambios, publica el contenedor de servidor.

Configurar el servidor en modo de producción con servicio propio

Antes de enviar tráfico de producción a tu servidor de etiquetado, te recomendamos encarecidamente que instales el servidor en tu dominio propio y que cambies el modo del dominio al modo de producción.