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:
- Impressões do produto
- Cliques do produto
- Impressões de especificações técnicas do produto
- Adicionar / remover item do carrinho
- Impressões da promoção
- Cliques na promoção
- Finalização de compra
- Compras
- Reembolsos
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 deproductFieldObjects
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 deproductFieldObjects
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
eremove
- Aceita dados:
list
e matriz deproductFieldObjects
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:
- Avalie cada etapa do processo de finalização usando a ação
checkout
. - Se aplicável, avalie as opções de finalização de compra com a ação
checkout_option
. - 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 deproductFieldObjects
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
eoption
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.

Como avaliar as compras
- Avaliação de comércio eletrônico:
purchase
- Aceita dados:
id
(código da transação) e matriz deproductFieldObjects
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 deproductFieldObjects
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.