Neste guia, explicamos como implementar os recursos de e-commerce avançado do Universal Analytics usando o Gerenciador de tags do Google em um site.
Visão geral
O e-commerce avançado do Google Analytics permite que os dados de impressões, promoções e vendas de produtos sejam enviados com qualquer visualização de página e evento desse serviço. Use as visualizações de página para acompanhar as impressões e compras de produtos e os eventos para conferir as etapas de finalização da compra e os cliques nos itens à venda.
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 e-commerce que você quer medir.
Ativar o e-commerce avançado
Na maioria das implementações, você precisa ativar o e-commerce avançado em cada uma das tags de evento ou de visualização de página 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 os dois métodos ofereçam recursos de e-commerce semelhantes, recomendamos a camada de dados nos sites compatíveis. Neste guia, consideramos o método da camada de dados como padrão, mas também mostramos como usar uma macro JavaScript personalizada no fim.
Usar a camada de dados
Veja nas próximas seções como usar a camada de dados para medir as seguintes atividades de comércio eletrônico avançado:
- Impressões do produto
- Cliques no produto
- Impressões de detalhes do produto
- Adicionar / remover item do carrinho
- Impressões da promoção
- Cliques na promoção
- Finalização da compra
- Compras
- Reembolsos
Como limpar o objeto de e-commerce
Recomendamos usar o comando a seguir para limpar o objeto de e-commerce antes de enviar um evento relacionado para a camada de dados. Isso impedirá que vários eventos de e-commerce em uma página afetem uns aos outros.
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
Medir as impressões do produto
- Medição de comércio eletrônico:
impressions - Aceita dados: matriz de
impressionFieldObjects
Medee as impressões do produto usando a ação impression e um ou mais parâmetros impressionFieldObjects. No exemplo a seguir, supomos que os detalhes sobre os produtos exibidos em uma página sejam conhecidos no momento do carregamento dela:
<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 os cliques no produto
- Medição de comércio eletrônico:
click - Aceita dados:
liste matriz deproductFieldObjects
Para medir cliques em links de produtos, envie uma ação click à camada de dados, além de 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({ 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 as visualizações dos detalhes do produto
- Medição de comércio eletrônico:
detail - Aceita dados:
liste matriz deproductFieldObjects
Para medir uma visualização dos detalhes do produto, envie uma ação detail à 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: 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 as adições ou remoções de itens de um carrinho de compras
- Medição de comércio eletrônico:
adderemove - Aceita dados:
liste matriz deproductFieldObjects
Da mesma forma, também é possível medir adições ou remoções de itens de um carrinho de compras usando add ou remove actionFieldObject e uma lista de parâmetros productFieldObjects:
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({ 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
}]
}
}
});
Remover um produto de um carrinho 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
}]
}
}
});
Medir as promoções
Você pode medir as impressões e os cliques em promoções internas do site, como banners exibidos no próprio site que anunciam uma liquidação em determinado subconjunto de produtos ou uma oferta de frete grátis.
Medir as impressões da promoção
- Medição de comércio eletrônico:
promoView - Aceita dados: matriz de
promoFieldObjects
Para medir a impressão de uma promoção, defina a chave promoView na variável da sua camada de dados de e-commerce como um parâmetro 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: 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 os cliques na promoção
Para medir um clique em uma promoção, envie a ação promoClick para a camada de dados com uma matriz contendo um parâmetro 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({ 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 uma finalização da compra
Para medir cada etapa de um processo de finalização da compra, faça o seguinte:
- Meça cada etapa desse processo usando a ação
checkout. - Se aplicável, meça 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. Medir as etapas de finalização da compra
- Medição de comércio eletrônico:
checkout - Aceita dados:
stepe matriz deproductFieldObjects
Se você quiser medir o processo de finalização da compra, que pode incluir um botão para finalizar 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 medido.
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({ 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 as opções de finalização da compra
- Medição de comércio eletrônico:
checkout_option - Aceita dados:
stepeoption
A opção de finalização da compra é útil nos casos em que você já mediu 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({ ecommerce: null }); // Clear the previous ecommerce object.
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 da 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 da compra que você pretende acompanhar.
Medir as compras
- Medição de comércio eletrônico:
purchase - Aceita dados:
id(ID da transação) e matriz deproductFieldObjects
Envie os detalhes da transação para a camada de dados usando a ação purchase e um parâmetro 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: 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 os reembolsos
- Medição de comércio eletrônico:
refund - Aceita dados:
id(ID da transação) e matriz deproductFieldObjects
Para medir um reembolso total de uma transação, envie um parâmetro refund actionFieldObject e o ID 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: null }); // Clear the previous ecommerce object.
dataLayer.push({
'ecommerce': {
'refund': {
'actionField': {'id': 'T12345'} // Transaction ID. Required for purchases and refunds.
}
}
});
</script>
Para medir 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: 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>
Enviar dimensões personalizadas no nível do produto
Para transmitir ao objeto de e-commerce uma dimensão personalizada no escopo do produto, use a seguinte notação:
dimensionn
em que n é um número inteiro não negativo, por exemplo:
<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>
Transmitir métricas personalizadas no escopo do produto
Para transmitir ao objeto de e-commerce uma métrica personalizada no escopo do produto, use a seguinte notação:
metricn
em que n é um número inteiro não negativo, por exemplo:
<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 impressões e ações
Quando você tem impressões de produtos e uma ação, é possível combinar e medir tudo em um único hit.
Veja no exemplo abaixo como medir a visualização de detalhes do produto com as impressões de uma seção de produtos 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 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 e-commerce. Esse objeto precisa usar a sintaxe de camada de dados 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 do e-commerce avançado e ative a opção Ler dados da macro.