Neste artigo, veremos o passo a passo das configurações que deverão ser inseridas diretamente no Google Tag Manager para que sua campanha de Remarketing do Google Ads funcione corretamente.
Avisos:
- O primeiro passo e um dos mais importantes é você realizar a criação da variavel nonce dentro do seu Google Tag Manager, para isso confira nosso artigo com o passo a passo clicando aqui.
- É preciso que tenha uma conta ativa junto ao Google Ads e também junto ao Google Tag Manager;
- Não se esqueça que é necessário reivindicar a propriedade de seu domínio, para utilizar as ferramentas do Google, caso ainda não tenha feito, siga as instruções deste outro artigo;
Seguem as configurações que realizaremos neste artigo.
Então vamos às configurações:
- Variáveis
Atenção: Caso já tenha seguido o artigo Google Ads - Acompanhamento de Conversão e realizado suas configurações, clique aqui para pular as variáveis que se repetem para ambas as configurações. Caso ainda não tenha seguido o artigo citado anteriormente, siga as instruções à seguir.
Ao acessar o contêiner já reivindicado no Google Tag Manager como descrito anteriormente, acesse no menu lateral esquerdo a opção "Variáveis", e clique em "Nova" para criar uma nova variável, como demonstrado no print a seguir.
Atenção: A imagem acima se trata de uma tela do Google Tag Manager e não do painel administrativo Tray. Todas estas configurações deverão ser realizadas no próprio Google Tag Manager.
- Para escolher o tipo da variável, basta clicar na bola do centro e depois ao lado direito escolha o tipo, de acordo com as informações deste manual, como você verá mais abaixo (os tipos de Acionador e Tag são criados da mesma forma):
Agora que explicamos como realizar o procedimento de criação de uma nova variável e como selecionar o seu tipo, vamos ver as configurações de cada uma delas para que possamos criá-las corretamente!
Primeira Variável: transactionTotal
- Acesse Variáveis » Nova, escolha o tipo "Variável da camada de dados"
- Em "Nome da variável da camada de dados", insira: ecommerce.purchase.actionField.revenue
- Em "Versão da camada de dados", selecione: Versão 2
- Clique em "Salvar" e dê o seguinte nome para a variável: transactionTotal
- Salve o nome e a variável transactionTotal estará criada como segue:
Segunda Variável: checkoutTotal
- Acesse Variáveis » Nova, escolha o tipo "Variável da camada de dados"
- Em "Nome da variável da camada de dados", insira: checkoutTotal
- Em "Versão da camada de dados", selecione: Versão 2
- Clique em "Salvar" e dê o seguinte nome para a variável: checkoutTotal
- Salve o nome e a variável checkoutTotal estará criada como segue:
Terceira Variável: UserID
- Acesse Variáveis » Nova, escolha o tipo "Variável da camada de dados"
- Em "Nome da variável da camada de dados", insira: userId
- Em "Versão da camada de dados", selecione: Versão 2
- Clique em "Salvar" e dê o seguinte nome para a variável: userId
- Salve o nome e a variável userId estará criada como segue:
Quarta Variável: idProduct
- Acesse Variáveis » Nova, escolha o tipo "Variável da camada de dados"
- Em "Nome da variável da camada de dados", insira: idProduct
- Em "Versão da camada de dados", selecione: Versão 2
- Clique em "Salvar" e dê o seguinte nome para a variável: idProduct
- Salve o nome e a variável idProduct estará criada como segue:
Quinta Variável: pageCategory
- Acesse Variáveis » Nova, escolha o tipo "Variável da camada de dados"
- Em "Nome da variável da camada de dados", insira: pageCategory
- Em "Versão da camada de dados", selecione: Versão 2
- Clique em "Salvar" e dê o seguinte nome para a variável: pageCategory
- Salve o nome e a variável pageCategory estará criada como segue:
Sexta Variável: priceSell
- Acesse Variáveis » Nova, escolha o tipo "Variável da camada de dados"
- Em "Nome da variável da camada de dados", insira: priceSell
- Em "Versão da camada de dados", selecione: Versão 2
- Clique em "Salvar" e dê o seguinte nome para a variável: priceSell
- Salve o nome e a variável priceSell estará criada como segue:
Sétima Variável: OrderData
- Acesse Variáveis » Nova, escolha o tipo "Variável da camada de dados"
- Em "Nome da variável da camada de dados", insira: ecommerce.purchase
- Em "Versão da camada de dados", selecione: Versão 2
- Clique em "Salvar" e dê o seguinte nome para a variável: OrderData
- Salve o nome e a variável OrderData estará criada como segue:
Oitava Variável: google_tag_params
- Acesse Variáveis » Nova, escolha o tipo "Variável da camada de dados"
- Em "Nome da variável da camada de dados", insira: google_tag_params
- Em "Versão da camada de dados", selecione: Versão 2
- Clique em "Salvar" e dê o seguinte nome para a variável: google_tag_params
- Salve o nome e a variável google_tag_params estará criada como segue:
Até aqui configuramos todas as variáveis necessárias para o Remarketing do Google Ads, agora vamos para a próxima etapa, que é a configuração dos Acionadores!
- Acionadores
Atenção: Caso já tenha seguido o artigo Google Ads - Acompanhamento de Conversão e realizado suas configurações, clique aqui para pular os acionadores que se repetem para ambas as configurações. Caso ainda não tenha seguido o artigo citado anteriormente, siga as instruções à seguir.
Logo acima do acesso às Variáveis no menu esquerdo do Google Tag Manager, encontraremos os Acionadores! Acesse a opção "Acionadores", e clique em "Novo" para criar um novo acionador, como demonstrado no print a seguir:
- Para selecionar o tipo do acionador, assim como nas variáveis, clique no ícone central para acessar os tipos, como demonstrado a seguir:
Agora que explicamos como realizar o procedimento de criação de um novo Acionador e como selecionar o seu tipo, vamos ver as configurações de cada um deles para que possamos criá-los corretamente!
Primeiro Acionador: EasyCheckout_OrderPlaced
- Acesse Acionadores » Novo, escolha o tipo "Evento Personalizado"
- Em "Nome do evento", insira: purchase
- Em "Este acionador é disparado em", selecione: Todos os eventos personalizados
- Clique em "Salvar" e dê o seguinte nome para o acionador: EasyCheckout_OrderPlaced
- Salve o nome e o acionador EasyCheckout_OrderPlaced estará criado como segue:
Segundo Acionador: EasyCheckout_Confirmation
- Acesse Acionadores » Novo, escolha o tipo "Evento Personalizado"
- Em "Nome do evento", insira: EasyCheckout_Confirmation
- Em "Este acionador é disparado em", selecione: Todos os eventos personalizados
- Clique em "Salvar" e dê o seguinte nome para o acionador: EasyCheckout_Confirmation
- Salve o nome e o acionador EasyCheckout_Confirmation estará criado como segue:
Terceiro Acionador: DOM pronto
- Acesse Acionadores » Novo, escolha o tipo "Exibição de página"
- Em "Este acionador é disparado em", selecione: "Todas as exibições de página"
- Clique em "Salvar" e dê o seguinte nome para o acionador: DOM pronto
- Salve o nome e o acionador DOM pronto estará criado como segue:
Quarto Acionador: fireRemarketingTag
- Acesse Acionadores » Novo, escolha o tipo "Evento Personalizado"
- Em "Nome do evento", insira: fireRemarketingTag
- Em "Este acionador é disparado em", selecione: Alguns eventos personalizados
- Em "Disparar este acionador quando ocorrer um evento e todas essas condições forem verdadeiras" configure da seguinte forma:
- Event
- É igual a
- Insira: fireRemarketingTag
- Clique em "Salvar" e dê o seguinte nome para o acionador: fireRemarketingTag
- Salve o nome e o acionador fireRemarketingTag estará criado como segue:
Certifique-se de que configurou corretamente os quatro (4) acionadores conforme imagens e informações acima, somente assim o Remarketing do Google Ads irá funcionar corretamente.
Quinto acionador: Cart
- Acesse Acionadores » Novo, escolha o tipo "Evento Personalizado"
- Em "Nome do evento", insira: cart
- Em "Este acionador é disparado em", selecione: Alguns eventos personalizados
- Em "Disparar este acionador quando ocorrer um evento e todas essas condições forem verdadeiras" configure da seguinte forma:
- Event
- É igual a
- Insira: cart
- Clique em "Salvar" e dê o seguinte nome para o acionador: Cart
- Salve o nome e o acionador Cart estará criado como segue:
- Tags
Atenção: Caso já tenha seguido o artigo Google Ads - Acompanhamento de Conversão e realizado suas configurações, clique aqui para pular as Tags que se repetem para ambas as configurações. Caso ainda não tenha seguido o artigo citado anteriormente, siga as instruções à seguir.
Logo acima do acesso aos Acionadores no menu esquerdo do Google Tag Manager, encontraremos as Tags! Acesse a opção "Tags", e clique em "Nova" para criar uma nova Tag, como demonstrado no print a seguir:
Para as Tags, é necessário configurar a Tag e também selecionar o Acionador que fará o disparo desta Tag nas páginas de sua loja, enquanto que as variáveis que criamos anteriormente, serão vinculadas na configuração de cada uma das 3 Tags que criaremos.
- Clique no ícone central do campo "Configuração da tag" para acessar os tipos de Tag, como demonstrado a seguir:
Atenção: Para a configuração das Tags a seguir, será necessário que tenha em mãos o "Código de Conversão" e o "Rótulo de Conversão" obtidos em sua conta do Google Ads.
- Acesse em sua conta do Google Ads as seguintes opções: Ferramentas » Conversões » Clique no nome da conversão » Selecione a opção "Configuração da Tag" » Clique na opção "Usar o Gerenciador de tags do Google"
- Neste local serão apresentados ambos os dados que deverão ser inseridos nos campos indicados nas configurações das Tags a seguir.
Primeira Tag: Global site Ads
- Acesse Tags » Nova, escolha o tipo "HTML Personalizado"
- Em "HTML", insira o código a seguir:
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-9999999999"></script>
<script nonce="{{nonce}}">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-9999999999');
</script>
Selecione a opção: Suporte para document.write
Importante: É necessário alterar os códigos destacados em vermelho (AW-9999999999) no código apresentado anteriormente pelo seu próprio "Código de Acompanhamento Google Ads", para que a Tag dispare para o Google Ads de sua loja corretamente. Caso não saiba que código é este clique aqui e veja como consegui-lo.
- Em Acionamento, clique no ícone central e escolha o acionador "Todas as Páginas (All pages)".
- Clique em "Salvar" e dê o seguinte nome para a Tag: Global site Ads
- Salve o nome e a tag Global site Ads estará criada como segue:
Segunda Tag: userId Remarketing
- Acesse Tags » Nova, escolha o tipo "HTML Personalizado"
- Em "HTML", insira o código a seguir:
<script nonce="{{nonce}}">
gtag('event', 'page_view', {
'send_to': 'AW-9999999999',
'local_pagetype': 'conversionintent',
'local_totalvalue': {{transactionTotal}} || {{checkoutTotal}},
'user_id': {{userId}}
});
</script>
Selecione a opção: Suporte para document.write
Importante: É necessário alterar os códigos destacados em vermelho (AW-9999999999) no código apresentado anteriormente pelo seu próprio "Código de Acompanhamento Google Ads", para que a Tag dispare para o Google Ads de sua loja corretamente. Caso não saiba que código é este clique aqui e veja como consegui-lo.
- Em Acionamento, clique no ícone central e escolha o acionador: EasyCheckout_Confirmation
- Clique no botão + e inclua o segundo acionador: EasyCheckout_OrderPlaced
- Clique em "Salvar" e dê o seguinte nome para a Tag: userId Remarketing
- Salve o nome e a tag Global site Ads estará criada como segue:
Terceira Tag: Remarketing do Google Ads
- Acesse Tags » Nova, escolha o tipo "Remarketing do Google Ads"
- Em "Código de conversão", insira seu Código de Conversão Google Ads
- Em "Rótulo de conversão" insira o seu Rótulo de Conversão Google Ads
- Em "Parâmetros personalizados" selecione a opção "Usar camada de dados"
- Em "Variável das camadas de dados" selecione : {{google_tag_params}}
- Em Acionamento, clique no ícone central e escolha o acionador: fireRemarketingTag
- Clique em "Salvar" e dê o seguinte nome para a Tag: Remarketing do Google Ads
- Salve o nome e a tag Remarketing do Google Ads estará criada como segue:
Quarta Tag: Remarketing do Google Ads - Variáveis
- Acesse Tags » Nova, escolha o tipo "HTML Personalizado"
- Em "HTML", insira o código a seguir:
<script nonce="{{nonce}}">
var pagina = {{pageCategory}};(function() {
try {if (pagina == 'Produto') {
var prodid={{idProduct}}, totalvalue={{priceSell}};
prodid = JSON.parse(prodid);
dataLayer.push({
'event': 'fireRemarketingTag',
'google_tag_params': {
'ecomm_prodid': prodid,
'ecomm_pagetype': 'product',
'ecomm_totalvalue': totalvalue}});
} else if ( pagina == 'Carrinho' ) {
var products = dataLayer.map(function (elem) {
return elem['ecommerce'];
}).filter(function (valor) {
valor != "undefined"; return valor;
}).slice(-1)[0].checkout.products;
var totalvalue = 0;
if ((products.length - 1) == 0) {
var prodid = products[0]['id'];
prodid = JSON.parse(prodid);
} else {var prodid = '[';
for (var i = 0; i <= products.length - 1; i++) {
prodid += products[i]['id'];
totalvalue = products[0]['price'] * products[0]['quantity'];
if (i !== products.length - 1) {
prodid += ',';}}; prodid += ']';
prodid = JSON.parse(prodid);}
dataLayer.push({
'event': 'fireRemarketingTag',
'google_tag_params': {
'ecomm_prodid': prodid,
'ecomm_pagetype': 'cart',
'ecomm_totalvalue': totalvalue}});
} else if ( pagina == 'Busca' ) {
var products = dataLayer[0]["listProducts"];
if ((products.length - 1) == 0) {
var prodid = products[0]['idProduct'];
prodid = JSON.parse(prodid);
} else {var prodid = '[';
for (var i = 0; i <= products.length - 1; i++) {
prodid += products[i]['idProduct'];
if (i !== products.length - 1) {
prodid += ',';}}; prodid += ']';
prodid = JSON.parse(prodid);}
dataLayer.push({
'event': 'fireRemarketingTag',
'google_tag_params': {
'ecomm_prodid': prodid,
'ecomm_pagetype': 'search'}});
} else if ( pagina == 'catalogo' ) {
var products = dataLayer[0]["listProducts"];
if ((products.length - 1) == 0) {
var prodid = products[0]['idProduct'];
prodid = JSON.parse(prodid);
} else {var prodid = '[';
for (var i = 0; i <= products.length - 1; i++) {
prodid += products[i]['idProduct'];
if (i !== products.length - 1) {
prodid += ',';}}; prodid += ']';
prodid = JSON.parse(prodid);}
dataLayer.push({
'event': 'fireRemarketingTag',
'google_tag_params': {
'ecomm_prodid': prodid,
'ecomm_pagetype': 'catalog'}});
} else {
dataLayer.push({
'event': 'fireRemarketingTag',
'google_tag_params': {
'ecomm_pagetype': pagina
}});}} catch (err) {}})();
</script>
Selecione a opção: Suporte para document.write
- Em "Acionamento", clique no ícone central e escolha o acionador: DOM pronto
- Clique no botão + e inclua o segundo acionador: Cart
- Em "Adicionar exceção" selecione "EasyCheckout_OrderPlaced"
- Clique em "Salvar" e dê o seguinte nome para a Tag: Remarketing do Google Ads - Variáveis
- Salve o nome e a tag Remarketing do Google Ads - Variáveis estará criada como segue:
Quinta Tag: Remarketing do Google Ads - Variáveis Checkout
- Acesse Tags » Nova, escolha o tipo "HTML Personalizado"
- Em "HTML", insira o código a seguir:
<script nonce="{{nonce}}">
var OrderData = {{OrderData}};(function() { try {
var totalvalue = OrderData.actionField.revenue;
var products = OrderData.products;
if ((products.length - 1) == 0) {
var prodid = products[0]['id'];
prodid = JSON.parse(prodid);
} else {var prodid = '[';
for (var i = 0; i <= products.length - 1; i++) {
prodid += products[i]['id'];
if (i !== products.length - 1) {
prodid += ',';}};
prodid += ']';
prodid = JSON.parse(prodid);}
dataLayer.push({
'event': 'fireRemarketingTag',
'google_tag_params': {
'ecomm_prodid': prodid,
'ecomm_pagetype': 'purchase',
'ecomm_totalvalue': totalvalue } });
} catch (err) {}
})();
</script>
Selecione a opção: Suporte para document.write
- Em "Acionamento", clique no ícone central e escolha o acionador: EasyCheckout_OrderPlaced
- Clique em "Salvar" e dê o seguinte nome para a Tag: Remarketing do Google Ads - Variáveis Checkout
- Salve o nome e a tag Remarketing do Google Ads - Variáveis Checkout estará criada como segue:
- Enviando os dados
Pronto! Finalizamos as configurações das Variáveis, Acionadores e Tags necessárias para esta integração e agora é importante que você publique estas configurações para que sua loja dispare os dados que criamos acima.
- Acesse no menu superior do Google Tag Manager, no canto direito o botão "Enviar", como segue na imagem a seguir:
- Na tela a seguir deixe configurado para "Publicar e criar versão" e então clique em "Publicar", como segue:
- Caso queira dar um nome e inserir uma breve descrição do que foi configurado nesta versão, poderá incluir nesta etapa, e então, basta clicar em "Continuar" para finalizar a publicação e carregar estas Tags em sua loja.
Pronto! utilizando as configurações acima, a integração irá operar corretamente, lembrando que é preciso que valide se todos os itens acima foram configurados corretamente em seu Google Tag Manager, para que possa garantir o seu devido funcionamento!
Boas Vendas!
Equipe Tray.