Passar para o conteúdo principal

Campanha de Carrinho Abandonado da Loja Integrada

Como configurar o Carrinho Abandonado - Loja Integrada

Vamos aprender nesse passo a passo como configurar a Campanha de Carrinho Abandonado para a sua loja. Em poucos passos você poderá realizar este processo e começar a recuperar vendas perdidas!
​
​📋 Pré-requisitos

Antes de começar, certifique-se de que:

  • Sua campanha de carrinho abandonado está configurada no painel da Zeki - Templates de Mensagens.

🚀 Passo a Passo da Configuração

Passo 1: Acesse o Painel Administrativo

Acesse seu painel da Loja Integrada

Passo 2: Navegue até a Seção de Códigos HTML

No menu lateral, vá para: Personalize sua Loja > Incluir códigos HTML

Passo 3: Crie um Novo Código

Clique no botão "Adicionar novo código"

Passo 4: Configure as Informações do Código

Preencha os campos conforme abaixo:

Campo

Valor a ser inserido

Descrição

Carrinho Abandonado Zeki

Local publicação

Rodapé

Página publicação

Página de Checkout

Tipo

Javascript

Passo 5: Personalize o Código (ATENÇÃO!)

Código de Javascript para anexar:

const API_URL = "https://api.zekitec.com.br/api/v1/stores/1/abandoned_cart_intent";
const USER_AUTHENTICATION_TOKEN = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjo0OTM3ODI2NjE1LCJqdGkiOiIyYjYwN2JkZTc1MzY0MzhjOGQ5NTQ3NWQ4NzI2ZWI0NSIsInVzZXJfaWQiOjExN30.DrBVj6txcKLamkJel7If7L5xA2M1T_lrtpM-AvafRo0";

let lastSent = {};


let domItemsObserver = null;


function getProductNames() {
  const products = [];
  document.querySelectorAll('.resumo-compra .produto-info').forEach(function (el) {
    let nome = el.childNodes[0].nodeValue || el.textContent;
    if (nome) {
      nome = nome.trim().replace(/"/g, "'");
      products.push(nome);
    }
  });
  return products;
}


function getCustomerData() {
  const emailInput = document.querySelector('#id_email');
  const nameInput = document.querySelector('#id_nome');
  const phoneInput = document.querySelector('#id_telefone_celular');

  let email = emailInput ? emailInput.value : '';
  let name = nameInput ? nameInput.value : '';
  let phone = phoneInput ? phoneInput.value : '';

  if (!email) {
    const caixaInfoLis = document.querySelectorAll('.caixa-info li');
    caixaInfoLis.forEach(function (li) {
      const match = li.textContent.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/);
      if (match) {
        email = match[0];
      }
    });
  }

  if (phone) {
    phone = phone.replace(/\D/g, '');
  }

  return { email, name, phone };
}


function shouldSend(data) {
  return (
    data.email &&
    (
      data.email !== lastSent.email ||
      data.name !== lastSent.name ||
      data.phone !== lastSent.phone
    )
  );
}


function sendCustomerIntent() {
  
  const products = getProductNames();
  const { email, name, phone } = getCustomerData();

  if (!products || !email) return { sent: false, reason: 'missing-products-or-email' };

  const payload = {
    email,
    name,
    phone,
    products,
    cart_url: window.location.href,
    imported_from: "LOJA_INTEGRADA"
  };

  if (!shouldSend(payload)) return { sent: false, reason: 'no-change' };

  lastSent = { email, name, phone };

  return fetch(API_URL, {
    method: "POST",
    headers: { 
      "Content-Type": "application/json",
      "Authorization": `Bearer ${USER_AUTHENTICATION_TOKEN}`,
    },
    body: JSON.stringify(payload)
  }).then((res) => ({ sent: true, status: res.status }))
    .catch((err) => ({ sent: false, reason: 'network-error', error: err && (err.message || err.toString()) }));
}


function setupListeners() {
  ['#id_email', '#id_nome', '#id_telefone_celular'].forEach(function (selector) {
    const el = document.querySelector(selector);
    if (el) {
      el.addEventListener('blur', sendCustomerIntent);
      el.addEventListener('change', sendCustomerIntent);
    }
  });

  if (document.querySelector('.caixa-info')) {
    sendCustomerIntent();
  }
}


function startLojaIntegradaAbandonedCart() {
  setupListeners();
  if (domItemsObserver) {
    try { domItemsObserver.disconnect(); } catch (e) {}
  }
  domItemsObserver = new MutationObserver(function () {
    setupListeners();
  });
  if (document && document.body) {
    domItemsObserver.observe(document.body, { childList: true, subtree: true });
  }
  return { started: true };
}


if (typeof window !== 'undefined') {
  window.startLojaIntegradaAbandonedCart = startLojaIntegradaAbandonedCart;
  
 
  window.ZekiAbandonedCart = {
    start: startLojaIntegradaAbandonedCart,
    send: sendCustomerIntent,
    data: getCustomerData,
    products: getProductNames,
    shouldSend: shouldSend,
    lastSentRef: function () { return lastSent; }
  };
}

startLojaIntegradaAbandonedCart()

No campo Conteúdo, você encontrará este trecho no código:
​

const API_URL = "https://api.zekitec.com.br/api/v1/stores/1/abandoned_cart_intent";

Você precisa fazer apenas UMA alteração:
Substitua o número 1 pelo CNPJ da sua empresa sem máscara (sem pontos, barras ou hífens).

Exemplo:
Se seu CNPJ é 16.097.187/0001-23, o código ficará:

const API_URL = "https://api.zekitec.com.br/api/v1/stores/16097187000123/abandoned_cart_intent";

⚠️ Importante: Não altere nenhuma outra parte do código!

Passo 6: Salve as Alterações

Clique no botão "Salvar alterações"

🎉 Pronto! Seu carrinho abandonado está configurado!

🔍 Como Testar a Configuração

Teste 1: Verificação Básica

  1. Acesse sua loja como um cliente

  2. Adicione produtos ao carrinho

  3. Vá até o checkout

  4. Preencha pelo menos o e-mail ou telefone

  5. Saia da página sem finalizar a compra

⚙️ Observações Importantes

Quando a campanha funciona:

✅ Cliente chega até o checkout
✅ Cliente preenche e-mail ou telefone (dependendo do canal configurado da sua campanha)
✅ Carrinho é abandonado e não realiza uma nova compra.

Quando a campanha NÃO funciona:

❌ Cliente não preenche nenhum contato
❌ Compra é finalizada com sucesso
❌ Cliente não chega na página de checkout
​

Tempo de Disparo:

⏰ A mensagem é enviada entre 30 minutos a 1 hora após o abandono do carrinho.

Respondeu à sua pergunta?