Fri. Dec 6th, 2024

#GTMTips: cree un cliente de Common Analytics personalizado para etiquetado del lado del servidor


Puedes utilizar Etiquetado del lado del servidor en Administrador de etiquetas de Google para crear su propio proxy de Common Analytics personalizado.

Este proxy viene en forma de un nuevo Cliente plantilla personalizadaque toma el entrante /gather solicitudes y las envía a Google Analytics. Al hacerlo, también devuelve el _ga galleta en un Set-Cookie encabezado, evitando así que Safari Prevención de seguimiento inteligente desde limitar su vencimiento a solo 7 días.

Quizás también te interese leer lo que La propia solución de Google es para migrar de cookies de JavaScript a aquellas configuradas en encabezados HTTP.

También he creado un vídeo que es related aunque un poco más avanzado que este tutorial escrito.

¡NOTA! El vídeo tiene una omisión importante. Al crear el Cliente plantilla, asegúrese de actualizar el permiso “Envía solicitudes HTTP” para incluir “Permitir dominios de Google”. De lo contrario, el proxy de Analytics.js no funciona.

Si el vídeo no funciona, puedes verlo. aquí.


X


El boletín a fuego lento

Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.

Consejo 117: cree un cliente de Common Analytics

Para que todo funcione, necesitas un par de cosas:

  • Un totalmente funcional Etiquetado del lado del servidor configuración.
  • Un Cliente que se ejecuta en el contenedor del Servidor (lo crearemos ahora).
  • Una etiqueta de Common Analytics en el contenedor del servidor (también daré instrucciones sobre esto).
  • Modificaciones a todo las etiquetas de Common Analytics que se activan en el contenedor internet (sí, también ayudaré con esto).

Usarás etiquetas regulares de Common Analytics en el contenedor internet, pero configurarás su URL de transporte para apuntar al punto remaining de su servidor. Estas etiquetas solo se utilizarán para enviar los datos al contenedor del servidor y no directamente a Google Analytics.

Próximo, todo Las etiquetas de Common Analytics en el contenedor internet necesitarán la siguiente modificación en sus campos para configurar (usando un Variable de configuración de Google Analytics es recomendado).

Este campo evita que el JavaScript de Common Analytics actualice el _ga Galleta. Quieres hacer esto porque todo el propósito del Set-Cookie El encabezado que configuraremos en el contenedor del servidor es para evitar que el navegador internet configure el _ga galleta con JavaScript. Safari evita que todas las cookies configuradas en JavaScript tengan una caducidad superior a 7 días.

Recuerde, este campo debe estar configurado en todo Etiquetas de Common Analytics. Incluso una sola etiqueta sin esto reescribirá la cookie cuando se lively y, por lo tanto, anulará cualquier beneficio que usted haya obtenido del Cliente personalizado.

Finalmente, el propio proxy.

Construya el cliente

Para construir el proxy, necesita un nuevo Plantilla de cliente, integrado en el contenedor del servidor. En la interfaz de usuario del contenedor del servidor, busque Plantillas y haga clic para crear un nuevo Cliente plantilla.

En la primera pestaña, dale un nombre a la plantilla y una breve descripción. Si lo deseas, también puedes agregar una imagen de icono.

Para esta plantilla en explicit, puede omitir el Campos pestaña. No necesitamos que el Cliente admita ninguna personalización.

En Códigocopie y pegue lo siguiente:

const claimRequest = require('claimRequest');
const extractEventsFromMpv1 = require('extractEventsFromMpv1');
const getCookie = require('getCookieValues');
const getRemoteAddress = require('getRemoteAddress');
const getRequestHeader = require('getRequestHeader');
const isRequestMpv1 = require('isRequestMpv1');
const returnResponse = require('returnResponse');
const runContainer = require('runContainer');
const setCookie = require('setCookie');
const setPixelResponse = require('setPixelResponse');
const setResponseHeader = require('setResponseHeader');

// Get Person-Agent and IP from incoming request
const ua = getRequestHeader('user-agent');
const ip = getRemoteAddress();

// Verify if request is Measurement Protocol
if (isRequestMpv1()) {
  // Declare the request
  claimRequest();
  
  const occasions = extractEventsFromMpv1();
  const max = occasions.size - 1;
  occasions.forEach((occasion, i) => {
    // Except the occasion had IP and user-agent overrides, manually
    // override them with the IP and user-agent from the request
    // That method the GA gather name will seem to have originated
    // from the person's browser / machine.
    if(!occasion.ip_override && ip) occasion.ip_override = ip;
    if(!occasion.user_agent && ua) occasion.user_agent = ua;
    
    // Go the occasion to a digital container
    runContainer(occasion, () => {
      
      if (i === max) {
        
        // Rewrite the _ga cookie to keep away from Safari expiration.
        const ga = getCookie('_ga');
        if (ga && ga.size) {
          setCookie('_ga', ga(0), {
            area: 'auto',
            'max-age': 63072000,
            path: '/',
            safe: true,
            sameSite: 'lax'
          });
        }
        setPixelResponse();
        
        // Be sure that no CORS errors pop up with the response
        const origin = getRequestHeader('Origin');
		if (origin) {
          setResponseHeader('Entry-Management-Enable-Origin', origin);
          setResponseHeader('Entry-Management-Enable-Credentials', 'true');
        }
        returnResponse();
      }
    });
  });
}

Una vez que las API se han cargado, el Cliente ingresa la dirección IP de la fuente y la cadena de Agente de usuario con esto:

const ua = getRequestHeader('user-agent');
const ip = getRemoteAddress();

A continuación, el isRequestMpv1 La API se utiliza para verificar automáticamente si la solicitud HTTP entrante es una solicitud de Protocolo de medición (v1, es decir, Common Analytics). Si es así, entonces el Cliente reclamos la solicitud y, por tanto, impide que otros Clientes la procesen.

El resto del Cliente se ocupa de iterar a través de todos los eventos en la solicitud, analizándolos automáticamente en el esquema de evento requerido (usando el extractEventsFromMpv1 API) y ejecutar el contenedor con todos los eventos del lote.

Normalmente habrá sólo un evento en cada lote.

if (!occasion.ip_override && ip) occasion.ip_override = ip;
if (!occasion.user_agent && ua) occasion.user_agent = ua;

Las dos líneas de código anteriores tienen una función muy importante. ellos toman el del usuario Dirección IP y cadena de agente de usuario y páselos al objeto de datos del evento para que la etiqueta Common Analytics pueda agregarlos a la solicitud saliente a Google. Si no los configura, la dirección IP y la cadena Person-Agent se configurarán como las del propio contenedor del servidor, lo cual no es muy útil.

Una vez que el contenedor ha procesado todos los eventos, se ejecuta el siguiente bloque de código:

const ga = getCookie('_ga');
if (ga && ga.size) {
  setCookie('_ga', ga(0), {
    area: 'auto',
    'max-age': 63072000,
    path: '/',
    safe: true,
    sameSite: 'lax'
  });
}

Este fragmento de código verifica la solicitud HTTP entrante de una cookie denominada _ga. Si encuentra una, reescribe la cookie con un Set-Cookie encabezado, convirtiéndolo así en una cookie HTTP y ayudando a resolver problemas de caducidad con el ITP de Safari.

setPixelResponse() configura automáticamente la respuesta al origen de la solicitud para que se parezca a una imagen GIF de 1×1 con encabezados que eliminan el caché. Finalmente, returnResponse() se invoca para indicar que el Cliente ha completado su trabajo y puede responder a la fuente de la solicitud inicial.

Establecer los permisos

Mientras estás en el editor de plantillas, visita el Permisos pestaña.

Establezca los permisos de la siguiente manera:

  • Accede a la respuesta: Cualquier
  • Lee los valores de las cookies: _ga
  • Solicitud de lectura: Cualquier
  • Establece una galleta: Establecer como en la imagen de arriba.

Una vez que haya terminado con los permisos, puede Ahorrar la plantilla y salga del editor de plantillas.

Cree el cliente, el activador y la etiqueta

A continuación, vaya a Clientela y haga clic en el Nuevo botón para crear un nuevo Cliente.

Elija su nueva plantilla de Cliente de la lista de tipos de Cliente disponibles. A continuación, establezca el Prioridad campo a un valor alto. Es importante que este valor sea mayor que cualquier otro Cliente Common Analytics que pueda tener en el contenedor.

Asigne al Cliente un nombre descriptivo (lo necesitará en breve) y luego ahorrar este Cliente.

Luego, ve al Etiquetas UI y haga clic en Nuevo para crear una nueva etiqueta.

Elegir Google Analytics: análisis common como tipo de etiqueta. No es necesario configurar esta etiqueta de ninguna manera.

Bajo Desencadenanteshaga clic en el área del activador para seleccionar un activador.

En la superposición, haga clic en el icono azul + en la esquina superior derecha para crear un nuevo disparador.

Configure el disparador para que se parezca a lo anterior. Sólo necesita la única condición. El nombre que está comparando es el nombre que acaba de darle al nuevo Cliente.

Si no ves nombre del cliente en la lista de variables disponibles, significa que no lo ha habilitado como variable incorporada todavía. Seleccionar Elija la variable incorporada en el menú desplegable y seleccione Nombre del cliente en la superposición que aparece.

Una vez hecho esto, guarde el disparador. Luego, guarde la etiqueta.

Ahora tienes el Clienteel desencadenary el etiqueta.

¡Estás listo para probar toda la configuración!

Vista previa y prueba

Haga clic en el Avance en el contenedor del servidor. Debería abrirse una nueva pestaña con el contenedor del servidor. Panel de vista previa.

En tus contenedor internetde manera related haga clic en el Avance botón.

Ahora debería tener tanto su contenedor internet como el contenedor del servidor en modo Vista previa.

A continuación, navegue hasta su sitio y haga algo para activar una de las etiquetas de Common Analytics que diseñó para la recopilación del lado del servidor. Una vez que se activa la etiqueta, verifique el panel Vista previa de su contenedor de Servidor. Debería ver algo como esto:

Si lo ve y no hay errores en la pestaña Errores, ¡debería funcionar!

Puede depurar más seleccionando el Análisis common etiqueta y luego haciendo clic en el Solicitudes HTTP salientes caja. Esto abre los detalles de la solicitud a Google Analytics.

Consulte el informe en tiempo actual en su vista de Google Analytics (usted tener creó una propiedad separada para sus visitas de etiquetado del lado del servidor, ¿verdad?) y asegúrese de que los datos fluyan.

Finalmente, revisa las cookies en tu navegador. El _ga la cookie debe tener el valor de Seguro ajustado a true y el valor de Mismo sitio ajustado a Lax. Si eso es lo que ve, ¡la reescritura de cookies funcionó!

Resumen

Hay muchas cosas nuevas aquí, por lo que no me sorprendería si esto fuera difícil de configurar. Sin embargo, si sigue esta guía con diligencia y se asegura de que no se activen etiquetas no autorizadas sin cookieUpdateel Cliente debería hacer bien su trabajo.

Si tiene problemas, hágamelo saber en los comentarios y podremos echar un vistazo juntos.

El etiquetado del lado del servidor es el nuevo paradigma para las soluciones de etiquetado de Google. Puedo ver muchas cosas increíbles que puedes hacer con él en el futuro, pero ahora también puedes utilizarlo para mejorar la calidad de tus datos de forma incremental con soluciones como esta.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *