A plataforma VTEX permite realizar instalação de Tags através do Google Tag Manager, tem um campo específico para inserir o código.
Dentro da plataforma ir em Checkout > Google Tag Manager, em seguida insira o ID do Google Tag Manager - GTM-000000000.
OBS: Verificar se ficou algum espaço antes do G do GTM, geralmente quando colamos o código, fica um espaço a mais, limpar o espaço para não dar erro na instalação.
Verifique se o cliente utiliza a versão io da Vtex, caso ele utilize, é necessário instalar o plugin do Google Tag Manager e inserir o id do GTM.
A plataforma da VTEX utiliza um dataLayer para gerar as informações finais como valor da compra e número do pedido, então quando pegar a plataforma VTEX e for realizar uma conversão de compra, é só seguir os passos abaixo.
1° Criar uma nova tag no Google Tag Manager do anunciante.
2° Escolher a opção: Acompanhamento de conversões do Google Ads.
3° Inserir nos campos o Código da Conversão e o Rótulo da Conversão que são gerados pelo Google Ads.
4° Para atrelar a conversão ao valor da compra gerado, clicar em + no Valor da conversão.
5° Irá abrir a janela de variáveis, clicar no botão + canto superior direito.
6° Clicar em Configuração da Variável.
7° Escolher a opção Variável da camada de dados.
8° No campo Nome da variável da camada de dados colocar o seguinte nome de variável dataLayer: transactionTotal
9° No campo Código da transação, realizar os mesmos passos 4, 5, 6 e 7 do campo valor da transação e colocar a variável dataLayer: transactionId
Desta forma, estaremos pegando o número do pedido gerado na página final.
10° No Código da moeda é só colocar o código da moeda de cada País, no exemplo abaixo segue configurado para Brasil: BRL.
11° E por fim, configurar o acionamento na página final da compra. A Vtex gera um evento personalizado com o nome orderPlaced que pode ser utilizado para o acionamento da conversão.
12° Na tag, clicar lá embaixo no quadradinho de acionamento.
13° Clicar no botão do + no canto superior direito.
14° Clicar em Configuração do Acionador e logo após em Evento Personalizado na lista a direita.
15° Configurar o Evento Personalizado com o nome descrito no passo 11, ou seja, orderPlaced. A configuração deve ficar igual abaixo.
É simples assim, está finalizada a conversão de compra.
Não esqueça de salvar todas as alterações e publicar o contêiner.
Em seguida, teste com o visualizador do GTM para garantir que a tag esteja disparando corretamente, pegando o valor e o ID da transação.
Para o Remarketing Dinâmico funcionar de forma correta, antes de iniciar a implementação, certifique-se de que o anunciante tem uma conta no Merchant Center com produtos ativos (feed validado) e se ele já iniciou o programa de Remarketing dentro da plataforma do Merchant Center. Caso o programa não tenha sido configurado, você pode configurar com ele na opção abaixo:
1° Baixe o contêiner (JSON) do Google Tag Manager no link abaixo. Iremos importar o container abaixo no GTM do cliente para evitar a criação das tags manualmente.
✓ Envie o arquivo ao anunciante por e-mail.
IMPORTANTE: Não envie o link acima diretamente para o anunciante, faça o download na sua máquina e encaminhe para ele como anexo no e-mail.
Ele não terá acesso ao link acima.
✓ Explique para o anunciante como extrair o arquivo .zip.
Após a extração, irá aparecer o arquivo com o final .json na pasta extraída (pode instruí-lo a criar uma nova pasta para extração do arquivo, para assim não haver confusão com os nomes).
2° Importe no GTM conforme prints abaixo:
Entre em “Administrador” e clique em “Importar contêiner”.
Configure tudo conforme a print abaixo:
3° Conforme na print acima, escolha "Existente", "Combinar" e "Renomear Acionadores, Tags e Variáveis em Conflito" apenas para ter certeza que irá dar tudo certo e não irá remover nenhuma tag já existente no container.
✓ Isso irá criar automaticamente todas as tags, acionadores e variáveis necessárias para o remarketing dinâmico.
✓ Não se esqueça de alterar o código da conversão para o código da conta do Google Ads do cliente.
Modelo de tag do Remarketing normal:
Modelo de tag do Remarketing dinâmico:
Comércio eletrônico Vtex é necessário somente importar o contêiner abaixo dependendo da versão do Analytics do anunciante. Lembrando que o contêiner do GA4 Ecommerce apenas cria os 4 eventos principais do funil (view_item, add_to_cart, begin_checkout e purchase).
1° Baixe o contêiner (JSON) do Google Tag Manager no link abaixo. Iremos importar o container abaixo no GTM do cliente para evitar a criação das tags manualmente.
https://drive.google.com/corp/drive/u/0/folders/1blWmoiInHhI69mDRFatBN01tOhxyayps?resourcekey=0-DJDHnF94Wn-qe2pUyD1ddA
✓ Envie o arquivo ao anunciante por e-mail.
IMPORTANTE: Não envie o link acima diretamente para o anunciante, faça o download na sua máquina e encaminhe para ele como anexo no e-mail.
Ele não terá acesso ao link acima.
✓ Explique para o anunciante como extrair o arquivo .zip.
Após a extração, irá aparecer o arquivo com o final .json na pasta extraída (pode instruí-lo a criar uma nova pasta para extração do arquivo, para assim não haver confusão com os nomes).
2° Importe no GTM conforme prints abaixo:
Importe no GTM conforme prints abaixo:
Entre em “Administrador” e clique em “Importar contêiner”:
Configure tudo conforme a print abaixo:
3° Conforme na print acima, escolha "Existente", "Combinar" e "Renomear Acionadores, Tags e Variáveis em Conflito" apenas para ter certeza que irá dar tudo certo e não irá remover nenhuma tag já existente no container.
✓ Isso irá criar automaticamente todas as tags, acionadores e variáveis necessárias para o enhanced ecommerce.
Para finalizar a configuração, basta abrir a tag de configuração do Universal Analytics ou GA4 no espaço de trabalho onde o contêiner foi importado e colocar o ID da propriedade do anunciante.
IMPORTANTE: Cuidado com as tags duplicadas e com a publicação, nunca se esqueça de pluclicar o contêiner.
1° Configure a Tag de compra normalmente, como ensinado lá em cima, no tópico "Conversão de compra na Vtex".
2° Após finalizar a configuração da tag de compra, marque a opção "Incluir dados fornecidos pelo usuário do seu site" e clique em "Select user-data provided variable" e após isso selecione a opção "Nova variável".
3° Após isso, irá abrir uma janela para configuração das variáveis de dados de usuário, clique na variável de "Email" e selecione novamente a opção "Nova variável".
4° Clique em "Configuração da Variável" e no menu da direita selecione "Variável da camada de dados".
5° Coloque o nome da variável como visitorContactInfo.0 conforme mostrado no print abaixo:
E pronto, a conversão otimizada está aplicada! Basta salvar tudo e aplicar os testes.
Para configurar o Google Merchant Center na plataforma Vtex deve ser seguido o seguinte passo a passo disponibilizado pela própria plataforma: