Comercio electrónico de GA4 (Tag Manager): Envía eventos de GA4

En esta guía, se describe cómo actualizar una implementación existente de comercio electrónico de Universal Analytics (Tag Manager) para usar eventos de comercio electrónico de Google Analytics 4.

Visita el Centro de migración para desarrolladores para obtener guías y recursos de migración adicionales.

Resultado

El resultado de seguir esta guía es que tu implementación existente de Universal Analytics se actualizará para utilizar los eventos y parámetros de comercio electrónico de GA4. Esta implementación de comercio electrónico actualizada también se utilizará para enviar datos de comercio electrónico a una nueva propiedad GA4. Tus informes de comercio electrónico de UA se seguirán propagando con datos, y comenzarás a recibir datos en tu nueva propiedad Google Analytics 4.

Precaución: Si bien los eventos de comercio electrónico de Google Analytics 4 se traducen automáticamente para que sean compatibles con Universal Analytics, no todos los eventos de Google Analytics 4 tienen un evento equivalente en Universal Analytics. Faltan datos en los informes de comercio electrónico de Universal Analytics para estos eventos. Consulta Compensaciones y consideraciones a continuación.

Antes de comenzar

1. Usa la herramienta de asistencia de migración de comercio electrónico para confirmar que la siguiente información describa tu implementación actual:

   • Utilizas una propiedad Universal Analytics
   • Tu sitio utiliza Tag Manager y la capa de datos para enviar eventos de comercio electrónico.

2. Revisa las opciones de migración para las implementaciones de comercio electrónico para obtener información sobre las compensaciones de cada opción. Confirma que realmente deseas seguir esta guía para usar los eventos de comercio electrónico de Google Analytics 4 en tu implementación existente de Universal Analytics.

3. Consulta la referencia de compatibilidad de eventos para aprender cómo se traducen los eventos de UA cuando se envían a una propiedad GA4.

Concesiones y consideraciones

Revisa y considera la siguiente información para comprender a fondo las implicaciones de usar los eventos de comercio electrónico de Google Analytics 4 con tu implementación de comercio electrónico existente de Universal Analytics (Tag Manager).

Ventajas	Desventajas
Te permite ver datos de comercio electrónico en los informes de GA4 y Universal Analytics. El uso de eventos y parámetros de GA4 garantiza informes completos de comercio electrónico de GA4.	Requiere que cambies tus eventos de comercio electrónico existentes. No todos los eventos y parámetros de GA4 tienen equivalentes en Universal Analytics. Los parámetros shipping_tier, discount, currency, location_id, promotion_name y promotion_id no tienen equivalentes de Universal Analytics y no aparecerán en tus informes de Universal Analytics.

Implementación

Un objetivo clave de la implementación es hacer la transición de usar la capa de datos a usar la API de gtag.js. Para asegurarte de que no haya interrupciones en la medición mientras realizas esta transición, en las siguientes instrucciones, se recomienda que todas las actualizaciones de configuración de etiquetas se completen primero y, luego, las actualizaciones de la capa de datos.

1. Cómo crear y configurar una propiedad GA4 nueva

Completa los siguientes pasos para crear y configurar tu nueva propiedad Google Analytics 4:

1. Crea una nueva propiedad Google Analytics 4.
   • Usa el Asistente de configuración de GA4 para crear automáticamente una propiedad GA4 nueva y copiar los siguientes parámetros de tu propiedad Universal Analytics: nombre de la propiedad, URL del sitio web, zona horaria y configuración de moneda. Sin embargo, desmarca la opción Habilitar la recopilación de datos con tus etiquetas existentes para inhabilitar la función de etiqueta conectada del sitio. Como alternativa, si no deseas copiar ningún parámetro de configuración de tu propiedad Universal Analytics, crea una propiedad Google Analytics 4 sin el Asistente de configuración de GA4.
2. Agrega la etiqueta de Google.
   1. Abre el contenedor de Google Tag Manager para tu implementación existente de Universal Analytics.
   2. Haga clic en Etiquetas > Nueva.
   3. Haz clic en Configuración de la etiqueta (Tag Configuration) y selecciona Etiqueta de Google (Google Tag).
   4. Ingresa el ID de etiqueta de tu propiedad Google Analytics 4.
   5. Selecciona la opción para activar la etiqueta en Todas las páginas (o en el subconjunto de páginas que deseas medir).
   6. Guarde y publique la configuración de la etiqueta.

2. Agrega una configuración de etiqueta del evento de GA4 para medir los eventos de comercio electrónico.

Completa los siguientes pasos para agregar una etiqueta de evento de GA4 y enviar eventos y parámetros de comercio electrónico a tu propiedad GA4:

1. Crea una nueva Configuración de la etiqueta y selecciona Evento de GA4.
2. En Nombre del evento, usa la variable integrada . Esto usará el nombre del evento de comercio electrónico de GA4 que se envió con la API de gtag.js.
3. En Más opciones de configuración y, luego, en Comercio electrónico, marca Enviar datos de comercio electrónico.
4. En Fuente de datos, selecciona Capa de datos.
5. Haz clic en Guardar. Se agregarán activadores en pasos posteriores para que puedas ignorar de forma segura cualquier advertencia sobre activadores faltantes.

Punto clave: No es necesario que crees varias etiquetas del evento de GA4. En su lugar, se puede utilizar una sola etiqueta del evento de GA4 que usa la variable Event integrada para todos los eventos de comercio electrónico. Los activadores de etiquetas definirán los eventos específicos de comercio electrónico de GA4 que activan la etiqueta.

3. Actualiza los parámetros de configuración de tus etiquetas de comercio electrónico de UA para utilizar eventos de GA4

Para cada configuración de etiqueta de comercio electrónico de Universal Analytics, deberás agregar un activador para activar el evento de comercio electrónico de GA4 equivalente y habilitar la opción de leer los datos de eventos de comercio electrónico de GA4.

Para cada evento de comercio electrónico de Universal Analytics, los pasos generales para actualizar a un evento de GA4 correspondiente son los siguientes:

1. En el caso del evento de comercio electrónico de UA que deseas actualizar, utiliza la información disponible en los artículos Compatibilidad entre eventos de UA y de GA4 y Parámetros comparables para las tablas de UA y GA4 o el Asistente de migración de comercio electrónico para identificar el nombre del evento de GA4 correspondiente. Por ejemplo, si actualizas un evento para medir los clics en productos, el nombre del evento de GA4 sería select_item.
2. Actualiza la configuración de la etiqueta de Universal Analytics para el evento:
   1. En Más opciones de configuración y, luego, Comercio electrónico, marca Usar el esquema de GA4 para asegurarte de que tus etiquetas existentes lean correctamente el evento de comercio electrónico de GA4 actualizado. Puedes hacer este cambio antes de migrar de la capa de datos a la API de gtag.js.
   2. En la sección Activación (Triggering), agrega un activador de Evento personalizado nuevo, en el que Nombre del evento (Event Name) es el evento de comercio electrónico de GA4 que se identificó antes. Después de completar este paso, deberías tener al menos 2 activadores: el original que activó la etiqueta y el activador recién agregado, que se activará una vez que completes la transición a los eventos de GA4. El activador adicional sirve para garantizar que no haya interrupciones en los datos durante la transición de la capa de datos a la API de gtag.js, como se describe más adelante en este documento.
   3. Guarde los cambios.
3. Agrega el activador nuevo a la etiqueta del evento de GA4:
   1. Abre la etiqueta del evento de GA4 que configuraste anteriormente para enviar eventos y parámetros de comercio electrónico a tu propiedad GA4.
   2. En la sección Activación, agrega el activador Evento personalizado que creaste anteriormente (p.ej., select_item) para asegurarte de que la etiqueta del evento de GA4 se active para la actividad de comercio electrónico asociada después de la transición a los eventos de GA4.
   3. Guarde los cambios.
4. Repite los pasos anteriores para cada actividad de comercio electrónico de Universal Analytics. Publica tus cambios en Tag Manager cuando se hayan completado.

Precaución: Asegúrate de habilitar la opción Usar el esquema de GA4 en la configuración de tu etiqueta de Universal Analytics. Si esta opción no está habilitada, los informes de comercio electrónico de UA no se propagarán de forma correcta.

4. Habilita la API de gtag.js

Para actualizar tu implementación de comercio electrónico de UA a GA4, te recomendamos que pases de usar la capa de datos a usar la API de gtag.js, que funciona en coordinación con Tag Manager.

Para habilitar la API de gtag.js, agrega el siguiente fragmento de código en la parte superior de la página encima del fragmento de contenedor de Tag Manager:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

Precaución: Si anteriormente seguiste la sección Cómo agregar variables de capa de datos a una página y ya declaraste una variable de capa de datos en la página, el fragmento anterior debería colocarse después de tu declaración de capa de datos existente.

5. Transición del uso de la capa de datos al uso de gtag.js

Una vez que hayas completado todas las actualizaciones de configuración de la etiqueta y hayas habilitado la API de gtag.js, tendrás todo listo para pasar de usar la capa de datos a usar la API de gtag.js.

Para obtener ayuda con la actualización, usa los siguientes recursos:

• La Guía para desarrolladores de comercio electrónico (GA4) para obtener información sobre cómo enviar eventos de comercio electrónico de GA4 con la API de gtag.js y configurar la etiqueta y los activadores de evento de GA4 en Tag Manager
• La tabla Compatibilidad entre los eventos de UA y de GA4 te permite encontrar el nombre del evento de GA4 adecuado para una actividad de comercio electrónico de Universal Analytics. Por ejemplo, si actualizas un evento para medir las impresiones de productos, el nombre del evento de GA4 sería view_item_list.
• Tabla Parámetros comparables para UA y GA4 que te ayudan a asignar los nombres de los parámetros de comercio electrónico de UA a los nombres de parámetros de comercio electrónico de GA4 equivalentes.
• El asistente de migración de comercio electrónico para validar que actualizaste tus eventos de comercio electrónico de forma correcta.

Para cada evento de comercio electrónico de Universal Analytics, los pasos generales para hacer la transición de usar la API de dataLayer.push() con eventos de comercio electrónico de UA a usar la API de gtag.js con el evento de comercio electrónico de GA4 correspondiente son los siguientes:

1. Actualiza los nombres de eventos personalizados con el nombre de evento de GA4 correspondiente. Por ejemplo, si actualizas un evento para medir un clic en un producto que utiliza un nombre de evento personalizado de productClick, el nombre del evento actualizado para GA4 sería select_item. El nombre del evento de GA4 debe coincidir con el nombre del evento de un activador que configuraste con anterioridad.

   Por ejemplo, el siguiente evento de clic en el producto que usa la capa de datos

   dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
   

   Cuando se realiza la transición a la API de gtag.js, se vuelve lo siguiente:

   gtag('event', 'select_item', {<ecommerce_parameters>});
   

2. Actualiza los parámetros de comercio electrónico para que coincidan con lo que se espera para el evento de GA4. Asegúrate de utilizar Parámetros comparables para UA y GA4, ya que se realizaron cambios en los nombres de los parámetros. Propaga el valor del parámetro de GA4 con el valor del parámetro de UA que coincida.

Nota: Una vez que se complete la migración del uso de la API de dataLayer.push() a la API de gtag.js, puedes quitar de manera opcional cualquier activador de evento personalizado que se active en función de los eventos anteriores de la capa de datos de UA.

Ejemplo: Actualiza un evento de UA a GA4

En el siguiente ejemplo, se muestra cómo crear un evento de GA4 equivalente para una actividad de comercio electrónico de clic en el producto implementada en Tag Manager para Universal Analytics.

Antes: Cómo enviar eventos de UA con la capa de datos

El siguiente artículo Mide un clic en el producto de Universal Analytics, implementado con la capa de datos. El nombre del evento personalizado es productClick.

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

En Tag Manager, la configuración de la etiqueta de Universal Analytics es la siguiente:

Tipo de etiqueta : Universal Analytics
Tipo de seguimiento : Evento
Categoría del evento: Ecommerce
Acción del evento: Product Click
Habilita las funciones de comercio electrónico mejorado: true
Utiliza la capa de datos: true
Activador: event es igual a productClick

La configuración del activador está establecida para activar la etiqueta cuando el evento productClick se envía a la capa de datos:

Después: Envío de eventos de GA4 con gtag.js

Actualizaciones de la configuración de etiquetas para UA

En Tag Manager, la configuración de la etiqueta de Universal Analytics se actualiza para que el evento de clic en el producto se active en el nombre del evento de GA4 y se habilita la opción Usar esquema de GA4. Ahora, la configuración de la etiqueta es la siguiente:

Tipo de etiqueta : Universal Analytics
Tipo de seguimiento : Evento
Categoría del evento: Ecommerce
Acción del evento: Product Click
Habilitar funciones de comercio electrónico mejorado: true
Usar capa de datos: true
Usa un esquema de GA4: true
Activador n° 1: event es igual a productClick
Activador n° 2: event es igual a select_item

La configuración del activador nuevo de Evento personalizado está establecida para activar la etiqueta en el Nombre del evento select_item:

Actualizaciones de configuración de etiquetas en GA4

Se configura un evento de GA4 para medir las actividades de comercio electrónico implementadas con eventos y parámetros de GA4. La etiqueta utiliza la variable Event integrada para pasar el nombre del evento a GA4. El mismo activador creado para la etiqueta de UA (es decir, select_item) se utiliza para activar la etiqueta de GA4.

Transición del uso de la capa de datos al uso de gtag.js

A continuación, se muestra cómo la implementación de UA anterior pasó de utilizar el evento personalizado productClick con la API de dataLayer.push() al uso del evento select_item de GA4 con la API gtag.js. Los valores de los parámetros de select_item se configuran según corresponda.

<script>
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  gtag('event', 'select_item', {
    'items': [{
      'item_id': productObj.id,
      'item_name': productObj.name,
      'index': productObj.position,
      'item_list_name': 'Search Results',
      'item_brand': productObj.brand,
      'item_category': productObj.cat,
      'item_variant': productObj.variant,
      'price': productObj.price
    }]
  });
}
</script>