E-commerce avançado

O plug-in do e-commerce avançado da analytics.js permite medir as interações dos usuários com produtos em sites de e-commerce durante a experiência de compra, incluindo: impressões, cliques, visualização de detalhes, adição de um item ao carrinho, início do processo de finalização da compra, transações e reembolsos.

Migração e compatibilidade com o plug-in de e-commerce (ecommerce.js)

Importante: os plug-ins de e-commerce avançado e e-commerce (ecommerce.js) não podem ser usados juntos na mesma propriedade.

Se você já implementou a medição do e-commerce e quer usar o e-commerce avançado, há duas opções principais:

Usar uma nova propriedade

Você pode adicionar outro rastreador a uma nova propriedade e codificar/ativar o e-commerce avançado para ela. Consulte Como usar vários objetos de acompanhamento para detalhes sobre como enviar dados a várias propriedades de uma única página.

Migrar uma propriedade existente

Para migrar do plug-in de e-commerce para o plug-in de e-commerce avançado, os usuários atuais da analytics.js precisam remover e substituir as referências pelo código do e-commerce avançado.

Se você usa a ga.js atualmente e quer mudar para o plug-in do e-commerce avançado, terá primeiro que migrar para a analytics.js.

Os dados de transações e itens coletados anteriormente com o plug-in ecommerce.js não serão afetados pela migração e permanecerão disponíveis nas propriedades e perfis a que foram enviados no início.

Tipos de dados e ações do e-commerce avançado

Há vários tipos de dados de e-commerce que você pode enviar:

• Dados de impressões
• Dados do produto
• Dados da ação
• Tipos de ação

Dados de impressões

Eles representam as informações de um produto que foi visto. Além disso, são representados por um impressionFieldObject e contêm os seguintes valores:

Chave	Tipo de valor	Obrigatório	Descrição
id	texto	*Sim	O ID ou SKU do produto (por exemplo, P67890). * É necessário definir um id ou name.
name	texto	*Sim	O nome do produto (por exemplo, camiseta do Android). * É necessário definir um id ou name.
list	texto	Não	A lista ou o conjunto a que o produto pertence (por exemplo, Resultados da pesquisa)
list_name	texto	Não	A lista ou o conjunto a que o produto pertence (por exemplo, Resultados da pesquisa)
brand	texto	Não	A marca associada ao produto (por exemplo, Google).
category	texto	Não	A categoria a que o produto pertence (por exemplo, Vestuário). Use / como um delimitador para especificar até cinco níveis de hierarquia (por exemplo, Vestuário/Masculino/Camisetas).
variant	texto	Não	A variante do produto (por exemplo, preto).
position	número inteiro	Não	A posição do produto em uma lista ou conjunto (por exemplo, 2).
list_position	número inteiro	Não	A posição do produto em uma lista ou conjunto (por exemplo, 2).
price	número	Não	O preço de um produto (por exemplo, 29,20).

Dados do produto

Esses dados equivalem a produtos específicos que foram visualizados ou adicionados ao carrinho de compras, entre outros. Eles são representados por um productFieldObject e contêm os seguintes valores:

Chave	Tipo de valor	Obrigatório	Descrição
id	texto	*Sim	O ID ou SKU do produto (por exemplo, P67890). * É necessário definir um dos IDs ou name.
name	texto	*Sim	O nome do produto (por exemplo, camiseta do Android). * É necessário definir um dos IDs ou name.
brand	texto	Não	A marca associada ao produto (por exemplo, Google).
category	texto	Não	A categoria a que o produto pertence (por exemplo, Vestuário). Use / como um delimitador para especificar até cinco níveis de hierarquia (por exemplo, Vestuário/Masculino/Camisetas).
variant	texto	Não	A variante do produto (por exemplo, preto).
price	número	Não	O preço de um produto (por exemplo, 29,20).
quantity	número inteiro	Não	A quantidade de um produto (por exemplo, 2).
coupon	texto	Não	O código do cupom associado a um produto (por exemplo, PROMO_VERAO13).
position	número inteiro	Não	A posição do produto em uma lista ou conjunto (por exemplo, 2).
list_position	número inteiro	Não	A posição do produto em uma lista ou conjunto (por exemplo, 2).

Dados de promoções

Eles representam as informações de uma promoção que foi vista. Além disso, são representados por um promoFieldObject e contêm os seguintes valores:

Chave	Tipo de valor	Obrigatório	Descrição
id	texto	*Sim	O ID da promoção (por exemplo, PROMO_1234). * É necessário definir um id ou name.
name	texto	*Sim	O nome da promoção (por exemplo, Promoção de verão). * É necessário definir um id ou name.
creative	texto	Não	O criativo associado à promoção (por exemplo, verao_banner2).
creative_name	texto	Não	O nome do criativo (por exemplo, verao_banner2).
position	texto	Não	A posição do criativo (por exemplo, posicao_banner_1).
creative_slot	texto	Não	O nome do slot do criativo (por exemplo, slot_banner_1).

Dados da ação

Esses dados representam as informações sobre uma ação que ocorreu relacionada ao e-commerce. Eles são representados por um actionFieldObject e contêm os seguintes valores:

Chave	Tipo de valor	Obrigatório	Descrição
id	texto	*Sim	O ID da transação (por exemplo, T1234). * Obrigatório se o tipo de ação for purchase ou refund
affiliation	texto	Não	A loja ou afiliação na qual a transação ocorreu (por exemplo, Google Store).
revenue	número	Não	Especifica a receita total ou a soma geral associada à transação (por exemplo, 11,99). Esse valor pode inclui frete, tributos ou outros ajustes na receita total que você quer considerar como parte dos cálculos da receita. Observação: se a receita não for definida, o valor dela será calculado automaticamente com base nos campos de quantidade de produtos e preço no mesmo hit.
valor	número	Não	Valor (ou seja, receita) associado ao evento.
tax	número	Não	O total de impostos associados à transação.
shipping	número	Não	O custo de envio associado à transação.
coupon	texto	Não	O cupom de transação resgatado na transação.
list	texto	Não	A lista a que os produtos associados pertencem. Opcional.
items	matriz	Não	Matriz que contém os produtos associados.
step	número inteiro	Não	Um número que representa uma etapa no processo de finalização da compra. Opcional em ações de "finalização da compra".
checkout_step	número inteiro	Não	Um número que representa uma etapa no processo de finalização da compra.
option	texto	Não	Mais um campo para ações checkout e checkout_option que podem descrever as informações da opção na página de finalização da compra, como a forma de pagamento selecionada.
checkout_option	text	Não	Opção de finalização da compra (ou seja, forma de pagamento selecionada).

Ações de produtos e promoções

As ações especificam como interpretar os dados de produtos e promoções que você envia ao Google Analytics.

Ação	Evento	Descrição
click	Um clique em um produto ou link do produto para um ou mais itens.
detail	Uma visualização dos detalhes do produto.
add	A adição de um ou mais produtos a um carrinho de compras.
remove	A remoção de um ou mais produtos de um carrinho de compras.
checkout	O início do processo de pagamento de um ou mais produtos.
checkout_option	O envio de um valor de opção para determinada etapa do pagamento.
purchase	A venda de um ou mais produtos.
refund	O reembolso de um ou mais produtos.
promo_click	O clique em uma promoção interna.
add_to_cart	Um usuário adiciona um ou mais produtos a um carrinho de compras.
begin_checkout	Um usuário inicia o processo de finalização da compra de um ou mais produtos.
checkout_progress	Um usuário conclui as etapas restantes de finalização da compra depois da primeira.
purchase	Um usuário conclui uma compra.
refund	Um usuário recebe um reembolso de um ou mais produtos.
remove_from_cart	Um usuário remove um ou mais produtos de um carrinho de compras.
select_content	Um usuário clica em um produto ou no link de um produto.
set_checkout_option	A etapa de finalização da compra que o usuário está concluindo.
view_item	Um usuário visualiza os detalhes de um produto.
view_item_list	Um usuário vê uma lista de um ou mais produtos.
view_promotion	Um usuário clica em uma promoção interna.
view_refund	Um usuário vê um reembolso de um ou mais produtos.

Implementação

As seções a seguir descrevem como implementar o plug-in do comércio eletrônico avançado para medir as atividades dele em um site com a biblioteca analytics.js.

Carregamento do plug-in de e-commerce

Para reduzir o tamanho da analytics.js, o comércio eletrônico avançado não é fornecido na biblioteca padrão, em vez disso, ele é disponibilizado como um módulo de plug-in que precisa ser carregado antes da utilização.

Para carregar o plug-in do e-commerce avançado, use este comando:

ga('require', 'ec');

Esse comando precisa ocorrer depois que você criar seu objeto de acompanhamento e antes de usar uma das funcionalidades específicas do e-commerce avançado.

Envio de dados do e-commerce avançado

Depois de carregados, alguns novos comandos específicos do e-commerce avançado serão adicionados ao rastreador padrão, e você poderá começar a enviar dados de e-commerce.

• Medição de atividades de e-commerce
• Medição de transações
• Medição de reembolsos
• Medição do processo de finalização da compra
• Medição das promoções internas

Observação: os dados de e-commerce só podem ser enviados com um hit, por exemplo, pageview ou event. Se você usar comandos de e-commerce, mas não enviar hits, ou se o hit for enviado antes do comando, os dados dele não serão transmitidos.

Medição de atividades de e-commerce

Uma implementação típica de e-commerce avançado mede as impressões de produtos e qualquer uma destas ações:

• Cliques no link de um produto
• Visualização de detalhes de produtos
• Impressões e cliques de promoções internas
• Adição/remoção de um produto de um carrinho de compras
• Início do processo de finalização da compra de um produto
• Compras e reembolsos

Medição de impressões

As impressões de produtos são medidas usando o comando ec:addImpression. Os detalhes sobre eles são adicionados a impressionFieldObject.

Por exemplo, o código a seguir mede a impressão de um produto em uma lista de resultados de pesquisa:

ga('ec:addImpression', {            // Provide product details in an impressionFieldObject.
  'id': 'P12345',                   // Product ID (string).
  'name': 'Android Warhol T-Shirt', // Product name (string).
  'category': 'Apparel/T-Shirts',   // Product category (string).
  'brand': 'Google',                // Product brand (string).
  'variant': 'Black',               // Product variant (string).
  'list': 'Search Results',         // Product list (string).
  'position': 1,                    // Product position (number).
  'dimension1': 'Member'            // Custom dimension (string).
});

Um impressionFieldObject precisa ter um valor name ou id. Todos os outros valores são opcionais e não precisam ser definidos.

Medição de ações

As ações são medidas usando o comando ec:addProduct com um productFieldObject para adicionar detalhes do produto, e o comando ec:setAction para especificar a ação que está sendo realizada.

Por exemplo, o código a seguir mede um clique no link de um produto exibido em uma lista de resultados de pesquisa:

ga('ec:addProduct', {               // Provide product details in a productFieldObject.
  'id': 'P12345',                   // Product ID (string).
  'name': 'Android Warhol T-Shirt', // Product name (string).
  'category': 'Apparel',            // Product category (string).
  'brand': 'Google',                // Product brand (string).
  'variant': 'Black',               // Product variant (string).
  'position': 1,                    // Product position (number).
  'dimension1': 'Member'            // Custom dimension (string).
});

ga('ec:setAction', 'click', {       // click action.
  'list': 'Search Results'          // Product list (string).
});

O productFieldObject precisa ter um valor de name ou id. Todos os outros valores são opcionais e não precisam ser definidos.

Combinação de impressões e ações

Nos casos em que há impressões de produtos e uma ação, é possível combinar e medir tudo em um único hit.

O exemplo abaixo mostra como medir a visualização de detalhes de um produto com uma seção de produtos relacionados:

// The impression from a Related Products section.
ga('ec:addImpression', {            // Provide product details in an impressionFieldObject.
  'id': 'P12345',                   // Product ID (string).
  'name': 'Android Warhol T-Shirt', // Product name (string).
  'category': 'Apparel/T-Shirts',   // Product category (string).
  'brand': 'Google',                // Product brand (string).
  'variant': 'Black',               // Product variant (string).
  'list': 'Related Products',       // Product list (string).
  'position': 1                     // Product position (number).
});

// The product being viewed.
ga('ec:addProduct', {                 // Provide product details in an productFieldObject.
  'id': 'P67890',                     // Product ID (string).
  'name': 'YouTube Organic T-Shirt',  // Product name (string).
  'category': 'Apparel/T-Shirts',     // Product category (string).
  'brand': 'YouTube',                 // Product brand (string).
  'variant': 'gray',                  // Product variant (string).
  'position': 2                       // Product position (number).
});

ga('ec:setAction', 'detail');       // Detail action.

Medição de transações

Meça uma transação usando o comando ec:setAction e definindo o tipo de ação como purchase. Os detalhes do nível da transação, como receita total, tributos e frete, são fornecidos em um actionFieldObject:

ga('ec:addProduct', {               // Provide product details in an productFieldObject.
  'id': 'P12345',                   // Product ID (string).
  'name': 'Android Warhol T-Shirt', // Product name (string).
  'category': 'Apparel',            // Product category (string).
  'brand': 'Google',                // Product brand (string).
  'variant': 'black',               // Product variant (string).
  'price': '29.20',                 // Product price (number).
  'coupon': 'APPARELSALE',          // Product coupon (string).
  'quantity': 1                     // Product quantity (number).
});

ga('ec:setAction', 'purchase', {          // Transaction details are provided in an actionFieldObject.
  'id': 'T12345',                         // (Required) Transaction id (string).
  'affiliation': 'Google Store - Online', // Affiliation (string).
  'revenue': '37.39',                     // Revenue (number).
  'tax': '2.85',                          // Tax (number).
  'shipping': '5.34',                     // Shipping (number).
  'coupon': 'SUMMER2013'                  // Transaction coupon (string).
});

O actionFieldObject precisará ter um valor de id se o tipo de ação for purchase ou refund. Todos os outros valores são opcionais e não precisam ser definidos.

Medição de reembolsos

Para reembolsar uma transação inteira, defina uma ação refund e informe o ID da transação:

// Refund an entire transaction.
ga('ec:setAction', 'refund', {
  // Transaction ID is only required field for full refund.
  'id': 'T12345'
});

Se não houver nenhuma transação correspondente, o hit refund não será processado.

Para medir um reembolso parcial, defina uma ação refund e especifique o ID da transação, os IDs e as quantidades dos produtos que serão reembolsados:

// Refund a single product.
ga('ec:addProduct', {
  'id': 'P12345',       // Product ID is required for partial refund.
  'quantity': 1         // Quantity is required for partial refund.
});

ga('ec:setAction', 'refund', {
  'id': 'T12345',       // Transaction ID is required for partial refund.
});

Importante: só é possível reembolsar transações no Google Analytics feitas até seis meses depois da data de transação original informada. Elas precisam ter sido enviadas no novo formato de e-commerce avançado. Se você usar filtros para modificar o ID da transação, envie o reembolso com o ID original não filtrado.

Uso de eventos sem interação para reembolsos

Se você precisar enviar dados de reembolso usando um evento e ele não fizer parte do comportamento normalmente medido no site (por exemplo, não iniciado pelo usuário), envie um evento sem interação. Isso evita que métricas como a taxa de rejeição, o tempo no site, entre outras, sejam afetadas pelo evento. Por exemplo:

ga('send', 'event', 'Ecommerce', 'Refund', {'nonInteraction': 1});

Observação: é possível medir reembolsos em vistas (perfis) com o e-commerce avançado ativado, mas não com o e-commerce tradicional.

Medição do processo de finalização da compra

Para medir cada etapa do processo de pagamento, siga estas etapas:

• Adicione o código para medir cada etapa do processo.
• Se aplicável, adicione o código para medir as opções de finalização da compra.
• Como alternativa, defina nomes fáceis para as etapas no Relatório de funis de finalização de compra. Basta alterar as Configurações de e-commerce na seção "Administrador" da interface da Web.

1. Medição das etapas de finalização da compra

Em cada etapa do processo, você precisará implementar o código correspondente para enviar os dados ao Google Analytics.

• Campo step

  Inclua um valor step para cada etapa de finalização da compra medida. Esse valor é usado para mapear as ações desse tipo com relação aos rótulos que você configurou em cada etapa nas Configurações de e-commerce.

  Observação: se você tiver um processo de finalização de compra de uma única etapa ou não tiver configurado um funil correspondente nas Configurações de comércio eletrônico, o campo step será opcional.

• Campo option

  Se você tiver informações adicionais sobre a etapa de finalização da compra no momento da medição, defina o campo option com uma ação checkout para coletar esses dados. Por exemplo, o tipo de pagamento padrão do usuário (por exemplo, Visa).

• Medição de uma etapa da finalização da compra

  Ao medir uma etapa da finalização da compra, use ec:addProduct para cada produto e ec:setAction para indicar a ação correspondente. Se necessário, será possível utilizar um actionFieldObject adicional em ec:setAction para descrever a etapa com step e option.

  O exemplo a seguir mostra como medir a primeira etapa de um processo de finalização da compra com um único produto e informações adicionais sobre o tipo de pagamento:

  ga('ec:addProduct', {               // Provide product details in an productFieldObject.
    'id': 'P12345',                   // Product ID (string).
    'name': 'Android Warhol T-Shirt', // Product name (string).
    'category': 'Apparel',            // Product category (string).
    'brand': 'Google',                // Product brand (string).
    'variant': 'black',               // Product variant (string).
    'price': '29.20',                 // Product price (number).
    'quantity': 1                     // Product quantity (number).
  });
  
  // Add the step number and additional info about the checkout to the action.
  ga('ec:setAction','checkout', {
      'step': 1,
      'option': 'Visa'
  });
  

2. Medição das opções de finalização da compra

Com as opções de finalização de compra, você pode medir informações adicionais sobre o estado dessa etapa. Isso é útil nos casos em que você mediu uma etapa de finalização de compra durante a exibição da página inicial, mas as informações adicionais sobre a mesma etapa ficaram disponíveis depois de o usuário definir uma opção. Por exemplo, o usuário seleciona um método de envio.

Para medir uma opção de finalização da compra, use ec:setAction para indicar um checkout_option e inclua o número da etapa e a descrição da opção.

Observação: não defina dados de produtos ou impressões.

Provavelmente, convém medir essa ação depois que o usuário clicar para passar à próxima etapa no processo de finalização da compra. Exemplo:

// (On "Next" button click)
ga('ec:setAction', 'checkout_option', {'step': 2, 'option': 'FedEx'});

ga('send', 'event', 'Checkout', 'Option', {
    hitCallback: function() {
      // advance to next page
    },
});

3. Configuração do funil de finalização de compra

Cada etapa do seu processo pode receber um nome descritivo que será usado nos relatórios. Para configurar esses nomes, visite a seção Administrador da interface da Web do Google Analytics, selecione a vista (perfil) e clique em Configurações de e-commerce. Siga as instruções de configuração do e-commerce para rotular cada etapa de finalização da compra a ser medida.

Observação: se você não configurar os nomes das etapas de verificação, elas vão aparecer como Etapas 1, 2, 3 etc.

Figura 1: configuração do e-commerce – funil de finalização de compra

Medição das promoções internas

O plug-in do e-commerce avançado inclui suporte para medir impressões e cliques em promoções internas, como banners exibidos com o objetivo de promover uma liquidação em outra seção do site.

Impressões da promoção

As impressões de promoções internas geralmente são medidas quando a página é carregada e enviadas com a visualização de página inicial usando o comando ec:addPromo. Exemplo:

ga('ec:addPromo', {               // Promo details provided in a promoFieldObject.
  'id': 'PROMO_1234',             // Promotion ID. Required (string).
  'name': 'Summer Sale',          // Promotion name (string).
  'creative': 'summer_banner2',   // Creative (string).
  'position': 'banner_slot1'      // Position  (string).
});

Importante: embora seja aceitável definir uma ação com uma impressão de promoção, a ação não pode ser um promo_click. Se você pretende medir uma ação promo_click, faça isso em outro hit após a impressão da promoção.

Cliques da promoção

Os cliques nas promoções internas podem ser medidos configurando a ação promo_click. Exemplo:

// Identify the promotion that was clicked.
ga('ec:addPromo', {
  'id': 'PROMO_1234',
  'name': 'Summer Sale',
  'creative': 'summer_banner2',
  'position': 'banner_slot1'
});

// Send the promo_click action with an event.
ga('ec:setAction', 'promo_click');
ga('send', 'event', 'Internal Promotions', 'click', 'Summer Sale');

Importante: não envie dados de produtos com cliques em promoções. Caso você tenha que transmitir esses dados, use outro hit.

Por exemplo, para medir uma página de detalhes do produto com uma impressão e um clique na promoção, primeiro envie os dados do produto e da impressão com a visualização de página inicial. Em seguida, envie os dados do clique na promoção em outro evento:

// 1. Send product and impression data with pageview.
ga('ec:addProduct', {
  'id': 'P12345',                   // Product ID (string).
  'name': 'Android Warhol T-Shirt', // Product name (string).
  'category': 'Apparel',            // Product category (string).
  'brand': 'Google',                // Product brand (string).
  'variant': 'Black',               // Product variant (string).
  'position': 1,                    // Product position (number).
});

// The impression from the Related Products section.
ga('ec:addImpression', {
  'id': 'P12345',                   // Product ID (string).
  'name': 'Android Warhol T-Shirt', // Product name (string).
  'category': 'Apparel/T-Shirts',   // Product category (string).
  'brand': 'Google',                // Product brand (string).
  'variant': 'Black',               // Product variant (string).
  'list': 'Related Products',       // Product list (string).
  'position': 1,                    // Product position (number).
});

ga('ec:setAction', 'detail');       // Detail action.

ga('send', 'pageview');             // Send the product data with initial pageview.

// 2. Send the promo click data when the promo click occurs.
// Call this function when promo click occurs.
function onPromoClick() {
  ga('ec:addPromo', {
    'id': 'PROMO_1234',
    'name': 'Summer Sale',
    'creative': 'summer_banner2',
    'position': 'banner_slot1'
  });

  // Send the promo_click action with an event.
  ga('ec:setAction', 'promo_click');
  ga('send', 'event', 'Internal Promotions', 'click', 'Summer Sale');
}

O promoFieldObject precisa ter um valor name ou id. Todos os outros valores são opcionais e não precisam ser definidos.

Exemplo completo

Os snippets de código abaixo mostram como o ciclo de vida do e-commerce de um único produto pode ser medido desde a impressão inicial até a transação usando o plug-in de e-commerce avançado.

Medição da impressão de um produto

Neste exemplo, primeiro um usuário visualiza o produto em uma lista de resultados da pesquisa. Para medir essa impressão de produto, use o comando ec:addImpression e forneça os detalhes do produto em impressionFieldObject:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');

ga('ec:addImpression', {
  'id': 'P12345',                   // Product details are provided in an impressionFieldObject.
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel/T-Shirts',
  'brand': 'Google',
  'variant': 'black',
  'list': 'Search Results',
  'position': 1                     // 'position' indicates the product position in the list.
});

ga('ec:addImpression', {
  'id': 'P67890',
  'name': 'YouTube Organic T-Shirt',
  'category': 'Apparel/T-Shirts',
  'brand': 'YouTube',
  'variant': 'gray',
  'list': 'Search Results',
  'position': 2
});

ga('send', 'pageview');              // Send product impressions with initial pageview.

Medição do clique em um produto

Em seguida, o usuário demonstra interesse no item ao clicar nas informações do produto para conferir mais detalhes.

Para medir o clique dele, use ec:addProduct e ec:setAction:

// Called when a link to a product is clicked.
function onProductClick() {
  ga('ec:addProduct', {
    'id': 'P12345',
    'name': 'Android Warhol T-Shirt',
    'category': 'Apparel',
    'brand': 'Google',
    'variant': 'black',
    'position': 1
  });
  ga('ec:setAction', 'click', {list: 'Search Results'});

  // Send click with an event, then send user to product page.
  ga('send', 'event', 'UX', 'click', 'Results', {
    hitCallback: function() {
      document.location = '/product_details?id=P12345';
    }
  });
}

O link do produto poderia ser implementado assim:

<a href="/next-page.html"
   onclick="onProductClick(); return !ga.loaded;">
  Android Warhol T-Shirt
</a>

Medição da visualização de detalhes de um produto

Depois de clicar sobre a lista de produtos, o usuário visualiza a página de detalhes do produto.

Para medir a visualização de detalhes do produto, especifique uma ação detail usando ec:addProduct e ec:setAction:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');

ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black'
});

ga('ec:setAction', 'detail');

ga('send', 'pageview');       // Send product details view with the initial pageview.

Medição da adição ou remoção de um produto do carrinho

O usuário demonstra a intenção de comprar o item ao adicioná-lo a um carrinho de compras.

Para medir a adição ou remoção de um produto de um carrinho de compras, use ec:addProduct e defina o tipo add ou remove:

// Called when a product is added to a shopping cart.
function addToCart(product) {
  ga('ec:addProduct', {
    'id': product.id,
    'name': product.name,
    'category': product.category,
    'brand': product.brand,
    'variant': product.variant,
    'price': product.price,
    'quantity': product.qty
  });
  ga('ec:setAction', 'add');
  ga('send', 'event', 'UX', 'click', 'add to cart');     // Send data using an event.
}

Medição do processo de finalização da compra

Agora o usuário está pronto para começar o processo de finalização da compra, que no exemplo inclui duas etapas, cada uma em uma página diferente:

• Adicionar detalhes de pagamento (payment.html).
• Adicionar detalhes de envio (shipping.html)

Se aplicável, verifique se você configurou um funil de finalização de compra adequadamente em "Administrador" na interface da Web, em Configurações de e-commerce. Exemplo:

Figura 2: Configuração do e-commerce – Funil de finalização da compra

Etapa 1: pagamento

Meça a primeira etapa da finalização da compra usando ec:addProduct para cada produto no carrinho de compras e indique um checkout com ec:setAction. O ec:setAction utiliza um actionFieldObject para descrever a etapa do pagamento com um número e mais informações sobre o tipo de pagamento padrão do usuário que foi incluído no campo option:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');

/**
 * Called when the user begins the checkout process.
 * @param {Array} cart An array representing the user's shopping cart.
 */
function checkout(cart) {
  for(var i = 0; i < cart.length; i++) {
    var product = cart[i];
    ga('ec:addProduct', {
      'id': product.id,
      'name': product.name,
      'category': product.category,
      'brand': product.brand,
      'variant':  product.variant,
      'price': product.price,
      'quantity': product.qty
    });
  }
}

// In the case of checkout actions, an additional actionFieldObject can
// specify a checkout step and option.
ga('ec:setAction','checkout', {
    'step': 1,            // A value of 1 indicates this action is first checkout step.
    'option': 'Visa'      // Used to specify additional info about a checkout stage, e.g. payment method.
});
ga('send', 'pageview');   // Pageview for payment.html

Etapa 2: envio

Meça a segunda etapa usando ec:addProduct para cada produto no carrinho de compras e indique a finalização da compra com ec:setAction. Nesse caso, não temos outras informações sobre a opção de frete selecionada quando a visualização de página inicial é enviada. Sendo assim, ela é tratada separadamente usando o ec:setAction para indicar uma checkout_option.

// Measure checkout step 2:
ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');

/**
 * Called when the user begins the checkout process.
 * @param {Array} cart An array representing the user's shopping cart.
 */
function checkout(cart) {
  for(var i = 0; i < cart.length; i++) {
    var product = cart[i];
    ga('ec:addProduct', {
      'id': product.id,
      'name': product.name,
      'category': product.category,
      'brand': product.brand,
      'variant':  product.variant,
      'price': product.price,
      'quantity': product.qty
    });
  }
}

ga('ec:setAction','checkout', {'step': 2});
ga('send', 'pageview');     // Pageview for shipping.html

// Called when user has completed shipping options.
function onShippingComplete(stepNumber, shippingOption) {
  ga('ec:setAction', 'checkout_option', {
    'step': stepNumber,
    'option': shippingOption
  });

  ga('send', 'event', 'Checkout', 'Option', {
     hitCallback: function() {
       // Advance to next page.
     }
  });
}

O formulário poderia ser implementado assim:

<a href="/next-page.html"
   onclick="onShippingComplete(2, 'FedEx'); return !ga.loaded;">
  Continue
</a>

Medição de uma transação

Por fim, o usuário conclui o processo de pagamento e envia a compra.

Para medir a venda de um ou mais produtos, use ec:addProduct para adicionar cada item e, depois, especifique uma purchase com ec:setAction. As informações do nível da transação, como receita total, tributos, entre outras, podem ser definidas usando um actionFieldObject. Exemplo:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');

ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black',
  'price': '29.20',
  'quantity': 1
});

// Transaction level information is provided via an actionFieldObject.
ga('ec:setAction', 'purchase', {
  'id': 'T12345',
  'affiliation': 'Google Store - Online',
  'revenue': '37.39',
  'tax': '2.85',
  'shipping': '5.34',
  'coupon': 'SUMMER2013'    // User added a coupon at checkout.
});

ga('send', 'pageview');     // Send transaction data with initial pageview.

Especificação de moedas locais

Por padrão, você pode configurar uma moeda global comum para todas as transações e itens pela interface da Web de gerenciamento do Google Analytics. A moeda global é automaticamente usada para todos os itens e transações. Em sites que utilizam várias moedas para realizar as transações, o plug-in do comércio eletrônico permite que você especifique a moeda local.

A moeda local precisa ser especificada no padrão ISO 4217. Leia o documento Referência de códigos de moedas para uma lista completa das moedas de conversão compatíveis.

As moedas locais são especificadas usando a propriedade currencyCode do rastreador. Por exemplo, este rastreador enviará valores de moeda em euros:

ga('create', 'UA-XXXXX-Y');
ga('require', 'ec');

ga('set', 'currencyCode', 'EUR'); // Set currency to Euros.

ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black',
  'price': '21.89',
  'quantity': 1
});

ga('ec:setAction', 'purchase', {
  id: 'T12345',
  affiliation: 'Google Store - Online',
  revenue: '28.03',
  tax: '2.14',
  shipping: '4.00',
  coupon: 'SUMMER2013'
});

ga('send', 'pageview');

Observação: para saber mais sobre como a conversão de moedas funciona no Google Analytics, leia a seção Várias moedas na referência do recurso de e-commerce.

Recursos relacionados

• Demonstração do e-commerce avançado