Como implementar o Enhanced Commerce guia definitivo.

Demorou mas finalmente chegamos a um dos posts mais esperados por vocês leitores da Métricas Boss, hoje aprenderemos na prática como funciona a implementação do enhanced commerce via google tag manager. Agora vamos para o post que vai ser gigante :D

O que é, para o que serve, o que come?

Bem o inicio de tudo é entender o que é Enhanced commerce dentro do Google Analytics. Pois bem, o Enhance commerce é um conjunto de funcionalidades que aprimoram nossa visão do ecommerce que estamos analisando dentro do Google Analytics, essa funcionalide habilita pra gente dados sobre impressão de produtos, promoção e vendas.

Tá bom mas por onde eu começo ?

Primeiro passo é ativar o enhanced commerce dentro da sua vista de propriedade, vamos ao passo a passo:

  1. Selecione a vista de propriedade na qual o iremos ativar o EC;
  2. Na parte de administração do seu Google Analytics clique em “Configurações de comércio eletrônico”;
  3. Ative o comércio eletronico básico e os produtos relacionados depois clique em próximo;
  4. Ative a opção “Ativar relatórios avançados de comércio eletrônico”;
  5. Clique em enviar e sucesso :D

A implementação inicia-se pela definição da ferramenta que vai levar os dados para o GA, hoje aqui iremos usar o GTM para implementar o Enhanced Commerce, logo a após essa definição vamos dar uma olhada nos eventos pré-definidos pelo Google Analytics para implementação.



Impressões de Produtos

A impressão de produtos usa a ação impression e uma ou mais impresionFieldObjetcs, a tag abaixo mostra um array de objetos que contem informações sobre os produtos impressos na página em questão. Este objeto deverá estar presente em todas as páginas que contém vitrines dentro do seu site, não esquece. A implementação dessa tag virá com o hit de pageview da página logo o ideal é que esteja antes da implentação do GTM na tag <HEAD> do seu site.

<script>
    dataLayer.push({
        'ecommerce': {
            'currencyCode': 'BRL',
            'impressions': [
                {
                    'name': 'CANECA MINI DC COMICS WONDER WOMAN BODY', // Nome do produto esse campo é obrigatório
                    'id': '12345', // ID ou SKU do produto esse campo é obrigatório
                    'price': '10.00', // Preço do produto
                    'brand': 'DC Comics', // Marca associada ao produto
                    'category': 'Canecas', // Categoria do produto, caso queira adiciona hierarquia de categorias é só utilizar o delimitador /, exemplo: Canecas/Filmes
                    'variant': 'Branca', // Variante do produto
                    'list': 'Mais visitados', // Lista do produto, geralmente o nome da vitrine na qual o produto está inserido
                    'position': 1 // Posição do produto na lista
                },
                {
                    'name': 'CANECA HERMIONE',
                    'id': '67890',
                    'price': '19.90',
                    'brand': 'Warner',
                    'category': 'Canecas',
                    'variant': 'Branca',
                    'list': 'Mais visitados',
                    'position': 2
                }]
            }
    });
</script>



Clique em produtos

O clique em produtos será habilitados a todos os cliques em produtos na sua vitrine, home, categorias, vitrines em páginas de produtos e carrinho.

Nesse exemplo iremos utilizar Javascript puro e a utilização de data-attributes para pegar as informações na view, separamos os exemplo em 2 primeiro o código html da vitrine depois o script que vai disparar os dados beleza? Segue o link para o jsfiddle desse exemplo :D

vitrine.html

<div class="products">
    <div class="row">
        <div class="col-md-3">
            <div class="ibox">
                ...
                 <a href="/ecommerce_product_detail.html" data-name="CANECA MINI DC COMICS WONDER WOMAN BODY" data-id="12345" data-price="10.00" data-brand="DC Comics" data-category="Canecas" data-variant="Branca" data-list="Mais visitados" data-position="1" class="btn btn-xs btn-outline btn-primary">COMPRAR AGORA! <i class="fa fa-long-arrow-right"></i> </a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="ibox">
                ...
                 <a href="/ecommerce_product_detail.html" data-name="CANECA HERMIONE" data-id="67890" data-price="19.90" data-brand="Warner" data-category="Canecas" data-variant="Branca" data-list="Mais visitados" data-position="2" class="btn btn-xs btn-outline btn-primary">COMPRAR AGORA! <i class="fa fa-long-arrow-right"></i> </a>
            </div>
        </div>

    </div>
</div>

metricasEc.js

metricasEC = (function(){
    productClick = function(e){
        dataLayer.push({
            'event': 'productClick',
    	    'ecommerce': {
          	    'click': {
                    'actionField': {'list': e.getAttribute("data-list")},
                	'products': [{
                  	'name': e.getAttribute("data-name"),
        	          'id':	e.getAttribute("data-id"),
          	        'price': e.getAttribute("data-price"),
            	      'brand': e.getAttribute("data-brand"),
              	    'category': e.getAttribute("data-category"),
                	  'variant': e.getAttribute("data-variant"),
                  	'position': e.getAttribute("data-position")
                 	}]
               	}
            },
    	});
    }
      return {
      	productClick: productClick
      }
})();



Impressão de detalhe do produto

A impressão de detalhe de produto utiliza a ação detail com um ou mais productFieldObjects e deverá estar presente na página de produto. A implementação dessa tag virá com o hit de pageview da página logo o ideal é que esteja antes da implentação do GTM na tag <HEAD> do seu site.

<script>
    dataLayer.push({
      'ecommerce': {
        'detail': {
          'actionField': {'list': 'Página de produto'},
          'products': [{
              'name': 'CANECA HERMIONE',
              'id': '67890',
              'price': '19.90',
              'brand': 'Warner',
              'category': 'Canecas',
              'variant': 'Branca',
          }]
         }
       }
    });
</script>



Adicionar / Remover do carrinho

A adição ou remoção de produtos do carrinho é composta das ações add, remove actionFieldObject e uma lista de produtos productFieldObjects. A mesma pode ser usada tanto em um retorno ajax, clique em um botão, ou na submissão de um formulário. No exemplo abaixo deixarei somente o dataLayer que deverá ser implementado. O como vai ser jogado as informações fica a critério de vocês.

add.js

<script>
    dataLayer.push({
      'event': 'addToCart',
      'ecommerce': {
        'currencyCode': 'BRL',
        'add': {
          'products': [{
              'name': 'CANECA HERMIONE',
              'id': '67890',
              'price': '19.90',
              'brand': 'Warner',
              'category': 'Canecas',
              'variant': 'Branca',
          }]
        }
      }
  });
</script>

remove.js

<script>
    dataLayer.push({
      'event': 'removeFromCart',
      'ecommerce': {
        'currencyCode': 'BRL',
        'add': {
          'products': [{
              'name': 'CANECA HERMIONE',
              'id': '67890',
              'price': '19.90',
              'brand': 'Warner',
              'category': 'Canecas',
              'variant': 'Branca',
          }]
        }
      }
  });
</script>



Impressões de promoções

A visualização das promoções é representado promoFieldObject, descrevendo as promoções internas apresentadas na página, banners, sliders e etc. Esse também é um objeto relacionado ao carregamento da página, lembre-se de o adiciona-lo antes da implementação do GTM.

<script>
    dataLayer.push({
      'ecommerce': {
        'promoView': {
          'promotions': [
           {
             'id': 'JUNE_PROMO13', //ID ou NAME são obrigatórios.
             'name': 'Frete grátis', //Nome da campanha interna
             'creative': 'banner1.jpg', // Nome do arquivo o url do mesmo, serve para medir que arte teve mais impacto
             'position': 'slider1' // Pode ser desde uma área do site ou até mesmo uma posição em um slider
           }]
        }
      }
    });
</script>

Geralmente esses objetos de impressão, ficam todos juntos em um unico load usando o mesmo objeto ‘ecommerce’, fiquem ligados :D

Clique em promoções

O click em promoções manda para dentro do dataLayer a ação promoClick contendo um promoFieldObject no mesmo, para esse exemplo costumo usar o mesmo modelo de data-attributes passando as informações dentro do link da promoção. Algo importante de se lembrar é que essas promoções são somente internas, adsenses e qualquer outra campanha externa é mensurado em suas respectivas ferramentas. Vamos lá :D

Nesse exemplo também faço a divisão da view aonde passo os data-attributes do script que dispara o mesmo. Deixei também um exemplo no jsfiddle que mostra o click funcionando.

slider.html

<div class="promotionSlider">
    <div class="row">
        <div class="col-md-3">
            ...
             <a href="#" onClick="metricasEC.promotionClick(this)" data-name="CANECA MINI DC COMICS WONDER WOMAN BODY" data-id="12345" data-creative="banner1.jpg" data-position="slider1" class="btn btn-xs btn-outline btn-primary">COMPRAR AGORA! <i class="fa fa-long-arrow-right"></i> </a>
        </div>
    </div>
</div>

metricasEC.js

metricasEC = (function(){
    promotionClick = function(e){
        dataLayer.push({
            'event': 'promotionClick',
            'ecommerce': {
                'promoClick': {
                    'promotions': [
                        {
                            'id': e.getAttribute("data-id"),
                            'name': e.getAttribute("data-name"),
                            'creative': e.getAttribute("data-creative"),
                            'position': e.getAttribute("data-position")
                        }]
                    }
                }
            }
            return {
                promotionClick: promotionClick
            }
        });
})();



Passos do Checkout

Para entender melhor a implementação dos passos do checkout precisamos separar duas coisas dentro desse passo, carregamento do passo do Checkout da possibilidade do usuário adicionar alguma opção a um passo (Exemplo: Metodo de entrega, meio de pagamento e etc)

Carregamento do passo do Checkout

É composto da ação checkout e do productFieldObjects dentro do actionField.

    <script>
    function onCheckout() {
        dataLayer.push({
            'event': 'checkout',
            'ecommerce': {
                'checkout': {
                    'actionField': {'step': 1},
                    'products': [{
                        'name': 'CANECA HERMIONE',
                        'id': '67890',
                        'price': '19.90',
                        'brand': 'Warner',
                        'category': 'Canecas',
                        'variant': 'Branca',
                    }]
                }
            }
        });
    };
</script>

Essa função será disparada toda vez que algum botão leve o usuário para próxima etapa do checkout, ou houver um carregamento de uma etapa do checkout em uma URL. O campo step deverá ser obrigatóriamente um número, o nome do passo é configurado dentro do GTM, jaja mostro essa configuração para vocês.

Adicionando opções dos usuários dentro do objeto checkout

Já explicamos mais ou menos como funciona essa parte, porém quero que todos imagem o seguinte cenário. A primeira etapa do seu checkout é uma página de identificação, nela o usuário pode se logar no seu sitema, ou fazer um cadastro para continuar no processo de compra, beleza?

Pensando nessa tela, imagine que a opção que esse usuário escolher é que vai vir a ser a opção que passaremos para o checkout. Agora ficou fácil né?

<script>
    function onCheckoutOption(step, checkoutOption) {
        dataLayer.push({
            'event': 'checkoutOption',
            'ecommerce': {
                'checkout_option': {
                    'actionField': {'step': step, 'option': checkoutOption}
                }
            }
        });
    }
</script>

Ou seja a cada escolha que o usuário fizer, dentro do click ou do option selecionado deverá ser disparada a função acima :D

Configurando as etapas do checkout dentro do Google Analytics

Lembra que falamos que os valores passados no campo ‘step’ deverá ser sempre um número? Lembra também que eu falei que ia te ensinar a configurar esses números transformando eles nos nomes das etapas? Então, chegou a hora :D

  1. Selecione a vista de propriedade na qual o enhanced commerce está ativado;
  2. Na parte de administração do seu Google Analytics clique em “Configurações de comércio eletrônico”;
  3. Em etapas do funil do funil, adicione as etapas de acordo com os numéros que você coloco no código;
  4. Clique em salvar e sucesso :D

Compras

Chegamos a ultima tag para implementação do Enhance Commerce no Google Analytics, não menos importante a tag de compra é composta pela ação purchase e productFieldObjects.

<script>
    dataLayer.push({
        'ecommerce': {
            'purchase': {
                'actionField': {
                    'id': 'T12345', // ID da transação esse campo é obrigatório
                    'affiliation': 'Online Store', // A loja ou a afiliação da venda
                    'revenue': '35.43', // Valor total da transação incluindo todas as taxas
                    'tax':'4.90', // Taxas imbutidas na transação
                    'shipping': '5.99', // Valor do frete
                    'coupon': 'SUMMER_SALE' // Cupon usado pelo usuário na transação
                },
                'products': [{ // Array dos produtos comprados na transação
                    'name': 'CANECA HERMIONE',
                    'id': '67890',
                    'price': '19.90',
                    'brand': 'Warner',
                    'category': 'Canecas',
                    'variant': 'Branca',
                    'quantity': 1, // Quantidade comprada na transação
                    'coupon': '' // Caso não haja um cupon espefico para o produto passar uma string vazio ou não passar o mesmo dentro do objeto
                }]
            }
        }
    });
</script>

E aí? Acharam fácil? Bem essa é a primeira parte do post onde vimos como implementar as tags dentro do nosso código, no proximo post que você pode ver aqui ensinaremos a configurar tudo dentro do GTM. :D