Comercio electrónico de GA4 (analytics.js - comercio electrónico estándar): enviar eventos de comercio electrónico de GA4

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

En el Centro de migración para desarrolladores encontrarás más guías y recursos de migración.

Resultado

Con esta guía, podrás usar la nueva implementación de Google Analytics 4 para enviar eventos de comercio electrónico de GA4 a una nueva propiedad de GA4 y a la propiedad de Universal Analytics. La propiedad Universal Analytics recibirá datos de comercio electrónico de GA4, pero los informes no se modificarán.

Hay dos fases de migración:

Antes de empezar

  1. Comprueba que la implementación que estés usando cumpla los siguientes requisitos:

    • Estás utilizando una propiedad de Universal Analytics.
    • Tu sitio usa la biblioteca analytics.js para enviar eventos de comercio electrónico.

  2. Consulta las opciones de migración para implementaciones de comercio electrónico para obtener información sobre las ventajas e inconvenientes de cada opción. Comprueba que esta guía sea adecuada para tu caso y asegúrate de que quieres usar eventos de comercio electrónico de Google Analytics 4 en tu implementación de Universal Analytics.

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

Ventajas, inconvenientes y consideraciones

Consulta con atención la información siguiente para saber lo que implica usar eventos de comercio electrónico de Google Analytics 4 en tu implementación de comercio electrónico de Universal Analytics.

Ventajas Inconvenientes
  • Puedes consultar los datos de comercio electrónico en los informes de GA4 y de UA.
  • Si migras al evento purchase de GA4, obtendrás informes de comercio electrónico de UA completos.
  • Migrar de analytics.js a gtag.js requiere trabajo adicional. Se recomienda migrar toda la medición personalizada de analytics.js a gtag.js (por ejemplo, eventos, vistas de páginas, tiempos, etc.).

Implementación

1. Migra 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 son 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 de UA.
  3. Migra tu código de medición personalizado de analytics.js a gtag.js. En las secciones siguientes se describe cómo migrar una transacción de comercio electrónico estándar. Consulta el artículo sobre migración de mediciones para obtener ayuda general sobre la migración de otros tipos de mediciones.

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 la implementación de comercio electrónico para enviar eventos de GA4

Actualiza tu implementación de comercio electrónico y pasa de usar eventos de comercio electrónico de UA a usar eventos de GA4. Cuando hayas completado este paso, tu propiedad Universal Analytics recibirá un evento purchase de GA4. Revisa la sección Ventajas, inconvenientes y consideraciones para conocer las consecuencias de esta actualización.

En el ejemplo siguiente se muestra cómo migrar un evento de transacción de comercio electrónico estándar de analytics.js a un evento de comercio electrónico purchase equivalente de GA4, que a su vez 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 en una transacción con 2 artículos:

// 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)

Estas son las diferencias principales que se producen al migrar eventos de transacción de analytics.js a eventos purchase de GA4:

  • GA4 tiene un solo evento purchase que incluye todos los detalles y los artículos relacionados con la transacción, mientras que analytics.js ejecuta varios comandos de comercio electrónico ga() para obtener la misma información.
  • GA4 tiene un único campo transaction_id para todo el evento, mientras que analytics.js requiere que el ID de transacción se incluya con cada artículo.
  • GA4 tiene varios campos de categorías de artículos, mientras que analytics.js usa un único 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 artículos funcionarán en tu propiedad de UA gracias al traslado de parámetros de categorías.
 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. Crea y configura una propiedad de GA4

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 opciones siguientes para empezar a enviar datos a una nueva propiedad GA4.

Opción 1: Usar Asistente de configuración de GA4 y habilitar las etiquetas de sitio conectadas

El Asistente de configuración de GA4 creará automáticamente una propiedad de GA4 y copiará los siguientes ajustes de tu propiedad de Universal Analytics: nombre de la propiedad, URL del sitio web, zona horaria y configuración de moneda. También puede permitir que la función de etiqueta de sitio conectada reutilice tu implementación de Universal Analytics con gtag.js para cargar tu nueva propiedad de GA4.

Sigue los pasos que se describen en el artículo Asistente de configuración de GA4 para crear y configurar una nueva propiedad de Google Analytics 4. No te olvides de marcar la opción Habilitar la recogida de datos mediante las etiquetas que tenga para usar la función de etiqueta de sitio conectada.

Opción 2: Actualizar tu fragmento gtag.js

  1. Crea una propiedad de Google Analytics 4.
    • Utiliza el Asistente de configuración de GA4 para añadir una propiedad de Google Analytics 4. Cuando se te solicite durante la configuración, desmarca la opción Habilitar la recogida de datos mediante las etiquetas que tenga. También puedes crear una propiedad Google Analytics 4 sin el Asistente de configuración de GA4. La ventaja de usar el asistente es que copiará la configuración básica de tu propiedad de Universal Analytics.
  2. Busca el ID de medición de la propiedad de Google Analytics 4.
  3. Añade la propiedad de Google Analytics 4 a tu fragmento gtag.js mediante el comando config con el ID de etiqueta.

A continuación, se muestra un ejemplo de fragmento gtag.js que ha configurado una propiedad de Universal Analytics y una propiedad de 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 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. Puedes consultar más información sobre el comercio electrónico de Google Analytics 4.

Si usas 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 que se envíen a tu propiedad de UA se trasladarán como se define en la referencia de compatibilidad de eventos. Si prefieres que se haga de otro modo, puedes usar la función de agrupar y enrutar datos de gtag.js para controlar qué eventos se envían a tus propiedades de UA y GA4. Por ejemplo, puedes enviar el evento purchase tanto a tu propiedad de UA como a tu propiedad de GA4, pero solo enviar otros eventos de comercio electrónico de GA4 a tu propiedad de GA4.