✨ Benefícios

• Web Push Notifications integradas nativamente.

• Captura automática de eventos de navegação, carrinho, checkout e compra.

• Integração com o CRM e automações da Inngage.

✅ Etapas de Instalação

🛠️ 1. Instalação do App na VTEX

Abra seu terminal no diretório do seu projeto VTEX IO e execute:

vtex install [email protected]

 👉 Confira esse vídeo explicativo sobre como adicionar o Plugin Inngage VTEX:

📄 2. Atualização do manifest.json

No arquivo manifest.json, adicione (ou confirme) este trecho na seção builders:

Em seguida, publique:

vtex publish

🔧 3. Configuração na Inngage

1. Acesse sua conta na Inngage.

2. Vá no menu lateral e clique em “Apps”.

3. Selecione um App existente ou clique em “Criar novo App”.

4. Vá em Configurações → Geral.

5. Clique em “Importar configurações de um App”.

Itens a serem importados:

• ✅ Eventos (obrigatório)

• ✅ Custom Fields (obrigatório)

• 🔄 Automações (opcional — obrigatório se importar campanhas ou audiências)

• 🔄 Campanhas (opcional — obrigatório se importar automações)

• 🔄 Audiências (opcional — obrigatório se importar automações)

⚠️ Atenção: este processo sobrescreve as configurações atuais do App e não é reversível.

Clique em “Importar” e depois “Confirmar” no modal de aceite.

🚚 4. Passo adicional obrigatório para checkout (VTEX Checkout v6)

📦 Para capturar os eventos:

• add_shipping_info → Quando o cliente escolhe frete ou preenche o endereço.

• add_payment_info → Quando o cliente escolhe o método de pagamento.

🔗 Acesso no admin da VTEX:

1. Acesse:
   CMS → Código → Arquivo → checkout6-custom.js

Caminho exemplo:
https://<sualoja>.myvtex.com/admin/portal/#/sites/default/code/files/checkout6-custom.js

📝 Adicione este script:

// Configuração do Inngage
window.inngageSettings = {
  appToken: "", // Substitua pelo seu appToken
  endpoint: "https://api.inngage.com.br/v1/pixelTracking/index.php"
};

// Carregar script do Inngage
const script1 = document.createElement('script');
script1.src = "https://api.inngage.com.br/v1/webpush/js/inngage.js";
script1.async = true;
script1.defer = true;
document.head.appendChild(script1);

// Código customizado para eventos de checkout da Inngage
(function() {
  let previousShipping = null;
  let previousPayment = null;

  const appToken = ""; // Substitua pelo seu appToken
  const endpoint = "https://api.inngage.com.br/v1/pixelTracking/index.php";

  console.debug("[Inngage] Checkout customizado iniciado com appToken:", appToken);

  // Função para enviar eventos do pixel
  function sendPixelEvent(eventName, eventData = {}) {
    const getLocal = (key) => {
      try { return localStorage.getItem(key); } catch { return null; }
    };

    const identifier = getLocal("identifier");
    const registration = getLocal("registration");

    if (!identifier && !registration) {
      console.warn("[Inngage] sem identifier/registration:", eventName);
      return;
    }

    const params = {
      app_token: appToken,
      event_name: eventName,
      ...(identifier && { identifier }),
      ...(registration && { registration }),
      ...Object.fromEntries(
        Object.entries(eventData)
          .filter(([_, v]) => v != null && v !== "")
          .map(([k, v]) => [k, typeof v === "number" ? v.toFixed(2) : v])
      )
    };

    const qs = new URLSearchParams(params).toString();
    new Image().src = `${endpoint}?${qs}`;
    console.debug("[Inngage] enviado no checkout", eventName, eventData);
  }

  // Intercepta eventos VTEX no checkout
  $(window).on("orderFormUpdated.vtex", function(_, orderForm) {
    if (!orderForm) return;

    console.debug("[Inngage] orderFormUpdated no checkout:", orderForm);

    const currShip = orderForm.shippingData;
    // add_shipping_info - verifica se endereço foi preenchido ou se método de entrega mudou
    if (currShip && currShip.address && currShip.address.postalCode) {
      const currentShippingTier = currShip.logisticsInfo?.[0]?.selectedSla || "";
      const previousShippingTier = previousShipping?.logisticsInfo?.[0]?.selectedSla || "";

      if (!previousShipping ||
          !previousShipping.address ||
          !previousShipping.address.postalCode ||
          currentShippingTier !== previousShippingTier) {
        console.debug("[Inngage] Enviando add_shipping_info no checkout");
        const itemsArr = (orderForm.items || []).map((i) => ({
          item_id: i.id,
          item_name: i.name,
          quantity: i.quantity,
          item_price: i.price
        }));
        sendPixelEvent("add_shipping_info", {
          currency: orderForm.storePreferencesData?.currencyCode || "BRL",
          coupon: orderForm.marketingData?.coupon || "",
          shipping_tier: currentShippingTier,
          items: JSON.stringify(itemsArr),
          value: orderForm.value || 0
        });
      }
    }
    previousShipping = JSON.parse(JSON.stringify(currShip)); // Deep clone para comparação correta

    const currPay = orderForm.paymentData;
    // add_payment_info - verifica se método de pagamento foi selecionado
    if (currPay && currPay.payments && currPay.payments.length > 0) {
      const currentPayment = currPay.payments[0];
      const previousPaymentSystem = previousPayment?.payments?.[0]?.paymentSystem;

      if (currentPayment.paymentSystem &&
          (!previousPayment ||
           !previousPayment.payments ||
           previousPayment.payments.length === 0 ||
           currentPayment.paymentSystem !== previousPaymentSystem)) {
        console.debug("[Inngage] Dados do pagamento:", {
          currentPayment,
          paymentSystems: currPay.paymentSystems,
          foundSystem: currPay.paymentSystems.find(p => p.id === currentPayment.paymentSystem)
        });
        const paymentSystem = currPay.paymentSystems.find(p => String(p.id) === String(currentPayment.paymentSystem));
        sendPixelEvent("add_payment_info", {
          payment_type: paymentSystem?.name || currentPayment.paymentSystemName || currentPayment.paymentSystem || "",
          currency: orderForm.storePreferencesData?.currencyCode || "BRL",
          value: orderForm.value || 0
        });
      }
    }
    previousPayment = JSON.parse(JSON.stringify(currPay)); // Deep clone para comparação correta
  });

  console.debug("[Inngage] Checkout customizado carregado");
})();
// Fim do código customizado para eventos de checkout da Inngage

⚙️ Antes de salvar:

• Substitua appToken: "" pelo seu token da Inngage, que está nas configurações do App na Inngage.

Exemplo:

window.inngageSettings = {
  appToken: "SEU_APP_TOKEN_AQUI",
  endpoint: "https://api.inngage.com.br/v1/pixelTracking/index.php"
};

Depois clique em Salvar.

🔥 Este script garante que os eventos de frete e pagamento sejam capturados corretamente, além dos eventos padrão já implementados pela Inngage no App da VTEX.

🖼️ Exemplos visuais

✅ Instalação do App na VTEX IO:

✅ Inserindo o script no checkout da VTEX:

🎯 Resultado

Com tudo configurado, você terá:

• ✅ Web Push funcionando.

• ✅ Eventos de navegação, carrinho, checkout e compra automaticamente capturados.

• ✅ Eventos específicos de Checkout (add_shipping_info e add_payment_info) também funcionando, possibilitando uma visão completa do funil.

🆘 Suporte

Em caso de dúvidas, fale com nosso time:
📧 [email protected]