Integração completa entre o serviço de Web Push & CRM da Inngage e sua loja VTEX IO, capturando automaticamente os principais eventos de navegação, comportamento e conversão, e enviando-os para a Inngage. Com isso, você poderá:

• Automatizar campanhas de abandono de carrinho, cross-sell, retargeting, entre outras.
• Enriquecer o perfil dos clientes com dados comportamentais em tempo real.
• Mensurar a jornada de conversão de ponta a ponta, dentro do ecossistema VTEX.

---

• Carrega o SDK da Inngage:

  
  

  _10

  <script src="https://api.inngage.com.br/v1/webpush/js/inngage.js" async defer></script>

  
  

• Define a função global window.sendPixelEvent(eventName, data) para o disparo de eventos para a Inngage.

• Gerencia dois identificadores distintos em localStorage:

  • identifier → sempre o e-mail do usuário autenticado (VTEX).
  • registration → token de Web Push (gerado via Service Worker).

• Tenta identificar o e-mail do cliente (via orderForm) por até 10 segundos (20 tentativas a cada 500 ms).

• Dispara o evento page_view ao carregar a página ou em navegação interna (popstate), com debounce de 200 ms para evitar duplicidade.

• Filtra internamente os seguintes eventos para que não sejam enviados como pixel, apenas logados no console: session_start, first_open, user_data e promotion_view.

• Escuta mensagens da VTEX via postMessage e mapeia automaticamente eventos VTEX → Inngage.

• Ao receber vtex:userData:

  1. Se não houver identifier e o usuário estiver autenticado: salva identifier = email, dispara sign_up e executa o ETL (addUserData) com { email, registration? }.
  2. Se já houver identifier e o login ainda não tiver sido enviado na sessão, dispara login e atualiza o ETL com addUserData.
  3. Se o e-mail for alterado, atualiza identifier e dispara login + addUserData.
  4. No logout (isAuthenticated=false), limpa identifier e a flag loginSent.

• Armazena cliques em “Adicionar ao carrinho” em localStorage.inngage_cartBuffer e dispara add_to_cart_batch em até 500 ms, evitando chamadas duplicadas.

Importante: os eventos session_start, first_open, user_data e promotion_view são controlados internamente e não são enviados para a Inngage, apenas registrados no console.

A tabela de eventos está ótima e bem formatada, nenhuma mudança recomendada.

Você pode disparar qualquer evento manualmente:

Esses serão enviados normalmente, pois não fazem parte da lista de eventos filtrados.

---

1. No diretório raiz do seu tema VTEX IO, execute:

   
   

   _10

   vtex install tfchmj.inngage-api

   
   

2. Verifique se a seção <builders> do seu manifest.json contém:

   
   

   _10

   {

   _10

   "builders": {

   _10

   "pixel": "0.x"

   _10

   }

   _10

   }

   
   

---

1. No Admin VTEX → Apps → Inngage Pixel, preencha:

   • App Token (appToken) – fornecido pela Inngage.
   • Channel ID (channelId) – utilizado para Web Push (padrão: 4).

2. Confirme que seu manifest.json contém:

   
   

   _10

   {

   _10

   "settingsSchema": {

   _10

   "title": "Inngage Pixel",

   _10

   "type": "object",

   _10

   "properties": {

   _10

   "appToken": { "type": "string", "title": "App Token" },

   _10

   "channelId": { "type": "number", "title": "Channel ID (opcional)", "default": 4 }

   _10

   }

   _10

   }

   _10

   }

   
   

---

A parte do Service Worker está excelente e segue boas práticas de PWA.

---

1. pixel/head.html

   • Carrega o SDK Inngage.
   • Define window.sendPixelEvent() com lógica de filtro.
   • Tenta capturar o email do orderForm.
   • Ao encontrar o email ou registration, dispara identify (interno).
   • Dispara page_view em navegação interna (popstate).

2. react/index.tsx

   • Registra listener para postMessage.

   • No evento vtex:userData:

     • Grava identifier se for novo login e dispara sign_up.
     • Chama addUserData(...) para atualizar dados no backend Inngage.
     • Se o e-mail mudar, atualiza identifier, dispara login e chama addUserData.

   • Mapeia os demais eventos para sendPixelEvent(...).

---

A seção de exemplos está muito bem feita. Só sugiro adicionar um aviso de que os exemplos podem variar conforme a estrutura da loja.

---

Essa seção está completa e clara. Apenas adicionei pontuação e melhor fluidez:

1. Console do navegador

   • Eventos enviados:

     
     

     _10

     [Inngage] enviado <evento> <payload>

     
     

   • Eventos filtrados:

     
     

     _10

     [Inngage] ignorando envio de pixel para o evento: <evento>

     
     

2. Aba "Network" (Rede)

   • Filtre por pixelTracking/index.php para visualizar os eventos.
   • As requisições são feitas via imagem (new Image().src = …), não bloqueando o carregamento da página.

3. localStorage

   • identifier → e-mail do usuário autenticado.
   • registration → token de push.
   • inngage_cartBuffer → buffer de itens adicionados ao carrinho.

4. sessionStorage

   • inngage_first_open_done → indica se o evento first_open já foi disparado nesta guia.

---

Execute:

---

Este projeto está licenciado sob a MIT License.