Configuración de evento “Purchase” (Compra) GA4 con GTM

Estos pasos se basan en el procedimiento de implementación para un sitio web de reservas de hotel. Se ofrecen como un manual para futuras consultas para mi, y como guía que pueda servir para otros usuarios. Es importante tener en cuenta que los procesos pueden variar según el sitio web, lo que podría requerir ajustes en los procedimientos.

Para configurar el evento Purchase (compra) en Google Analytics 4, debemos tener una cuenta previamente configurada tanto de GA4 como de GTM.

Usaremos Google Tag Manager porque desde aquí fue donde se instaló la etiqueta de Google Analytics 4. Esto significa que, para este punto, la etiqueta de configuración de GA4 y el flujo de datos deberían estar listos en las plataformas correspondientes.

Pasos en GTM

1. Crear una etiqueta de tipo HTML Personalizado.

• Nombrar la etiqueta, ejemplo: “Etiqueta HTML GA4 purchase”.
• Elegir el tipo de etiqueta: HTML personalizado.
• Pegar el siguiente <script>¹ en el espacio de HTML:

<script>
dataLayer = window.dataLayer || [];
var DOMRoomItems =document.querySelectorAll('.voucher__room-item');
var items = [];
var currency = document.querySelector('[data-currency]').getAttribute('data-currency');
 DOMRoomItems.forEach( function(el,i) {
     var item = {
        item_name: el.querySelector('.voucher__room-title').textContent,
        item_id: el.querySelector('.voucher__room-title').textContent.replace(/\ /g,''),
        price: el.querySelector('.voucher__room-subtotal-price-amount').textContent.replace(/\D/g,'')/1,
        quantity: 1
      };
     items.push(item);
 });

if (window.location.href.includes('misitio.')){
 window.dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: document.querySelector("span.voucher__locator-code-value").innerText,
      affiliation: "misitio",
      value: document.querySelector(".voucher__total-price-amount, .voucher__total-price-logged-amount").textContent.replace(/\D/g,'')/1,
      currency: currency,
      items: items
  }
 });
}
</script>

En la parte resaltada del código: misitio. se debe añadir la extensión de dominio correspondiente, como .com, .mx, .net, etc… Dependerá de la extensión del sitio web para el que se está haciendo la configuración. En este caso, solo se dejó con “.” (punto), porque el sitio tiene contenido en .com para su versión en inglés y .mx para su versión en español. De esta manera, especificamos que la configuración se aplique para ambas versiones del sitio.

La linea de: affiliation: “misitio“, – indica la afiliación o asociación del evento de compra con un sitio web específico. Esto es útil cuando se gestionan múltiples sitios web que rastrean eventos de compra. Posteriormente, puede servir para segmentar o filtrar datos en informes analíticos.

2. Crear el activador para la etiqueta de HTML Personalizado previamente configurada.

• Dar clic en la parte de ‘Activación’, después clic en el símbolo ‘+’ esquina superior derecha para crear un nuevo activador.
• Nombrar el activador, ejemplo: “DOM preparado”.
• Elegir tipo de activador – DOM preparado.
• Seleccionar “Todos los eventos preparados DOM”.

3. Guardar Activador y Etiqueta.

Hecho esto, debería verse la etiqueta y el activador así:

4. Crear otra etiqueta de tipo Evento de GA4.

• Nombrar la etiqueta, ejemplo: “Evento GA4 purchase”.
• Elegir el tipo de etiqueta: Google Analytics: evento de GA4.
• Pegar el ID de Medición de la cuenta de GA4 que corresponda al sitio web.
• Asignar al evento el nombre “purchase”.

5. En las opciones adicionales de la configuración de la etiqueta, en “Más ajustes”, marcar la opción que dice “Enviar datos de comercio electrónico”. Luego, seleccionar “Capa de Datos (Data Layer)” como la fuente de datos.

6. Crear activador para la etiqueta de Evento de GA4.

• Dar clic en la parte de ‘Activación’, después clic en el símbolo ‘+’ esquina superior derecha para crear un nuevo activador.
• Nombrar el activador, ejemplo: “Activar purchase GA4”.
• Elegir tipo de activador – Evento personalizado.
• Poner “purchase” en nombre del evento.
• Seleccionar “Todos los eventos personalizados”.

7. Guardar Activador y Etiqueta.

Hecho esto, debería verse la etiqueta y el activador así:

Probar con Vista Previa (Tag Assistance) que la etiqueta: “Etiqueta HTML GA4 purchase” se active una vez que cargue el sitio web, y que la etiqueta: “Evento GA4 purchase” se dispare una vez que el usuario realiza la compra y se muestra la clásica “Thank you Page” o bien la página de confirmación de compra. De ser correcto, vover a GTM y publicar los cambios.

Pasos en GA4

Los datos del evento purchase se podrán visualizar en GA4 después de 24 hrs de la configuración de las etiquetas en GTM.

Para ver el recuento del evento:

• En GA4 ir a “Administrar” (esquina inferior izquierda ⚙️)

• En la sección de “Visualización de datos” seleccionar “Eventos Clave”. Para ver el recuento y valor del evento purchase. Nota: Si el evento purchase no aparece en la lista de la sección “Eventos”, es porque aún no hay suficientes datos registrados para mostrarse.

Para ver el evento desde el informe “En tiempo real”:

• En cuanto se registre un evento purchase aparecerá activo en la parte de Informes “En tiempo real”, en la ficha de “Eventos clave por Nombre del evento”.

Para ver el ID de venta y/o reserva (para este caso):

• En la parte de Informes > Monetización > Resumen, en la ficha de “Ingresos derivados de las compras por Cupón de pedido” dar clic en Ver cupones de pedido.

• En el informe “Cupones de pedidos: Cupón de pedido” ir a la tabla inferior, dar clic en Cupón de pedido y seleccionar “ID de transacción”.

Finished! Hacer pruebas de vista previa de Google Tag Manager para asegurarnos de que las etiquetas se activen correctamente. Para verificar el recuento del evento y otros detalles relevantes, se pueden consultar los informes correspondientes en Google Analytics 4. Recordar que los datos del evento podrán ser visualizados después de 24 horas.