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 en un sitio web con 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 vistas de página 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

Para planificar la implementación, 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. La guía te ayudará a entender qué campos son obligatorios y cuáles son 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 con ambos métodos se consigue la misma función de comercio electrónico, recomendamos que se use el método de la capa de datos en todos los sitios web que lo permitan. En esta guía se describe el método de la capa de datos como opción predeterminada, aunque al final también se indica cómo usar una macro de JavaScript personalizada.

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:

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 los distintos eventos de comercio electrónico que haya en una página influyan unos en otros.

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

Medir las impresiones de producto

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

Para medir las impresiones de producto, usa la acción impression y uno o varios objetos impressionFieldObjects. En el siguiente ejemplo se asume que, cuando se carga la página, se conocen los detalles de los productos que se muestran en ella:

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

Medir los clics de producto

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

Para medir los clics en los enlaces del producto, envía una acción click a la capa de datos junto con un objeto productFieldObject que represente 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({ 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>

Medir las visualizaciones de los detalles del producto

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

Para medir una visualización de los detalles del producto, envía una acción detail a la capa de datos junto con uno o varios objetos 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>

Medir acciones mediante las que se añaden o se quitan productos 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 add o remove actionFieldObject y una lista con productFieldObjects:

Añadir un producto a un carrito de la compra

// 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
       }]
    }
  }
});

Quitar un producto de un 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': '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 en promociones internas del sitio web como, por ejemplo, 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 las impresiones de promociones

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

Para registrar las impresiones relativas a promociones, en la variable de la capa de datos de comercio electrónico, debes asignar a la clave promoView el valor promoFieldObject (que describe 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>

Medir los clics en promociones

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({ 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 la tramitación de la compra

Para medir cada paso del proceso de tramitación de la compra, haz lo siguiente:

  1. Mide los pasos del proceso de tramitación de la compra con la acción checkout.
  2. Si es necesario, mide las opciones de pago con la acción checkout_option.
  3. También puedes asignar nombres descriptivos a cada paso para el informe de embudo de tramitación de la compra. Para ello, usa la opción Configuración del comercio electrónico en la sección Administrar de la interfaz web.

1. Medir los pasos del proceso de pago

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

Para medir el proceso de tramitación de la compra, que puede incluir un botón de tramitación de la compra y una o varias páginas en las que los usuarios introducen sus datos de pago y de envío, usa la acción checkout y el campo step para 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({ 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 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 la tramitación de la compra y quieres recoger más información sobre él. 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({ ecommerce: null });  // Clear the previous ecommerce object.
  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 del comercio electrónico. Sigue las instrucciones de configuración de comercio electrónico para etiquetar cada paso de compra que quieras registrar.

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

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

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 refundactionFieldObject 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: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

Para medir los reembolsos parciales, añade una lista con productFieldObjects e incluye los IDs de producto y las cantidades que se van a reembolsar:

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

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

Aquí 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>

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

Aquí 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>

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

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.