Otimize o E-commerce na VTEX: Guia Prático de Instalação do Pixel do Facebook com Google Tag Manager

Hoje iremos explicar de forma prática como configurar o pixel do Facebook junto a plataforma VTEX pelo Google Tag Manager. Desde o evento de “Pageview” até o evento de “Purchase”, coletando os dados de forma dinâmica através da DataLayer (camada de dados).

Antes de começarmos é indicado que você retire qualquer plugin ou integração do Facebook de dentro da VTEX e deixe apenas o GTM e o Catálogo, isso vai evitar divergência nos dados, bugs e problemas futuros. 

Primeiro iremos instalar a Tag personalizada do Facebook Pixel, pra isso iremos seguir o passo a passo das imagens abaixo. Iremos em Configuração de tag, depois em “Descubra mais tipos de tag na Galeria de modelos da comunidade”, na aba de pesquisa, pesquise por “Facebook” e selecione a tag “Facebook Pixel”.

Adicione a Tag do Facebook Pixel a sua área de trabalho do Tag Manager, feito isso iremos realizar as primeiras configurações. A primeira etapa é renomear a tag para “0 – FB – Pageview”, usando uma nomenclatura que deixe sua área de trabalho organizada. 

Na etapa “Facebook Pixel ID” adicione o pixel do Facebook que é localizado no seu gerenciador de negócios do Facebook. Em Event Name selecione a opção “Standard” e a marcação como “Pageview”. Iremos ativar a opção “Enable Advanced Matching” para poder importar parâmetros  personalizados na nossa Tag. Em “Customer Processing Options” iremos adicionar dois parâmetros que serão “Country” e “External ID”. O valor que iremos dar ao Country será um valor estático, para isso vamos digitar apenas “br” em value, porém, para o parâmetro de “External ID” iremos criar uma variável personalizada conforme o print abaixo.

Crie uma nova variável, clique em “Configuração de Variável” e escolha o modelo “Event ID”

Após inserir o parâmetro de Event ID ao seu Workspace, renomeie como “Event ID” e salve confirme o print abaixo.

Depois de salvar o parâmetro será necessário “hashar” ele com outro parâmetro personalizado. Busque pelas variáveis na Galeria de Modelos da Comunidade.

Faça uma busca por “hash” e selecione a variável “cyrb53 Hasher” e selecione.

Dentro da função “Data String” selecione a variável “{{Event ID}}” que tinhamos criado anteriormente, renomeie para “Hash – External ID” e salve.

Os seus parâmetros ficarão assim: 

Os próximos parâmetros que vamos utilizar na nosa tag são os de Cookies, sendo eles “fbc” e “fbp”.

Vamos dar os valores desses dois parâmetros por uma variável chamada “Cookie Primário” conforme o print abaixo.

Para o “fbp” vamos criar uma nova variável, renomea-la como “Cookie Primário – _FBP”, o nome do cookie será “_fbp” e depois salve. Para o “fbc” o processo será o mesmo, porém será renomeado como “Cookie Primário – _FBC”, e o nome do cookie será “_fbc”.

Após isso, sua tag ficará como o print abaixo, também abra a opção “More Settings” e na opção “Event ID” insira o Event ID que criamos anteriormente. Para o acionador use “All Pages” e salve. Vamos para a próxima tag. Sugerimos que você teste a tag de Pageview antes do próximo passo.

A próxima tag que vamos criar é a de View Content, que é quando um usuário visualiza um item. Duplique a tag de Pageview, renomeie para “FB – View Content” e na opção de Event Name seleciona o “View Content”.

Essa tag irá precisar de novos parâmetros sendo eles: content_ids, value, currency, content_type, content_name, content_category. Para todos esses parâmetros iremos usar variáveis da camada de dados ou DataLayer.

Para o parâmetro de “content_ids” vamos acessar o debugView e procurar dentro da DataLayer o evento “productView” e a função “productId” conforme o print abaixo.

Crie uma variável de camada de dados, em “Nome da variável da camada de dados” cole o valor que você coletou da dataLayer, renomeie para “dtl – productId” e salve.

Para o parâmetro de “value” vamos acessar o debugView e procurar dentro da DataLayer o evento “productView” e a função “productPriceTo” conforme o print abaixo.

Crie uma variável de camada de dados, em “Nome da variável da camada de dados” cole o valor que você coletou da dataLayer, renomeie para “dtl – productPriceTo” e salve.

Para o parâmetro de “currency” vamos apenas adicionar um valor estático chamado “BRL”.

Para o parâmetro de “content_type” vamos considerar algumas funções do site, caso os produtos do site contenham uma variação de produtos como cores ou numeros use o valor estático “product_group” porém caso sejam produtos sem variações use o valor “product”.

Para o parâmetro de “content_name” vamos acessar o debugView e procurar dentro da DataLayer o evento “productView” e a função “productName” conforme o print abaixo.

Crie uma variável de camada de dados, em “Nome da variável da camada de dados” cole o valor que você coletou da dataLayer, renomeie para “dtl – productName” e salve.

Para o parâmetro de “content_category” vamos acessar o debugView e procurar dentro da DataLayer o evento “productView” e a função “productCategoryName” conforme o print abaixo.

Crie uma variável de camada de dados, em “Nome da variável da camada de dados” cole o valor que você coletou da dataLayer, renomeie para “dtl – productCategoryName” e salve.

Feito isso, todos os parâmetros de itens estarão preenchidos, para concluir vamos adicionar o acionador da tag.

Para a tag do View Content vamos usar um Evento Personalizado, no nome do Evento iremos adicionar “productView”, renomeie para “Evento Personalizado – View Content” e salve.

A próxima tag que vamos criar é a de Add To Cart, que é quando um usuário clica em comprar um item. Duplique a tag de View Content, renomeie para “FB – Add To Cart” e na opção de Event Name seleciona o “Add To Cart”.

Para a tag de “Add To Cart” iremos manter os mesmos parâmetros e valores da tag de View Content, sendo necessário apenas criar um novo acionador para Add To Cart conforme o print abaixo.

Selecione o tipo de acionador “Clique – Apenas Links”, coloque uma condição de “Alguns cliques em links”, “Click URL” contém “cart/add”, renomeie para “Link Click – Botão de Comprar – Add To Cart” e salve.

Ainda na Tag de Configurações avançadas busque a opção “Opções de disparo da Tag” e selecione “Uma vez por página”. Salve a tag.

A próxima tag que vamos criar é a de Search, que é quando um usuário pesquisa um item. Duplique a tag de Pageview, renomeie para “FB – Search” e na opção de Event Name seleciona o “Search”.

Para a tag de “Search” iremos manter os mesmos parâmetros e valores da tag de Pageview, sendo necessário apenas criar um novo acionador para Search conforme o print abaixo.

Para o acionador vamos usar um Evento Personalizado, o nome do evento será “departmentView”, renomeie para “Evento Personalizado – Search” e salve.

A próxima tag que vamos criar é a de Initiate Checkout, que é quando um usuário clica em finalizar compra. Duplique a tag de Add To Cart, renomeie para “FB – Initiate Checkout” e na opção de Event Name seleciona o “Initiate Checkout”.

Para essa tag não iremos precisar do parâmetro “content_category”, e “content_name” sendo assim, você pode exclui-la. Adicione o paramêtro “num_items”. o valor do parâmetro “content_ids” será alterado para essa tag.

Para o parâmetro de “content_ids” vamos acessar o debugView e procurar dentro da DataLayer o evento “email” e a função “ecommerce.checkout.products” conforme o print abaixo. Essa variável é uma variável de items e apartir dela vamos criar uma para coletar os ids.

Crie uma variável de camada de dados, em “Nome da variável da camada de dados” cole o valor que você coletou da dataLayer, renomeie para “dtl – products – Checkout” e salve.

Agora crie uma javascript personalizada, renomeie para “jsp – ids – checkout” cole o código abaixo e salve.

function() {

array_ids = [];

meus_dados = {{dtl – products – checkout}};

$.each( meus_dados, function(index) {

array_ids.push( meus_dados[index].id);

});

return array_ids;

}

Também iremos alterar o valor da variável “value” do Initiate Checkout.

Agora crie uma javascript personalizada, renomeie para “jsp – value – checkout” cole o código abaixo e salve.

function() {

total_produtos = 0;

meus_dados = {{dtl – products – checkout}};

$.each( meus_dados, function(index) {

total_produtos += (parseFloat( meus_dados[index].price) * parseFloat( meus_dados[index].quantity) );

});

return total_produtos;

}

A última variável que vamos inserir o valor é a de num_items.

Agora crie uma javascript personalizada, renomeie para “jsp – quantity – checkout” cole o código abaixo e salve.

function() {

total_produtos = 0;

meus_dados = {{dtl – Item checkout}};

$.each( meus_dados, function(index) {

total_produtos += parseFloat( meus_dados[index].quantity );

});

return total_produtos;

}

Para o acionador vamos criar 2, usaremos o Evento Personalizado, o nome do evento será “email” e “profile”, renomeie para “Evento Personalizado – Begin Checkout” e “Evento Personalizado – Begin Checkout2” e salve.

A próxima tag que vamos criar é a de Add Payment Info, que é quando um usuário entra na parte de adicionar informações de pagamentos. Duplique a tag de Initiate Checkout, renomeie para “FB – Add Payment Info” e na opção de Event Name seleciona o “AddPaymentInfo”. Não é necessário alterar os parâmetros e nem alterar variáveis ou valores dos parâmetros.

Para a tag do Add Payment Info vamos usar um Evento Personalizado, no nome do Evento iremos adicionar “payment”, renomeie para “Evento Personalizado – Add Payment Info” e salve.

A próxima tag que vamos criar é a de Purchase, que é quando um usuário efetiva uma compra. Duplique a tag de Add Payment Info, renomeie para “FB – Purchase” e na opção de Event Name seleciona o “Purchase”.

Na tag de Purchase iremos adicionar mais alguns dados do cliente, conforme o print abaixo.

Os valores do parâmetros serão coletados na dataLayer, para o Email, vamos usar uma varíavel de camada de dados, com o nome da varíavel de camada de dados como “visitorContactInfo.0”, o nome da tag será “dtl – email – visitorContactInfo” e salve.

Para o Primeiro Nome, vamos usar uma varíavel de camada de dados, com o nome da varíavel de camada de dados como “visitorContactInfo.1”, o nome da tag será “dtl – first name – visitorContactInfo” e salve.

Para o Segundo Nome, vamos usar uma varíavel de camada de dados, com o nome da varíavel de camada de dados como “visitorContactInfo.2”, o nome da tag será “dtl – last name – visitorContactInfo” e salve.

Os parâmetros dos itens também serão alterados, especificamente o “content_ids” e “value”. Primeiros vamos criar uma variável para items e depois coletar os ids conforme os prints abaixo. No debug view busque o evento “orderPlaced” e a variável de items.

Crie uma variável de camada de dados, em nome da variável da camada de dados insira “ecommerce.purchase.products”, o nome da variável para “dtl – products – purchase” e salve.

Agora crie uma javascript personalizada, renomeie para “jsp – ids – purchase” cole o código abaixo e salve.

function() {

array_ids = [];

meus_dados = {{dtl – products – purchase}};

$.each( meus_dados, function(index) {

array_ids.push( meus_dados[index].id);

});

return array_ids;

}

Essa variável vai servir de valor para o parâmetro de content_ids.

O próximo será o value.

No debug view busque o evento “orderPlaced” e a variável de value.

Agora crie uma javascript personalizada, renomeie para “jsp – value – purchase” cole o código abaixo e salve.

function() {

total_produtos = 0;

meus_dados = {{dtl – products – purchase}};

$.each( meus_dados, function(index) {

total_produtos += (parseFloat( meus_dados[index].price) * parseFloat( meus_dados[index].quantity) );

});

return total_produtos;

}

Agora crie uma javascript personalizada, renomeie para “jsp – quantity – purchase” cole o código abaixo e salve. vamos usar essa variável para o parâmetro “num_items”.

function() {

total_produtos = 0;

meus_dados = {{dtl – products – purchase}};

$.each( meus_dados, function(index) {

total_produtos += parseFloat( meus_dados[index].quantity );

});

return total_produtos;

}

Por fim, vamos criar um novo parâmetro chamado order_id pra coletar os ids de transação. Pra isso vamos voltar no debug view, procuramos o evento orderPlaced e na dataLayer a informação transactionId.

Crie uma variável de camada de dados, em nome da variável da camada de dados insira “transactionId”, o nome da variável para “dtl – transactionId” e salve.

Para o acionador vamos usar um Evento Personalizado, o nome do evento será “orderPlaced”, renomeie para “Evento Personalizado – Purchase” e salve.

Após finalizar a tag de Purchase todo seu funil de vendas para VTEX estará finalizado.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pesquisar
Traqueamentos News - Inscreva-se agora e receba todas as novidades sobre Cursos, Conteúdos, Materiais e muito mais sobre GTM e GA4

Traqueamento News

Novidades sobre GTM, GA4 e tudo sobre coleta de dados

Conheça os serviços da MdT

Conheça os serviços da MdT

Escolher o Mundo do Traqueamento é a decisão certa para empresas que buscam resultados através de dados. Conheça um pouco dos nossos serviços que poderá ajuda sua empresa a alavancar resultados de diferentes formas.

Tá afim de aprender GTM de forma avançado para e-commerce. Ainda ganhar dinheiro com isso? Esse é o curso pra você!

Já imaginou não depender de integrações que não funcionam e ter um traqueamento 100% pelo GTM. Contrate-nos e melhore seus resultados.

Precisa fazer configurações no GTM mas não consegue porque seu website! não tem Data Layer? Esqueça isso. Fazemos todo o Mapeamento de Data Layer para você!

Precisa de um projeto voltado via Server Side para mitigar os impactos das mudanças recentes de privacidade do usuário, como cookies, IOS14 e outros problemas. GTM Server Side irá te ajudar.

Seu container do GTM está bagunçado e necessitando atualizações e manutenções periódicas para acompanhar todas as plataformas. Nossa equipe de especialista é supimpa para isso

plugins premium WordPress