Comercio electrónico mejorado para Tag Manager

En esta guía, se describe cómo implementar las funciones de Comercio electrónico mejorado de Universal Analytics con Google Tag Manager en un sitio web.

Descripción general

El Comercio electrónico mejorado de Google Analytics permite enviar datos de impresiones, promociones y ventas de productos con cualquiera de tus vistas de página y eventos de Google Analytics. Usa las páginas vistas para hacer un seguimiento de las impresiones y las compras de productos, y usa los eventos para realizar un seguimiento de los pasos de confirmación de la compra y de los clics en productos.

Antes de comenzar

Te recomendamos que revises la sección Tipos de datos y acciones de comercio electrónico mejorado de la Guía para desarrolladores de Comercio electrónico mejorado para planificar tu implementación. La guía te ayudará a comprender qué campos son obligatorios y opcionales para cada una de las interacciones de comercio electrónico que deseas medir.

Habilitación del Comercio electrónico mejorado

En la mayoría de las implementaciones, debes habilitar el Comercio electrónico mejorado en cada una de tus etiquetas de evento o página vista de Universal Analytics. Tienes dos opciones para habilitar el Comercio electrónico mejorado en la pantalla del editor de etiquetas de la interfaz web:

  • Implementación con la capa de datos (recomendado)
  • Implementación con una macro personalizada de JavaScript

Si bien ambos métodos proporcionan una funcionalidad de comercio electrónico equivalente, recomendamos que todos los sitios web que admitan una capa de datos usen el método Data Layer. En esta guía, se presenta el método de capa de datos como el predeterminado, mientras que Cómo usar una macro de JavaScript personalizada se documenta al final de esta guía.

Cómo usar la capa de datos

En las siguientes secciones, se muestra cómo usar la capa de datos para medir las siguientes actividades de comercio electrónico mejorado:

Cómo borrar el objeto de comercio electrónico

Se recomienda que uses 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. Si borras el objeto, evitarás que varios eventos de comercio electrónico de una página se afecten entre sí.

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

Cómo medir las impresiones del producto

  • Medición de comercio electrónico: impressions
  • Se aceptan datos: array de impressionFieldObjects

Mide las impresiones de productos mediante la acción impression y una o más impressionFieldObjects. En el siguiente ejemplo, se supone que los detalles de los productos que se muestran en una página ya se conocen en el momento en que esta se carga:

<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'EUR',                       // Local currency is optional.
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
</script>

Medición de clics en el producto

  • Medición de comercio electrónico: click
  • Se aceptan datos: list, array de productFieldObjects

Para medir los clics en vínculos de productos, envía una acción click a la capa de datos, junto con un productFieldObject para representar el producto en el que se hizo clic, como en este ejemplo:

<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({ ecommerce: null });  // Clear the previous ecommerce object.
  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>

Medición de las vistas de los detalles del producto

  • Medición de comercio electrónico: detail
  • Se aceptan datos: list, array de productFieldObjects

Envía una acción detail a la capa de datos para medir una vista de los detalles del producto, junto con una o más productFieldObjects que representen los productos que se están viendo:

<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});
</script>

Medición de adiciones o eliminaciones de un carrito de compras

  • Medición de comercio electrónico: add, remove
  • Se aceptan datos: list, array de productFieldObjects

Del mismo modo, puedes medir las adiciones o eliminaciones de un carrito de compras mediante un actionFieldObject add o remove y una lista de productFieldObjects:

Cómo agregar un producto a un carrito de compras

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  }
});

Cómo quitar un producto de un carrito de compras

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'remove': {                               // 'remove' actionFieldObject measures.
      'products': [{                          //  removing a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    }
  }
});

Cómo medir las promociones

Puedes medir tanto las impresiones como los clics en las promociones internas del sitio, por ejemplo, los banners que se muestran en el propio sitio en el que se anuncia una oferta de un subconjunto específico de productos o una oferta de envío gratis.

Medición de impresiones de promociones

  • Medición de comercio electrónico: promoView
  • Se aceptan datos: array de promoFieldObjects

Para medir una impresión de promoción, establece la clave promoView de la variable de tu capa de datos de comercio electrónico en un valor promoFieldObject que describa las promociones que se muestran a los usuarios en la página:

<script>
// An example of measuring 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({
  'ecommerce': {
    'promoView': {
      'promotions': [                     // Array of promoFieldObjects.
       {
         'id': 'JUNE_PROMO13',            // ID or Name is required.
         'name': 'June Sale',
         'creative': 'banner1',
         'position': 'slot1'
       },
       {
         'id': 'FREE_SHIP13',
         'name': 'Free Shipping Promo',
         'creative': 'skyscraper1',
         'position': 'slot2'
       }]
    }
  }
});
</script>

Medición de clics de promociones

Para medir un clic en una promoción, envía la acción promoClick a la capa de datos con un array que contenga un promoFieldObject que describa la promoción en la que se hizo clic:

<script>
/**
 * Call this function when a user clicks on a promotion. This function uses the eventCallBack
 * datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
 *
 * @param {Object} promoObj An object representing an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'promotionClick',
    'ecommerce': {
      'promoClick': {
        'promotions': [
         {
           'id': promoObj.id,                         // Name or ID is required.
           'name': promoObj.name,
           'creative': promoObj.creative,
           'position': promoObj.pos
         }]
      }
    },
    'eventCallback': function() {
      document.location = promoObj.destinationUrl;
    }
  });
}
</script>

Medir el proceso de confirmación de la compra

Para medir cada paso en un proceso de confirmación de la compra, debes hacer lo siguiente:

  1. Mide cada paso del proceso de confirmación de la compra con la acción checkout.
  2. Si corresponde, mide las opciones de confirmación de la compra con la acción checkout_option.
  3. De manera opcional, establece nombres de pasos fáciles de usar para el informe de embudo de confirmación de la compra mediante la Configuración de comercio electrónico en la sección Administrador de la interfaz web.

1. Mide los pasos de confirmación de la compra

  • Medición de comercio electrónico: checkout
  • Se aceptan datos: step, array de productFieldObjects

Para medir el proceso de confirmación de la compra, que puede incluir un botón de confirmación de la compra y una o más páginas de confirmación de la compra en las que los usuarios ingresan la información de pago y envío, usa la acción checkout y el campo step para indicar qué etapa del proceso se mide. También puedes usar el campo option para proporcionar datos adicionales sobre la página, como el tipo de pago que seleccionó el usuario.

<script>
/**
 * A function to handle a click on a checkout button. This function uses the eventCallback
 * data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
   'eventCallback': function() {
      document.location = 'checkout.html';
   }
  });
}
</script>

2. Medir las opciones de confirmación de la compra

  • Medición de comercio electrónico: checkout_option
  • Se aceptan datos: step, option

La opción de confirmación de la compra es útil en los casos en los que ya midiste un paso de confirmación de la compra, pero deseas capturar información adicional sobre el mismo paso. Por ejemplo, el método de envío que selecciona un usuario. Para medir esto, usa la acción checkout_option junto con los campos step y option.

<script>
/**
 * A function to handle a click leading to a checkout option selection.
 */
function onCheckoutOption(step, checkoutOption) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

3. Configuración del embudo de confirmación de la compra

De manera opcional, a cada paso del proceso de confirmación de la compra se le puede asignar un nombre descriptivo que se usará en los informes. Para configurar estos nombres, visita la sección Administrador de la interfaz web de Google Analytics, selecciona la vista (perfil) y haz clic en Configuración de comercio electrónico. Sigue las instrucciones de configuración de comercio electrónico para etiquetar cada paso de la confirmación de la compra del que quieras hacer un seguimiento.

Configuración de comercio electrónico en la interfaz de administrador de Google Analytics. Un embudo de confirmación de la compra se define con cuatro pasos: 1. Revisar carrito, 2. Recopilar información de pago, 3. Confirmar detalles de la compra, 4. Recibo.
Figura 1: Configuración de comercio electrónico, embudo de confirmación de la compra.

Medición de compras

  • Medición de comercio electrónico: purchase
  • Se aceptan datos: id (ID de transacción), array de productFieldObjects

Envía los detalles de tu transacción a la capa de datos con la acción purchase, junto con una event que activará una etiqueta habilitada para el comercio electrónico mejorado. En este ejemplo, los detalles de la transacción se conocen en el momento en que se carga la página y se enviarán con una vista de página cuando la secuencia de comandos gtm.js muestre lo siguiente:

<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }
});
</script>

Medición de reembolsos

  • Medición de comercio electrónico: refund
  • Se aceptan datos: id (ID de transacción), array de productFieldObjects

Para medir un reembolso completo de una transacción, envía un refund actionFieldObject junto con el ID de la transacción que se reembolsa:

<script>
// Refund an entire transaction by providing 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({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

Para medir un reembolso parcial, agrega una lista de productFieldObjects, incluidos los IDs de productos y las cantidades que se reembolsarán:

<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being 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({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'},        // Transaction ID.
      'products': [
            {'id': 'P4567', 'quantity': 1},   // Product ID and quantity. Required for partial refunds.
            {'id': 'P8901','quantity': 2}
       ]
     }
  }
});
</script>

Cómo pasar dimensiones personalizadas centradas en el producto

Para pasar una dimensión personalizada centrada en el producto al objeto de comercio electrónico, usa la siguiente notación para agregarla al producto:

  dimensionn

En el ejemplo anterior, n es un número natural, por ejemplo:

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'dimension1': 'Same day delivery'
       }]
     }
   }
});
</script>
.

Cómo pasar métricas personalizadas centradas en el producto

Para pasar una métrica personalizada centrada en el producto al objeto de comercio electrónico, usa la siguiente notación para agregarla al producto:

  metricn

En el ejemplo anterior, n es un número natural, por ejemplo:

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Goal Flow Garden Hose',
        'id': 'p001',
        'brand': 'Google Analytics',
        'category': 'Home Goods',
        'variant': 'Green',
        'price': '20',
        'quantity': 1,
        'metric3': '10'  // Custom metric 'Cost'
       }]
     }
   }
});
</script>
.

Combinación de impresiones y acciones

En los casos en los que tengas impresiones de productos y una acción, es posible combinarlas y medirlas en un solo hit.

En el siguiente ejemplo, se muestra cómo medir una vista de detalles del producto con impresiones de productos de una sección de productos relacionados:

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',        // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Related Products',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Related Products',
       'position': 2
     }],
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},  // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',       // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
  }
});
</script>

Cómo usar una macro de JavaScript personalizada

Si tu sitio web no admite una capa de datos, puedes usar una macro de JavaScript personalizada para llamar a una función que muestre el objeto de datos de comercio electrónico. Este objeto debe usar la sintaxis de capa de datos que se mostró antes en esta guía, por ejemplo:

// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
  var ecommerceData = {
    'ecommerce': {
      'purchase': {
        'actionField': {'id': 'T12345'},
        'products': [
            // List of productFieldObjects
        ],
        ... // Rest of the code should follow the data layer syntax.
     }
  };
  return ecommerceData;
}

Si eliges usar una macro de JavaScript personalizada en lugar de la capa de datos, selecciona Habilitar funciones de comercio electrónico mejoradas y configura la opción Leer datos de la macro.