Guía de comercio electrónico mejorado (UA) para desarrolladores

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

Introducción

La función Comercio electrónico mejorado de Google Analytics permite enviar datos de ventas, promociones e impresiones de productos con cualquier evento o página vista de Google Analytics. Usa las páginas vistas para hacer un seguimiento de las impresiones y ventas de un producto, y los eventos para registrar los pasos de tramitación de la compra y los clics en el producto.

Antes de empezar

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

Habilitar la función Comercio electrónico mejorado

En la mayoría de las implementaciones, se debe habilitar la función Comercio electrónico mejorado en cada una de las etiquetas de evento o páginas vistas de Universal Analytics. Tienes dos opciones para habilitarla en la pantalla del editor de etiquetas de la interfaz web:

  • Implementarla usando la capa de datos (opción recomendada).
  • Implementarla usando una macro de JavaScript personalizada.

Aunque ambos métodos resultan en una función de comercio electrónico igual, recomendamos que se use el método de la capa de datos en todos los sitios web compatibles con una. En esta guía se describe el método de la capa de datos como opción predeterminada, aunque se indica cómo usar una macro de JavaScript personalizada al final.

Usar la capa de datos

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

Medir las impresiones de producto

  • Medición de comercio electrónico: impressions
  • Datos aceptados: matriz de impressionFieldObjects

Mide las impresiones del producto usando la acción impression y uno o más objetos impressionFieldObjects. En el siguiente ejemplo se asume que los datos sobre los productos que se muestran en una página se conocen cuando se carga la página:

<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': {
    '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>

Medir los clics de producto

  • Medición de comercio electrónico: click
  • Datos aceptados: list y matriz de productFieldObjects

Mide los clics en los enlaces del producto enviando una acción click a la capa de datos junto con un objeto productFieldObject que representa el producto en el que se hace clic, como se puede ver 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({
    '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>

Medir las visualizaciones de los detalles del producto

  • Medición de comercio electrónico: detail
  • Datos aceptados: list y matriz de productFieldObjects

Mide una visualización de los datos del producto enviando una acción detail a la capa de datos junto con un objeto productFieldObjects que representa 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': {
    '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>

Medir qué artículos se añaden o se quitan del carrito de la compra

  • Medición de comercio electrónico: add y remove
  • Datos aceptados: list y matriz de productFieldObjects

De forma similar, puedes medir cuántos artículos se añaden o se quitan del carrito de la compra usando un objeto add o remove actionFieldObject y una lista de productFieldObjects:

Añadir un producto al carrito de la compra

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
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
       }]
    }
  }
});

Quitar un producto del carrito de la compra

// Measure the removal of a product from a shopping cart.
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
      }]
    }
  }
});

Medir las promociones

Puedes medir tanto las impresiones como los clics de promociones internas del sitio web, como 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 las impresiones de promoción

  • Medición de comercio electrónico: promoView
  • Datos aceptados: matriz de promoFieldObjects

Para registrar las impresiones de promoción, debes asignar el valor promoFieldObject (que describe las promociones que se muestran a los usuarios en la página) a la clave promoView en la variable de la capa de datos de comercio electrónico:

<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': {
    '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>

Medir los clics de promoción

Para registrar un clic en una promoción, envía la acción promoClick a la capa de datos con una matriz que contenga un objeto promoFieldObject que describa la promoción en la que se hace 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({
    '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 la tramitación de la compra

Para medir cada paso del proceso de tramitación de compra:

  1. Mide cada paso del proceso de tramitación de compra con la acción checkout.
  2. Si es necesario, mide las opciones de pago con la acción checkout_option.
  3. Si lo deseas, asigna nombres descriptivos a cada paso para el informe de embudo de tramitación de la compra. Para ello, ajusta Configuración de comercio electrónico en la sección Administrar de la interfaz web.

1. Medir los pasos de tramitación de la compra

  • Medición de comercio electrónico: checkout
  • Datos aceptados: step y matriz de productFieldObjects

Para medir el proceso de tramitación de compra, que puede incluir un botón de tramitación de compra y una o más páginas en las que los usuarios introducen sus datos de pago y de envío, usa la acción checkout y el campostep parar indicar qué paso del proceso se está midiendo. También puedes usar el campo option para incluir más datos sobre la página, como el tipo de pago que ha seleccionado 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({
    '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 pago

  • Medición de comercio electrónico: checkout_option
  • Datos aceptados: step y option

Es útil medir la opción de pago en los casos en los que ya has medido un paso de tramitación de la compra y quieres recoger más información sobre ese paso. Por ejemplo, el método de envío seleccionado por un usuario. Para medirlo, 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({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

3. Configurar el embudo de tramitación de la compra

Puede asignarse un nombre descriptivo a cada paso del proceso de tramitación de compra, que se usará en los informes. Para configurar estos nombres, ve a la sección Administrar 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 tramitación de la compra del que quieras hacer un seguimiento.

Configuración de comercio electrónico en la interfaz de administración de Google Analytics.Un embudo de tramitación de compra se define en 4 pasos: 1. Consulta del carrito, 2. Recopilación de información de pago, 3. Confirmación de los detalles de compra, 4. Recibo.
Figura 1: Configuración de comercio electrónico, embudo de tramitación de la compra.

Medir las compras

  • Medición de comercio electrónico: purchase
  • Datos aceptados: id (ID de transacción) y matriz de productFieldObjects

Envía todos los detalles de la transacción a la capa de datos con la acción purchase junto con un objeto event, que activará una etiqueta de comercio electrónico mejorado. En este ejemplo, los detalles de la transacción se conocen cuando se carga la página, y se envían con una página vista cuando se devuelve la secuencia de comandos gtm.js:

<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': {
    '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>

Medir los reembolsos

  • Medición de comercio electrónico: refund
  • Datos aceptados: id (ID de transacción) y matriz de productFieldObjects

Para medir los reembolsos completos de las transacciones, envía el objeto refund actionFieldObject junto con el ID de transacción correspondiente:

<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': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

Para medir reembolsos parciales, añade una lista de productFieldObjects e incluye los ID de productos y las cantidades correspondientes al reembolso:

<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': {
    'refund': {
      'actionField': {'id': 'T12345'},        // Transaction ID.
      'products': [
            {'id': 'P4567', 'quantity': 1},   // Product ID and quantity. Required for partial refunds.
            {'id': 'P8901','quantity': 2}
       ]
     }
  }
});
</script>

Transferir dimensiones personalizadas de producto

Para transferir dimensiones personalizadas de producto al objeto de comercio electrónico, usa la siguiente notación para añadírsela al producto:

  dimensionn

donde n es un número natural, por ejemplo:

<script>
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>

Transferir métricas personalizadas de producto

Para transferir métricas personalizadas de producto al objeto de comercio electrónico, usa la siguiente notación para añadírsela al producto:

  metricn

donde n es un número natural, por ejemplo:

<script>
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>

Combinar impresiones y acciones

En los casos en que tengas tanto una impresión de producto como una acción, es posible combinarlas y medirlas en un solo hit.

En el siguiente ejemplo se indica cómo medir una visualización de los detalles de un producto con impresiones de producto desde una sección de productos relacionados:

<script>
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>

Usar una macro de JavaScript personalizada

Si no puedes utilizar una capa de datos en tu sitio web, puedes utilizar una macro de JavaScript personalizada para ejecutar 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 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 decides usar una macro de JavaScript personalizada en lugar de la capa de datos, selecciona Habilitar funciones de comercio electrónico mejorado y elige la opción Leer datos de la macro.