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 page view e evento do Google Analytics. Use os page views 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 page view 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 dos detalhes do produto
- adicionar/remover item do carrinho
- impressões da promoção
- cliques da promoção
- finalização de compra
- Compras
- reembolsos
Como avaliar as impressões do produto
- Avaliação do 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 do comércio eletrônico:
click - Aceita dados:
list, matriz deproductFieldObjects
Se você quiser avaliar os cliques nos links de produtos, envie à camada de dados uma ação click e um productFieldObject que representa 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 do comércio eletrônico:
detail - Aceita dados:
list, matriz deproductFieldObjects
Se você quiser avaliar as visualizações dos detalhes do produto, envie à camada de dados uma ação detail e um ou mais productFieldObjects que representam 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 um carrinho de compras
- Avaliação do comércio eletrônico:
add,remove - Aceita dados:
list, matriz deproductFieldObjects
Você também pode avaliar as adições ou remoções de um carrinho de compras usando um actionFieldObject add ou remove 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 do 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 à camada de dados com uma matriz contendo um promoFieldObject que descreve 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:
- Use 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 checkout. 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 do comércio eletrônico:
checkout - Aceita dados:
step, matriz deproductFieldObjects
Se você quiser avaliar o processo de finalização de compra, que pode incluir um botão para finalizar 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 do comércio eletrônico:
checkout_option - Aceita dados:
step,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 e 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 do comércio eletrônico:
purchase - Aceita dados:
id(ID de transação), matriz deproductFieldObjects
Envie os detalhes da transação à camada de dados usando a ação purchase e um event que disparará uma tag de comércio eletrônico avançado. Neste exemplo, os detalhes são conhecidos no momento em que a página é carregada e são enviados com um page view quando o script gtm.js retorna o seguinte:
<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 do comércio eletrônico:
refund - Aceita dados:
id(ID de transação), matriz deproductFieldObjects
Para avaliar um reembolso total de uma transação, envie um actionFieldObject refund 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': {
'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 avaliar a visualização de detalhes 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.