Guia do desenvolvedor sobre comércio eletrônico avançado (UA)

Este guia descreve como implementar os recursos de comércio eletrônico avançado do Universal Analytics usando o Gerenciador de tags do Google em um site.

Visão geral

O comércio eletrônico avançado do Google Analytics permite que os dados de impressões, promoções e vendas de produtos sejam enviados com qualquer visualizações de página e eventos do Google Analytics. Use as visualizações de página para acompanhar as impressões e compras de produtos, e os eventos para acompanhar as etapas de finalização de compra e os cliques nos produtos.

Antes de começar

Recomendamos que você leia a seção Ações e tipos de dados de comércio eletrônico avançado do Guia do desenvolvedor sobre comércio eletrônico avançado para planejar sua implementação. Este guia ajudará você a entender quais campos são obrigatórios e opcionais para cada uma das interações de comércio eletrônico que você quer avaliar.

Como ativar o comércio eletrônico avançado

Na maioria das implementações, você precisa ativar o comércio eletrônico avançado em cada uma das tags de visualização de página ou evento do Universal Analytics. É possível ativar esse recurso de duas maneiras na tela do editor de tags da interface da Web:

  • Implementar usando a camada de dados (recomendado)
  • Implementar usando uma macro JavaScript personalizada

Embora ambos os métodos ofereçam recursos de comércio eletrônico semelhantes, recomendamos que os sites compatíveis com camada de dados usem esse método. Neste guia, consideramos o método da camada de dados como padrão, mas também mostramos como usar uma macro JavaScript personalizada ao final.

Como usar a camada de dados

Veja nas próximas seções como usar a camada de dados para avaliar as seguintes atividades de comércio eletrônico avançado:

Como avaliar as impressões do produto

  • Avaliação de comércio eletrônico: impressions
  • Aceita dados: matriz de impressionFieldObjects

Avalie as impressões do produto usando a ação impression e um ou mais impressionFieldObjects. No exemplo a seguir, supomos que os detalhes sobre os produtos exibidos em uma página sejam conhecidos no momento do carregamento da 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>

Como avaliar os cliques do produto

  • Avaliação de comércio eletrônico: click
  • Aceita dados: list e matriz de productFieldObjects

Para avaliar cliques em links de produtos, envie uma ação click à camada de dados, junto com um parâmetro productFieldObject para representar o produto clicado, como neste exemplo:

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

Como avaliar as visualizações dos detalhes do produto

  • Avaliação de comércio eletrônico: detail
  • Aceita dados: list e matriz de productFieldObjects

Para avaliar uma visualização dos detalhes do produto, envie uma ação detail para a camada de dados com um ou mais parâmetros productFieldObjects representando os produtos visualizados:

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

Como avaliar as adições ou remoções de itens de um carrinho de compras

  • Avaliação de comércio eletrônico: add e remove
  • Aceita dados: list e matriz de productFieldObjects

Da mesma forma, também é possível avaliar adições ou remoções de itens de um carrinho de compras usando add ou remove actionFieldObject e uma lista de productFieldObjects:

Como adicionar um produto a um carrinho de compras

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

Como remover um produto de um carrinho de compras

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

Como avaliar as promoções

Você pode avaliar as impressões e os cliques em promoções internas do site, como banners exibidos no próprio site que anunciam uma venda em um determinado subconjunto de produtos ou uma oferta de frete grátis.

Como avaliar as impressões da promoção

  • Avaliação de comércio eletrônico: promoView
  • Aceita dados: matriz de promoFieldObjects

Para avaliar a impressão de uma promoção, defina a chave promoView na sua camada de dados de comércio eletrônico var como um promoFieldObject que descreve as promoções exibidas aos usuários na 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': {
    '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>

Como avaliar os cliques da promoção

Para avaliar um clique em uma promoção, envie a ação promoClick para a camada de dados com uma matriz contendo um promoFieldObject que descreva a promoção clicada:

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

Como avaliar uma finalização de compra

Para avaliar cada etapa de um processo de finalização de compra, faça o seguinte:

  1. Avalie cada etapa do processo de finalização usando a ação checkout.
  2. Se aplicável, avalie as opções de finalização de compra com a ação checkout_option.
  3. Inclua nomes fáceis para as etapas no Relatório de funil de finalização de compra. Para isso, basta definir as Configurações de comércio eletrônico na seção Administrador da interface da Web.

1. Como avaliar as etapas de finalização de compra

  • Avaliação de comércio eletrônico: checkout
  • Aceita dados: step e matriz de productFieldObjects

Se você quiser avaliar o processo de finalização de compra, que pode incluir um botão para concluir a compra e uma ou mais páginas onde os usuários inserem informações de envio e pagamento, use a ação checkout e o campo step para indicar qual estágio está sendo avaliado. Também é possível usar o campo option para enviar outros dados sobre a página, como o tipo de pagamento selecionado pelo usuário.

<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. Como avaliar as opções de finalização de compra

  • Avaliação de comércio eletrônico: checkout_option
  • Aceita dados: step e option

A opção de finalização de compra é útil nos casos em que você já avaliou uma etapa do processo, mas quer coletar outras informações sobre a mesma etapa. Por exemplo, o método de envio selecionado por um usuário. Para isso, use a ação checkout_option com os campos step e 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. Configuração do funil de checkout

Cada etapa do seu processo de finalização de compra pode receber um nome descritivo que será usado nos relatórios. Para configurar esses nomes, clique na seção Administrador da interface da Web do Google Analytics, selecione a vista (perfil) e clique em Configurações de comércio eletrônico. Siga as instruções de configuração para rotular cada etapa de finalização de compra que você pretende acompanhar.

Configuração do comércio eletrônico na interface de administrador do Google Analytics. Um funil de finalização de compra é definido em quatro etapas: 1. Revisar carrinho: 2. Coletar informações de pagamento: 3. Confirmar detalhes de compra: 4. Recibo.
Figura 1: configuração do comércio eletrônico, funil de finalização de compra.

Como avaliar as compras

  • Avaliação de comércio eletrônico: purchase
  • Aceita dados: id (código da transação) e matriz de productFieldObjects

Envie os detalhes da transação para a camada de dados usando a ação purchase e um event, que vai disparar uma tag de comércio eletrônico avançado. Neste exemplo, os detalhes aparecem no momento em que a página é carregada e são enviados com uma visualização de página quando o script gtm.js retorna:

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

Como avaliar os reembolsos

  • Avaliação de comércio eletrônico: refund
  • Aceita dados: id (código da transação) e matriz de productFieldObjects

Para avaliar um reembolso total de uma transação, envie um refund actionFieldObject e o código da transação a ser reembolsada:

<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 avaliar um reembolso parcial, adicione uma lista de productFieldObjects, incluindo os IDs dos produtos e os valores a serem reembolsados:

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

Como enviar dimensões personalizadas no nível do produto

Para enviar ao objeto de comércio eletrônico uma dimensão personalizada no nível do produto, use a seguinte notação:

  dimensionn

em que n é um número inteiro não negativo, por exemplo: 

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

Como enviar métricas personalizadas no nível do produto

Para enviar ao objeto de comércio eletrônico uma métrica personalizada no nível do produto, use a seguinte notação:

  metricn

em que n é um número inteiro não negativo, por exemplo: 

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

Como combinar impressões e ações

Quando você tem impressões de produtos e uma ação, é possível combinar e avaliar tudo em um único hit.

Veja no exemplo abaixo como medir a visualização de especificações técnicas do produto com as impressões de uma seção de produtos 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>

Como usar uma macro JavaScript personalizada

Se o site não for compatível com uma camada de dados, use uma macro JavaScript personalizada para chamar uma função que retorna o objeto de dados de comércio eletrônico. Esse objeto precisa usar a sintaxe mostrada anteriormente neste guia, por exemplo:

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

Se você quiser usar uma macro JavaScript personalizada em vez da camada de dados, selecione Ativar recursos de comércio eletrônico avançado e ative a opção Ler dados da macro.