

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
- Clique em Produtos
- Impressão de detalhe do produto
- Adicionar / Remover do carrinho
- Impressões de promoções
- Clique em promoções
- Passos do Checkout
- Compras



## 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.



![Captura de tela 2021-05-25 161907.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/Captura_de_tela_2021_05_25_161907_dffa5163a2.png)



## 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](https://jsfiddle.net/5qy4d47j/1/) desse exemplo :D



### vitrine.html



![Captura de tela 2021-05-25 162310.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/Captura_de_tela_2021_05_25_162310_830557cafa.png)

![Captura de tela 2021-05-25 162455.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/Captura_de_tela_2021_05_25_162455_71d65bd647.png)


## Impressão de detalhe do produto


A impressão de detalhe de produto utiliza a ação [detail](https://developers.google.com/tag-manager/enhanced-ecommerce#details) 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.

![1 Captura de tela 2021-05-25 163824.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/1_Captura_de_tela_2021_05_25_163824_057331afbf.png)


## 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.



![2 Captura de tela 2021-05-25 163905.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/2_Captura_de_tela_2021_05_25_163905_f408374b3a.png)


## Impressões de promoções



A visualização das promoções é representado [promoFieldObject](https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce?hl=pt-br#promotion-data), 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.


![3 Captura de tela 2021-05-25 163924.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/3_Captura_de_tela_2021_05_25_163924_7233315fc3.png)



## 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**


![4Captura de tela 2021-05-25 163946.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/4_Captura_de_tela_2021_05_25_163946_923a3012d7.png)




## 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.



![5 Captura de tela 2021-05-25 164731.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/5_Captura_de_tela_2021_05_25_164731_3926b07d61.png)

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é?

![Captura de tela 2021-05-25 164749.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/Captura_de_tela_2021_05_25_164749_f5f9dde0d9.png)

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.**


![7Captura de tela 2021-05-25 164807.png](https://s3.amazonaws.com/imagens.metricasboss.com.br/7_Captura_de_tela_2021_05_25_164807_4a93b70c43.png)


**E aí? Acharam fácil?**

 Bem essa é a primeira parte do post onde vimos como implementar as tags dentro do nosso código, no próximo post que você pode ver aqui ensinaremos a configurar tudo dentro do GTM. :D


**Dúvidas? Comentários? Sugestões?**



Mande um e-mail para gente contato@metricasboss.com.br, até a próxima :D




Entenda nesse post de uma vez por todas como implementar o enhanced commerce no google analytics via google tag manager.

thumbnail_pedidos-do-seu-site-batem-com-o-google-analytics-featured.png

pedidos-do-seu-site-batem-com-o-google-analytics-featured.png

Como implementar o Enhanced Commerce guia definitivo.

A Métricas Boss é uma agência de Web Analytics e usabilidade. Conte com uma empresa certificada Google Analytics para sua gestão de web analytics.

O que você irá aprender?