Nota: Este sitio para desarrolladores se trasladará a developers.google.com/tag-platform y se redirigirá a los usuarios a esa URL hasta el 30 de septiembre del 2021.

Guía de comercio electrónico (Google Analytics 4) para desarrolladores

En esta guía se describe cómo implementar las funciones de comercio electrónico de Google Analytics 4 (GA4) en un sitio web con Google Tag Manager.

Las funciones relacionadas con el comercio electrónico de las propiedades de GA4 permiten enviar datos de impresiones, de promociones, de ventas y de listas de productos con una serie de eventos de comercio electrónico sugeridos.

Existen dos formas de habilitarlas en la pantalla del editor de etiquetas de la interfaz web:

  1. Puede implementarse con la capa de datos (opción recomendada).
  2. Puede implementarse con una variable de JavaScript personalizada.

En estas secciones se explica cómo medir las siguientes actividades de comercio electrónico con la capa de datos:

Migrar objetos antiguos de capas de datos de comercio electrónico

Si ya habías implementado el comercio electrónico mejorado para propiedades web de Google Analytics y tienes objetos de capa de datos como 'impressions' y 'products', puedes seguir utilizando esos objetos en lugar de las referencias a 'items', como se muestra en este documento.

Borrar el objeto de comercio electrónico

Se recomienda usar el siguiente comando para borrar el objeto de comercio electrónico antes de enviar un evento de comercio electrónico a la capa de datos. Al borrar el objeto, se impedirá que distintos eventos de comercio electrónico de una página influyan unos en otros.

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.

Medir impresiones o visualizaciones de listas de productos o artículos

Para medir impresiones o visualizaciones de listas de artículos, envía una lista de artículos a la capa de datos y recoge un evento view_item_list junto con esos datos. En el siguiente ejemplo se presupone que, cuando se carga la página, se conocen los detalles de los productos que se muestran en ella:

// Measure product views / impressions
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item_list",
  ecommerce: {
    items: [
     {
       item_name: "Triblend Android T-Shirt",       // Name or ID is required.
       item_id: "12345",
       price: 15.25,
       item_brand: "Google",
       item_category: "Apparel",
       item_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "Tshirts",
       item_variant: "Gray",
       item_list_name: "Search Results",
       item_list_id: "SR123",
       index: 1,
       quantity: 1
     },
     {
       item_name: "Donut Friday Scented T-Shirt",
       item_id: "67890",
       price: 33.75,
       item_brand: "Google",
       item_category: "Apparel",
       item_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "Tshirts",
       item_variant: "Black",
       item_list_name: "Search Results",
       item_list_id: "SR123",
       index: 2,
       quantity: 1
     }]
  }
});

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: view_item_list
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a gtm.dom

Medir clics en listas de productos o artículos

Para medir los clics que se han hecho en listas de productos o artículos, envía un artículo a la capa de datos y recoge un evento select_item que represente el producto que ha recibido el clic, como en el siguiente ejemplo:

/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object that represents the product that is clicked.
 */
function onProductClick(productObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    event: "select_item",
    ecommerce: {
      items: [{
        item_name: productObj.name, // Name or ID is required.
        item_id: productObj.id,
        item_brand: productObj.brand,
        item_category: productObj.category,
        item_category2: productObj.category_2,
        item_category3: productObj.category_3,
        item_category4: productObj.category_4,
        item_variant: productObj.variant,
        item_list_name: productObj.list_name,
        item_list_id: productObj.list_id,
        index: productObj.index,
        quantity: productObj.quantity,
        price: productObj.price
      }]
    }
  });
}

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: select_item
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a select_item

Medir visualizaciones o impresiones de detalles de productos o artículos

Para medir una visualización de los detalles de un producto, envía una lista de artículos a la capa de datos y recoge un evento view_item junto con esos datos. En el siguiente ejemplo se presupone que, cuando se carga la página, se conocen los detalles de los productos que se muestran en ella:

// Measure a view of product details. This example assumes the detail view occurs on pageload,
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: 33.75,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      item_list_name: "Search Results",  // If associated with a list selection.
      item_list_id: "SR123",  // If associated with a list selection.
      index: 1,  // If associated with a list selection.
      quantity: 1
    }]
  }
});

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: view_item
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a gtm.dom

Medir acciones por las que se añaden o se quitan productos del carrito de la compra

De forma similar, para medir las acciones por las que se añaden o se quitan productos del carrito de la compra, puedes recoger un evento add_to_cart o remove_from_cart junto con los artículos que se han añadido o quitado:

Acción de añadir un producto al carrito de la compra

// Measure when a product is added to a shopping cart
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: "33.75",
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      item_list_name: "Search Results",
      item_list_id: "SR123",
      index: 1,
      quantity: 2
    }]
  }
});

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: add_to_cart
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a add_to_cart

Acción de quitar un producto del carrito de la compra

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: 33.75,
      item_brand: "Google",
      item_category: "Apparel",
      item_variant: "Black",
      item_list_name: "Search Results",  // If associated with a list selection.
      item_list_id: "SR123",  // If associated with a list selection.
      index: 1,  // If associated with a list selection.
      quantity: 1
    }]
  }
});

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: remove_from_cart
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a remove_from_cart

Medir promociones

Puedes medir las impresiones y los clics en promociones internas de un sitio web, como los que reciben los banners que se muestran en el sitio web para promocionar una oferta de un subconjunto específico de productos o bien ofertas de gastos de envío gratuitos.

Medir visualizaciones o impresiones de promociones

Para medir una visualización de los detalles de un producto, envía los detalles de la promoción a la capa de datos y recoge un evento view_promotion junto con esos datos. En el siguiente ejemplo se presupone que, cuando se carga la página, se conocen los detalles de los productos que se muestran en ella:

// Measure promotion views. This example assumes that information about the
// promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_promotion",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: 33.75,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      promotion_id: "abc123",
      promotion_name: "summer_promo",
      creative_name: "instore_suummer",
      creative_slot: "1",
      location_id: "hero_banner",
      index: 1,
      quantity: 1
    }]
  }
});

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: view_promotion
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a gtm.dom

Medir los clics en promociones

Para medir un clic en una promoción, recoge un evento select_promotion junto con una matriz de los artículos a los que esté asociada la promoción:

/**
 * Call this function when a user clicks on a promotion.
 * @param {Object} promoObj An object that represents an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    event: "select_promotion",
    ecommerce: {
      items: [{
        item_name: promoObj.name, // Name or ID is required.
        item_id: promoObj.id,
        item_brand: promoObj.brand,
        item_category: promoObj.category,
        item_category2: productObj.category_2,
        item_category3: productObj.category_3,
        item_category4: productObj.category_4,
        item_variant: promoObj.variant,
        promotion_id: promoObj.pid,
        promotion_name: promoObj.pname,
        creative_name: promoObj.pcreative_name,
        creative_slot: promoObj.pcreative_slot,
        location_id: promoObj.plocation,
        index: promoObj.index,
        quantity: promoObj.quantity,
        price: promoObj.price
      }]
    }
  });
}

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: select_promotion
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a select_promotion

Medir una tramitación de compra

Para medir una tramitación de compra, envía los detalles del producto a la capa de datos y recoge un evento begin_checkout junto con esos datos:

/**
 * A function to handle a click on a checkout button.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    event: "begin_checkout",
    ecommerce: {
      items: [{
        item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
        item_id: "67890",
        price: 33.75,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Mens",
        item_category3: "Shirts",
        item_category4: "Tshirts",
        item_variant: "Black",
        item_list_name: "Search Results",
        item_list_id: "SR123",
        index: 1,
        quantity: 1
      }]
    }
  });
}

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: begin_checkout
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a begin_checkout

Medir las compras

Para medir transacciones, envía una lista de artículos a la capa de datos y recoge un evento purchase junto con esos datos. En el siguiente ejemplo se presupone que, cuando se carga la página, se conocen los detalles de los productos que se muestran en ella:

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "T12345",
      affiliation: "Online Store",
      value: "59.89",
      tax: "4.90",
      shipping: "5.99",
      currency: "EUR",
      coupon: "SUMMER_SALE",
      items: [{
        item_name: "Triblend Android T-Shirt",
        item_id: "12345",
        price: "15.25",
        item_brand: "Google",
        item_category: "Apparel",
        item_variant: "Gray",
        quantity: 1
      }, {
        item_name: "Donut Friday Scented T-Shirt",
        item_id: "67890",
        price: 33.75,
        item_brand: "Google",
        item_category: "Apparel",
        item_variant: "Black",
        quantity: 1
      }]
  }
});

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: purchase
  • Variables de capa de datos (Nombre - Nombre de variable de capa de datos):
    • Elementos de comercio electrónico - ecommerce.items
    • ID de transacción de comercio electrónico - ecommerce.transaction_id
    • Afiliación de comercio electrónico - ecommerce.affiliation
    • Valor de comercio electrónico - ecommerce.value
    • Impuestos de comercio electrónico - ecommerce.tax
    • Envío de comercio electrónico - ecommerce.shipping
    • Moneda de comercio electrónico - ecommerce.currency
    • Cupón de comercio electrónico - ecommerce.coupon
  • Parámetros de evento (Nombre del parámetro - Valor):
    • items - {{Ecommerce Items}}
    • transaction_id - {{Ecommerce Transaction ID}}
    • affiliation - {{Ecommerce Affiliation}}
    • value - {{Ecommerce Value}}
    • tax - {{Ecommerce Tax}}
    • shipping - {{Ecommerce Shipping}}
    • currency - {{Ecommerce Currency}}
    • coupon- {{Ecommerce Coupon}}
  • Activador: el evento es igual a la compra

Medir los reembolsos

Para medir el reembolso completo de una transacción, recoge un evento refund junto con el ID de transacción correspondiente:

// To refund an entire transaction, provide the transaction ID.
// This example assumes the details of the completed refund are
// available when the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "refund",
  ecommerce: {
    transaction_id: "T12345" // Transaction ID. Required for purchases and refunds.
  }
});

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: refund
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a gtm.dom

Para medir un reembolso parcial, añade una lista de eventos items e incluye los ID de producto y los importes que se van a reembolsar:

// To measure a partial refund, provide an array of productFieldObjects and
// specify the ID and quantity of each product to be returned. This example
// assumes the partial refund details are known at the time the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "refund",
  ecommerce: {
      transaction_id: "T12345", // Transaction ID.
      items: [{
       item_name: "Donut Friday Scented T-Shirt",
       item_id: "67890", // ID is required.
       price: 33.75,
       item_brand: "Google",
       item_category: "Apparel",
       item_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "Tshirts",
       item_variant: "Black",
       item_list_name: "Search Results", // If associated with a list selection.
       item_list_id: "SR123", // If associated with a list selection.
       index: 1, // If associated with a list selection.
       quantity: 1 // Quantity is required.
      }]
  }
});

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: refund
  • Parámetro del evento (nombre - valor): 'items' - {{Ecommerce Items}}
  • Tipo de variable: variable de capa de datos - 'ecommerce.items'
  • Activador: event es igual a gtm.dom

Usar una variable de JavaScript personalizada

Si el sitio web no admite capas de datos, puedes utilizar una variable de JavaScript personalizada para llamar a una función que devuelva el objeto de datos de comercio electrónico. Este objeto debería usar la sintaxis de capa de datos que se incluye en esta guía. Por ejemplo:

// A Custom JavaScript Variable that returns an ecommerceData object
// that follows the data layer syntax.
function getEcommerceData() {
  var ecommerceProductData = [
    {
      item_name: "Donut Friday Scented T-Shirt",
      item_id: "67890",  // ID is required.
      // Rest of the product data should follow the data layer syntax.
    },
    // Multiple products may be included.
  ];
  return ecommerceProductData;
}

Si decides utilizar una variable de JavaScript personalizada, puedes seguir el mismo procedimiento que usarías con la capa de datos: puedes proporcionar el valor "items" como parámetro de evento en la configuración de la etiqueta.

Configuración de la etiqueta en este ejemplo:

  • Tipo de etiqueta: evento de GA4
  • Nombre del evento: cualquiera
  • Leer datos de la variable: {{gaEcommerceData}}
  • Activador: event es igual a gtm.dom

Ajustes de la variable gaEcommerceData

  • Tipo de variable: JavaScript personalizada
  • Cuerpo de la función: utiliza el del ejemplo