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.
