Métricas Boss

Como implementar remarketing dinâmico do adwords em lojas VTEX via Google Tag Manager

Finalmente chegou a hora em que iremos aprender como instalar o pixel do remarketing dinâmico! Mas, primeiro precisamos nos atentar à algumas pontos:

  • Para que tudo funcione, você precisa do seu feed do GMC ativo. No post, irei apontar quais campos precisam bater exatamente com o que você tem configurado por lá;
  • Essa é uma implementação que, conceitualmente, funciona para qualquer e-commerce. Porém, na prática, utilizaremos nos exemplos a camada de dados da VTEX e seus eventos personalizados;
  • Se você não tem uma camada de dados implementada com eventos e tudo bonitinho, dá uma olhada nesse post.

Lista de parâmetros aceitos pelo pixel de remarketing do Google Ads

Nessa lista de parâmetros iremos tratar somente os dados do tipo varejo. Mastigaremos a documentação para implementar as tags via Tag Manager, porém, se você quiser ver o completão, o próprio google disponibiliza uma documentação bem robusta baseada no gtag.

ParâmetroObrigatórioTipoDescrição
ecomm_prodidSim(Array/String)*Os ID dos produtos que estão sendo carregados nas vitrines na página atual.**
ecomm_pagetypeNãoStringIndica o tipo de página que está sendo carregada.
ecomm_totalvalueNãoCurrencyRecebe o valor de um único produto ou valor total dos valores de um ou mais produtos somados***
ecomm_categoryNãoStringRecebe o valor que especifica a categoria do produto no tipo de página product ou category

*Os ids listados devem bater exatamente com o mesmo id do feed do GMC.

**Em casos de páginas de detalhe do produto, ela aceita um único id, sendo uma string ou number.

***Esse parâmetro dever estar presente somente nos tipos de página product, carte purchase.

Tipos de páginas ecomm_pagetype do remarketing dinâmico para varejo

ecomm_pagetypeDescrição
homecarregado na página inicial do seu site.
searchresultscarregado nas páginas em que os resultados de pesquisa do usuário são exibidos.
categoryé usado em páginas que listam vários itens de uma categoria. Por exemplo, uma página que mostra todos os sapatos de um determinado estilo.
producté usado em páginas de produtos individuais.
carté usado na página do carrinho/cesta/check-out.
purchaseé usado na página exibida quando o usuário realiza uma compra (e, portanto, uma conversão). Pode ser, por exemplo, uma página de agradecimento ou confirmação.
otheré usado onde a página não se enquadra nos outros tipos de página. Por exemplo, uma página “Entrar em contato” ou “Quem somos”.

Eventos padrões da VTEX

A VTEX disponibiliza na camada de dados eventos personalizados que disparam de acordo com o tipo da página. Esses eventos cobrem basicamente todos os tipos de página ecomm_pagetype descrito na tabela que mostramos acima (só muda o nome). Abaixo vamos listar os eventos e seus respectivos ecomm_pagetypes, para criarmos nossos acionadores dentro do Google Tag Manager.

Evento VTEXecomm_pagetype
homeViewhome
internalSiteSearchViewsearchresults
categoryView e departmentViewcategory
productViewproduct
cartLoadedcart
orderPlacedpurchase
otherViewother

Para começar a implementação, precisaremos que você crie todos esses acionadores da coluna “Eventos VTEX” dentro do seu Google Tag Manager. Esses acionadores deverão ser do tipo “Evento personalizado”. Tendo “nome do evento” e o nome da tag com o valor da tabela.

Variáveis da camada de dados da VTEX que iremos utilizar nessa implementação

Além dos eventos, a VTEX disponibiliza uma série de variáveis que trazem diversas informações. Abaixo iremos listar todas que utilizaremos na implementação do remarketing dinâmico do Ads.

chave da camada de dadosDescrição
shelfProductIdsRetorna todos ids de produtos carregados na prateleira
categoryNameRetorna a categoria dos produtos carregados na página, usado somente no ecomm_pagetype category
productIdRetorna o id do produto na página que dispara o productView
productPriceToRetorna o valor de venda do produto na página que dispara o productView
productCategoryNameRetorna o valor da categoria do produto na página que dispara o productView
orderFormProductsRetorna um array de objetos com os produtos contidos no carrinho. Dispara junto ao evento cartLoaded
orderFormTotalRetorna o valor somado dos produtos contidos no carrinho. Dispara junto ao evento cartLoaded
transactionProductsRetorna um array de objetos com os produtos que foram comprados quando dispara o evento orderPlaced
transactionTotalRetorna o valor total da transação quando dispara o evento orderPlaced

Precisaremos criar todas essas variáveis dentro do nosso Google Tag Manager. Elas vão ser do tipo “Variável da camada de dados”, e deverão ter sua chave e nome da variável do jeito que passamos ali na tabela. ;)

Variáveis que iremos tratar para passar nas tags de remarketing

É claro que nem tudo são flores. Precisaremos tratar algumas das informações presentes no dataLayer para se adequar ao padrão solicitado pelo remarketing do Ads. segue abaixo a lista de variáveis que iremos criar:

NomeDescrição
transactionProductsIdsRetorna um array de ids produtos que foram comprados, essas informações serão extraídas de {{transactionProducts}}
orderFormProductsIdRetorna um array de ids produtos que estão no carrinho, essas informações serão extraídas de {{orderFormProducts}}
orderFormTotalToCurrencyTrata o padrão da vtex de valor de 0000 para 00.00, essa informação é extraída de {{orderFormTotal}}

Pois bem, vamos a criação de cada uma dessas variáveis:

transactionProductsIds

  • Nome da variável: “transactionProductsIds”
  • Tipo da variável: “Javascript personalizado”
  • Javascript personalizado:
    function() {
      return {{transactionProducts}}.map(function(p){
      	return p.id
      })
    }
    

orderFormProductsIds

  • Nome da variável: “orderFormProductsIds”
  • Tipo da variável: “Javascript personalizado”
  • Javascript personalizado:
    function() {
      return {{orderFormProducts}}.map(function(p){
      	return p.id
      })
    }
    

orderFormTotalToCurrency

  • Nome da variável: “orderFormTotalToCurrency”
  • Tipo da variável: “Javascript personalizado”
  • Javascript personalizado:
    function(){
      return {{orderFormTotal}} / 100 
    }
    

Criando variáveis permanentes

Nosso próximo passo será armazenar em variáveis nosso AW-GOOGLE_CONVERSION_ID, que está disponível nas configurações do Google Ads, aqui, que ensina como criar sua tag de remarketing.

Agora você precisa criar sua variável. Seguem as configurações abaixo:

  • Nome da variável: “googleAdsConversionId”;
  • Tipo da variável: “Permanente”;
  • Valor: Seu AW-GOOGLE_CONVERSION_ID deve ser inserido nesse campo.

Depois dessas variáveis e acionadores criados, vamos para a criação das tags. Por padrão, o Google Tag Manager disponibiliza nativamente a implementação do remarketing do adwords. Precisamos apenas configurar manualmente os parâmetros que iremos passar para dentro da tag de acordo com o seu disparo. Seguindo a ordem do ecomm_pageType, que listamos no inicio do post, segue a lista de tags:

home

  • Nome da tag: GADS - REMARKETING - homeView
  • Tipo da tag: Remarketing do Google Ads
  • Código de conversão: {{googleAdsConversionId}}
  • Parâmetros personalizados: Especificar manualmente:
    • ecomm_prodid: {{shelfProductIds}};
    • ecomm_pagetype: home;
  • Acionamento: homeView

searchresults

  • Nome da tag: GADS - REMARKETING - internalSiteSearchView
  • Tipo da tag: Remarketing do Google Ads
  • Código de conversão: {{googleAdsConversionId}}
  • Parâmetros personalizados: Especificar manualmente:
    • ecomm_prodid: {{shelfProductIds}};
    • ecomm_pagetype: searchresults;
  • Acionamento: internalSiteSearchView

category

  • Nome da tag: GADS - REMARKETING - categoryView
  • Tipo da tag: Remarketing do Google Ads
  • Código de conversão: {{googleAdsConversionId}}
  • Parâmetros personalizados: Especificar manualmente:
    • ecomm_prodid: {{shelfProductIds}};
    • ecomm_pagetype: category;
    • ecomm_category: {{categoryName}};
  • Acionamento: categoryViewdepartmentView

product

  • Nome da tag: GADS - REMARKETING - productView
  • Tipo da tag: Remarketing do Google Ads
  • Código de conversão: {{googleAdsConversionId}}
  • Parâmetros personalizados: Especificar manualmente:
    • ecomm_prodid: {{productId}};
    • ecomm_pagetype: product;
    • ecomm_totalvalue: {{productPriceTo}};
    • ecomm_category: {{productCategoryName}};
  • Acionamento: productView

cart

  • Nome da tag: GADS - REMARKETING - cartLoaded
  • Tipo da tag: Remarketing do Google Ads
  • Código de conversão: {{googleAdsConversionId}}
  • Parâmetros personalizados: Especificar manualmente:
    • ecomm_prodid: {{orderFormProductsIds}};
    • ecomm_pagetype: cart;
    • ecomm_totalvalue: {{orderFormTotalToCurrency}};
  • Acionamento: cartLoaded

purchase

  • Nome da tag: GADS - REMARKETING - orderPlaced
  • Tipo da tag: Remarketing do Google Ads
  • Código de conversão: {{googleAdsConversionId}}
  • Parâmetros personalizados: Especificar manualmente:
    • ecomm_prodid: {{transactionProductsIds}};
    • ecomm_pagetype: purchase;
    • ecomm_totalvalue: {{transactionTotal}};
  • Acionamento: orderPlaced

other

  • Nome da tag: GADS - REMARKETING - otherView
  • Tipo da tag: Remarketing do Google Ads
  • Código de conversão: {{googleAdsConversionId}}
  • Parâmetros personalizados: Especificar manualmente:
    • ecomm_pagetype: other;
  • Acionamento: otherView