Olá, comunidade VTEX! Espero que estejam todos bem.
Essa documentação faz parte de uma iniciativa VTEX para fomentar conhecimento dentro da comunidade!
Nesta thread, você entenderá melhor como realizar a configuração da Facebook Business Extension (FBE) para lojas em CMS - Legado, utilizando o Google Tag Manager (GTM).
Para a configuração da FBE em lojas VTEX IO, siga esta outra documentação do nosso help.
A Facebook Business Extension (FBE) é uma plataforma que oferece uma maneira simplificada de integrar com serviços e funcionalidades do Facebook.
Para isso, a VTEX desenvolveu e disponibilizou na loja de aplicativos, a Facebook Business Extension e Conversions API, que facilita a integração com a FBE.
Depois de instalar e configurar corretamente, esta integração instalará automaticamente as seguintes funcionalidades nas lojas VTEX:
- Pixel do Facebook (somente lojas em VTEX IO)
- API de Conversões
- Catálogo
- Botão ‘Compre Agora’ do Facebook
- Botão ‘Compre Agora’ do Instagram
Sendo assim, este app tem compatibilidade total com lojas que operam em VTEX IO, e compatibilidade parcial com lojas que são CMS - Legado, por não oferecer a funcionalidade do Pixel do Facebook, em lojas CMS.
Então para seguir com essa integração, o primeiro passo, é instalar a app da FBE.
Para instalar, siga até a loja de aplicativos em seu admin VTEX, e procure por “facebook”, você deve encontrar a app “FBE”, como ilustro abaixo:
Clique em “instalar”, para efetuar a instalação do app em seu admin.
Depois da instalação, recarregue a página do admin, e a integração já deve passar a aparecer no módulo de “marketplaces”, bem aqui:
Para seguir configurando, acesse o menu da integração, clicando em “Facebook”, no módulo de Marketplaces;
Ao acessar a tela de configurações da FBE, você verá a integração ainda desconfigurada;
Como estamos nos referindo a configuração em uma loja CMS - Legado, e como mencionei acima, a funcionalidade do Pixel do Facebook não irá funcionar para lojas em CMS, e por isso, já deixaremos ela desativada nessa parte da configuração.
Depois é só clicar em “continuar com o Facebook”, como ilustro na imagem abaixo:
Siga avançando nas opções de configuração, até que a configuração esteja concluída:
Prontinho, a FBE já está instalada na sua loja.
Agora iremos para a configuração do evento de purchase para o Pixel.
Basicamente seguiremos a documentação que mencionei, a partir do “Step 1 - Create the Trigger”.
O que explicamos no artigo, é que primeiro, no Google Tag Manager, você deve ter um evento de “orderPlaced”, que será efetivamente o evento de purchase;
Se você já tiver, pode passar diretamente para a criação da tag, mas se ainda não tiver, primeiro você deve criar um trigger do tipo “Custom Event” , e definir o nome dele como orderPlaced
; Conforme a imagem:
Não se esqueça de salvar tudo.
Então, seguiremos para a criação da tag;
Como eu havia mencionado, toggle do pixel, na integração da Facebook Business Extension, realmente só funciona para lojas em VTEX IO; Já em lojas legado, nós recomendamos deixar desativado desde a configuração inicial.
Com ele desativado, você poderá copiar o código do evento de purchase, como ilustro abaixo:
Depois, é só copiar o código que aparecerá, clicando no botão “copy” ou “copiar”:
Esse snippet contém todos os parâmetros requeridos para disparar o evento de purchase sem duplicações;
Então com ele em mãos, vá para o Google Tag Manager.
No Tag Manager, caso você ainda não possua a tag de purchase, será necessário criar uma.
Crie uma tag “Custom HTML”, e cole o conteúdo que copiou na caixa de texto de HTML.
Depois, defina para que o trigger seja o seu evento de “orderPlaced”, como na captura de tela abaixo:
Se você já tiver uma tag de purchase configurada anteriormente, substitua o código por este que você copiou do Admin.
Caso você possua alguma customização na Tag de Purchase, sugiro que siga nossa documentação oficial, a partir de “Step 2b - What if I already have other customizations in my Purchase Tag?”
Prontinho, o evento de purchase também está configurado e deve disparar corretamente e sem duplicações.
Para mais informações sobre essa integração, leia também esta documentação em nosso portal de desenvolvedores.
Caso precise de suporte, não deixe de abrir um chamado técnico com o suporte da VTEX!