Integração com a FBE para lojas em CMS - Legado

Olá, comunidade VTEX! Espero que estejam todos bem. :smile:

Essa documentação faz parte de uma iniciativa VTEX para fomentar conhecimento dentro da comunidade! :rocket:

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. :smile:

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!

2 Likes