Comercio electrónico de GA4 (analytics.js, comercio electrónico estándar): Envía eventos de comercio electrónico de GA4

En esta guía, se describe cómo migrar una implementación existente de comercio electrónico estándar para Analytics.js Universal Analytics para usar eventos de comercio electrónico de Google Analytics 4.

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

Resultado

El resultado de seguir esta guía es que tu nueva implementación de Google Analytics 4 enviará eventos de comercio electrónico de GA4 a una propiedad GA4 nueva y a una propiedad Universal Analytics existente. La propiedad Universal Analytics existente recibirá datos de comercio electrónico de GA4, pero los informes no se modificarán.

Estas son las dos fases de la migración:

Antes de comenzar

  1. Confirma que la siguiente descripción describa tu implementación actual:

    • Estás usando una propiedad Universal Analytics.
    • Tu sitio utiliza la biblioteca analytics.js 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 traduce el evento de compra de GA4 cuando se envía a una propiedad UA.

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 de Universal Analytics.

Ventajas Desventajas
  • Consulta los datos de comercio electrónico en los informes de GA4 y Universal Analytics.
  • La migración al evento purchase de GA4 proporcionará informes de comercio electrónico de UA completos.
  • Se requiere trabajo adicional para migrar de analytics.js a gtag.js. Te recomendamos que migres todas las mediciones personalizadas de analytics.js a gtag.js (p.ej., eventos, vistas de página, tiempos, etcétera).

Implementación

1. Migre la medición de UA de analytics.js a gtag.js

Para enviar eventos de comercio electrónico de GA4, debes migrar de analytics.js a gtag.js, incluidas las mediciones personalizadas.

Por lo general, los pasos para completar la migración incluyen los siguientes:

  1. Quita el fragmento analytics.js.
  2. Instala la etiqueta de Google (gtag.js) y configúrala con el ID de seguimiento de tu propiedad UA.
  3. Migra tu código de medición personalizado de analytics.js a gtag.js. En las siguientes secciones, se describe cómo migrar una transacción de comercio electrónico estándar. Consulta Migración de medición para obtener ayuda general sobre la migración de otras situaciones de medición.

Antes: etiqueta analytics.js

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');    // Universal Analytics property.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Después: Etiqueta de Google (gtag.js)

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

  gtag('config', 'UA-XXXXX-Y');    // Universal Analytics property.
</script>

2. Actualiza tu implementación de comercio electrónico para enviar eventos de GA4

Actualiza tu implementación de comercio electrónico existente para migrar del uso de eventos de comercio electrónico de Universal Analytics a eventos de Google Analytics 4. Una vez que completes este paso, tu propiedad Universal Analytics recibirá un evento purchase de GA4. Consulta las concesiones y consideraciones para comprender las implicaciones de esta actualización.

En el siguiente ejemplo, se muestra cómo migrar un evento de transacción de comercio electrónico estándar de analytics.js a un evento purchase de comercio electrónico de GA4 equivalente, que es compatible con Universal Analytics.

Antes: Transacción de comercio electrónico estándar de UA (analytics.js)

En el siguiente ejemplo, se muestra una implementación de comercio electrónico estándar de analytics.js para una transacción con 2 elementos:

// Add the transaction.
ga('ecommerce:addTransaction', {
  id: '1234',     // Transaction ID.
  affiliation: 'Google Store',
  revenue: '29.97',
  shipping: '5.25',
  tax: '2.42'
});

// Add the items belonging to the transaction.
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Android Warhol T-Shirt',
  sku: 'P12345',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '12.99',
  quantity: '2'
});
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Flame challenge T-Shirt',
  sku: 'P67890',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '3.99',
  quantity: '1'
});
ga('ecommerce:send');

Después: Compra de comercio electrónico de GA4 (gtag.js)

Cuando se migra un evento de transacción analytics.js a un evento purchase de GA4, las diferencias clave son las siguientes:

  • GA4 tiene un solo evento purchase que incluye todos los detalles y elementos relacionados con la transacción. analytics.js ejecuta varios comandos de comercio electrónico ga() para capturar la misma información.
  • GA4 tiene un solo campo transaction_id para todo el evento. analytics.js requiere que se incluya el ID de transacción con cada elemento.
  • GA4 tiene varios campos de categorías de artículos. analytics.js usa un solo campo de categoría con un delimitador / para describir las jerarquías. Sin embargo, los eventos de GA4 con varios campos de categorías de elementos funcionarán para tu propiedad UA debido a la traducción de parámetros de categoría.
 gtag('event', 'purchase', {
   currency: 'USD',
   transaction_id: '1234',    // Transaction ID.
   value: 29.97,
   affiliation: 'Google Store',
   shipping: 5.25,
   tax: 2.42,
   items: [
    {
      item_id: 'P12345',     // Item ID.
      item_name: 'Android Warhol T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 12.99,
      quantity: 2
    },
    {
      item_id: 'P67890',    // Item ID.
      item_name: 'Flame challenge T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 3.99,
      quantity: 1
    }
  ]
});

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

Una vez que hayas actualizado tu implementación de comercio electrónico para enviar eventos de comercio electrónico de GA4, completa cualquiera de las siguientes opciones para comenzar a enviar datos a una nueva propiedad Google Analytics 4.

Opción 1: Utiliza el Asistente de configuración de GA4 y habilita las etiquetas conectadas del sitio

El Asistente de configuración de GA4 creará automáticamente una nueva propiedad GA4 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. También puede habilitar la función etiqueta conectada del sitio para reutilizar tu implementación existente de gtag.js de Universal Analytics a fin de cargar tu nueva propiedad GA4.

Sigue los pasos que se describen en el Asistente de configuración de GA4 para crear y configurar una nueva propiedad Google Analytics 4. Asegúrate de marcar la opción Habilitar la recopilación de datos con tus etiquetas existentes para usar la función de etiqueta conectada del sitio.

Opción 2: Actualiza el fragmento de gtag.js

  1. Crea una nueva propiedad Google Analytics 4.
    • Utiliza el Asistente de configuración de GA4 para agregar una propiedad Google Analytics 4. Sin embargo, desmarca la opción Habilitar la recopilación de datos con tus etiquetas existentes cuando se te solicite durante la configuración. Como alternativa, crea una propiedad Google Analytics 4 sin el Asistente de configuración de GA4. La ventaja de usar el Asistente es que copiará algunos parámetros de configuración básicos de tu propiedad Universal Analytics.
  2. Busca el ID de etiqueta de la propiedad Google Analytics 4.
  3. Agrega la propiedad Google Analytics 4 a tu fragmento gtag.js existente con el comando config con el ID de etiqueta.

A continuación, se muestra un ejemplo de un fragmento gtag.js que configuró una propiedad Universal Analytics y una propiedad Google Analytics 4.

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

  gtag('config', 'UA-XXXXX-Y');         // Universal Analytics property.
  gtag('config', 'TAG_ID');  // Google Analytics 4 property.
</script>

4. (Opcional) Mide los eventos de comercio electrónico adicionales

Para aprovechar al máximo los informes de comercio electrónico de GA4, implementa eventos de comercio electrónico de GA4 adicionales. Para obtener más información, consulta Comercio electrónico en Google Analytics 4.

Si utilizas la configuración predeterminada del fragmento gtag.js, los eventos de GA4 se enviarán a tus propiedades UA y GA4. Los eventos de GA4 enviados a tu propiedad UA se traducirán según se define en la referencia de compatibilidad de eventos. Si prefieres un comportamiento diferente, puedes usar la funcionalidad Agrupar y enrutar datos de gtag.js para controlar qué eventos se envían a tu propiedad UA y GA4. Por ejemplo, puedes enviar el evento purchase a tu propiedad UA y GA4, pero solo enviar otros eventos de comercio electrónico de GA4 a tu propiedad GA4.