Pular para o conteúdo principal
MuteSix aumentou a receita em 182% com notificações de carrinho abandonado.Princeton Review: aumento de 400% nas conversões - Estudo de CasoEvino aumenta a receita em 12% - Estudo de Caso.

​
Visão geral

Lembrar os usuários sobre itens deixados em seus carrinhos de compras é uma das maneiras mais eficazes de impulsionar conversões e recuperar receita perdida. Quando implementadas adequadamente, as campanhas de carrinho abandonado entregam resultados comprovados, conforme mostrado em nossos Estudos de Caso. Este guia passo a passo mostra como implementar notificações de carrinho abandonado com código de exemplo para dois cenários:
  1. Usando as poderosas ferramentas de marcação e segmentação do OneSignal em uma Jornada baseada em segmentos.
  2. Usando os novos recursos abrangentes de Eventos Personalizados do OneSignal e duas Jornadas simples acionadas por eventos.
Se você já tem uma solução de carrinho abandonado configurada, pode usar nossos Feeds de Dados para sincronizar dados do carrinho diretamente em suas mensagens OneSignal.

​
Configuração

​
1. Rastreie a atividade do carrinho com tags

Use tags para rastrear quando os usuários adicionam itens ao carrinho. Essas tags podem incluir nome do produto, imagem e um timestamp:
  • cart_update: Timestamp Unix de quando o carrinho foi atualizado
  • product_name: Nome do produto legível para personalização
  • product_image: URL direta para imagem do produto para engajamento visual
Aqui está um exemplo básico para marcar itens adicionados a um carrinho:
let productName = "Name of the Product"; // Substitua pelo nome do item
let productImageURL = "https://yoursiteurl.com/image-file.jpg"; // Substitua pela url da imagem

// Use este método de exemplo quando o usuário adicionar item ao carrinho
async function addTagsUponCartUpdate(productName, productImageURL) {
await OneSignalDeferred.push(async function (OneSignal) {
let timestamp = Math.floor(Date.now() / 1000);
await OneSignal.User.addTags({
cart_update: timestamp,
product_name: productName,
product_image: productImageURL,
});
// Chame getTags após adicionar tags
const tags = await OneSignal.User.getTags();
console.log(tags);
});
}

// Chame a função ou anexe ao botão adicionar ao carrinho
addTagsUponCartUpdate(productName, productImageURL);
Se os usuários finalizarem a compra ou removerem itens, certifique-se de remover as tags para evitar falsos positivos.Remova as tags quando a compra estiver completa:
//Remove as tags do carrinho, chame quando o usuário comprar ou remover itens do carrinho
async function removeCartTags() {
  await OneSignalDeferred.push(async function (OneSignal) {
    let timestamp = Math.floor(Date.now() / 1000);
    await OneSignal.User.addTags({
      cart_update: "",
      product_name: "",
      product_image: "",
    });
    // Chame getTags após remover tags
    const tags = await OneSignal.User.getTags();
    console.log(tags);
  });
}
Se o usuário sair do seu site sem finalizar a compra (abandonando o carrinho), você agora tem informações suficientes para direcioná-lo com uma notificação personalizada de carrinho abandonado.

​
2. Crie um segmento de carrinho abandonado

Depois que a configuração de marcação estiver completa, precisaremos direcionar esses usuários e enviar mensagens após algum tempo. No seu Painel OneSignal, vá para Público > Segmentos.Segmentos permitem agrupar assinaturas com base nos dados coletados: 1 - se eles têm itens no carrinho e 2 - quanto tempo se passou desde que esses itens foram deixados no carrinho.
Este segmento incluirá usuários que têm itens no carrinho e saíram do site ou aplicativo móvel há mais de 1 hora. O usuário adiciona um item ao carrinho, depois sai do aplicativo ou site, 1 hora depois eles estarão neste segmento.
  1. Selecione o filtro “Tag do Usuário”
  2. Defina cart_update como “existe”
  3. Selecione “Adicionar Filtro” para criar um relacionamento “E”.
  4. Selecione o filtro “Última Sessão” e defina “maior que” 1.
  5. Selecione “Adicionar Filtro” novamente e defina outro filtro “Última Sessão” para “menor que” 24. (o usuário sairá do segmento após 24 horas).
  6. Nomeie o Segmento Carrinho Abandonado 1 Hora (não obrigatório, mas útil para lembrar).

Exemplo de segmento de carrinho abandonado

À medida que os usuários adicionam/removem itens do carrinho e saem/retornam ao site, eles automaticamente entram e saem deste segmento.Você sempre pode voltar a este segmento mais tarde se quiser mudar o período de 1 hora para um período maior.Os segmentos podem ser duplicados para criar mais e configurar diferentes períodos se você quiser enviar diferentes mensagens após períodos mais longos também.

​
3. Crie uma mensagem de carrinho abandonado

Aqui é onde podemos usar criatividade! Se o seu site/aplicativo tem certas frases, linguagem ou emojis que você gosta, então use-os! Tudo isso é ótimo para reconhecimento de marca, fazer os usuários clicarem e levá-los a finalizar a compra.Além disso, usando as tags product_name e product_image, podemos incluir esses dados na mensagem para Personalização de Mensagens.Por exemplo, podemos dizer: “Ei, Gato Legal 😸 ! Seu novo Prato de Água para Gato Amarelo está esperando por você!”. E incluir a foto do item na mensagem.No Painel OneSignal, vá para Mensagens > Modelos e selecione “Novo Modelo de Push”.Modelos são uma forma de criar mensagens reutilizáveis e monitorar quantas vezes foram enviadas e clicadas.
  1. Nomeie o Modelo: Carrinho Abandonado 1 Hora ou como você nomeou o Segmento.
  2. Adicione seu Título, exemplo: Ei, Gato Legal 😸 !
  3. Adicione sua Mensagem, exemplo: Seu novo {{product_name | default: "item"}} está esperando por você!
  • aqui {{product_name | default: "item"}} será substituído por qualquer valor definido para essa tag. Se nenhuma tag for definida, “item” será usado.
  1. Defina a Imagem como: {{product_image}}
  • aqui {{product_image}} será substituído pela URL da imagem do produto. Se o valor da tag não for um link direto para a imagem, ela não será exibida.
  1. Defina a URL de Inicialização como a URL da sua página de checkout
  • aqui, se a página de checkout for única por usuário, precisaríamos vincular à página do carrinho (se não for única) ou usar mais substituição de tags. Por exemplo, se sua página de checkout for: https://yoursite.com/username/checkout, precisamos marcar o usuário com uma tag user_name para que o nome de usuário possa ser substituído se usarmos: https://yoursite.com/{{user_name}}/checkout

Exemplo de mensagem de carrinho abandonado

Importante: você pode usar qualquer idioma nesses campos (não precisa ser inglês) e se quiser adicionar mais de 1 idioma, basta selecionar “Adicionar Idiomas” para colocar sua própria tradução para a mensagem.
  1. Abaixo da visualização, clique em “Enviar Mensagem de Teste” para testar como ficará!
  2. Quando terminar, pressione “Salvar” na parte inferior.
Agora que nosso modelo reutilizável está configurado, podemos retornar à página Mensagens > Modelos para ficar de olho em quantas vezes foi enviado e aberto.Você pode criar quantos modelos quiser e em todos os diferentes canais de onde deseja enviar.

​
4. Configure a jornada de carrinho abandonado

Navegue até Jornadas > Nova Jornada.

​
Configurações da jornada

  1. Nomeie a Jornada: Carrinho Abandonado ou qualquer coisa que você goste para reconhecer o que esta Jornada faz.
  2. Regras de Entrada: Incluir Segmento Carrinho Abandonado 1 Hora.
  3. Regras de Saída: Marque Sair quando um usuário não corresponder mais às condições do público.
  4. Regras de Reentrada: Selecione Sim, após um certo período de tempo e defina para 1 Dia.

Exemplo de configurações de jornada

  1. Pressione Salvar.

​
Etapas da jornada

Atualmente, os usuários que entram no segmento começarão a fluir pela Jornada. Se eles saírem do segmento, eles sairão da Jornada e não poderão reentrar até que 1 dia tenha passado.
  1. Adicione uma etapa de mensagem de Notificação Push, selecione o modelo Carrinho Abandonado 1 Hora e Salvar.

Exemplo de etapas da jornada

  1. Adicione uma etapa de Espera, selecione 1 Semana e Salvar.
  2. Selecione Salvar e Fechar.
Seus usuários receberão o modelo de Carrinho Abandonado personalizado uma vez a cada 8 dias (1 semana de espera + 1 dia de regra de reentrada) até que atualizem o carrinho ou finalizem a compra.
Você concluiu com sucesso a configuração mínima de Carrinho Abandonado! Agora você pode criar mais modelos, adicionar mais etapas de Jornada, mensagens e atualizar conforme necessário!Quando estiver pronto, basta pressionar Ativar.

​
5. Configuração opcional de rastreamento de desempenho do carrinho abandonado

Depois que as mensagens de carrinho abandonado forem configuradas, você pode rastrear o desempenho acessando Modelos e verificando as taxas de abertura e cliques.Se você tem uma Conta Paga do OneSignal, também pode usar Resultados para rastrear a receita real gerada.Quando o cliente finalizar o pagamento, ao selecionar o botão “Enviar Pagamento”, chame o seguinte método.
//Exemplo para obter o preço e total de itens no carrinho
// substitua ".checkout-price-total" com o nome da classe do elemento contendo o preço total do carrinho
const checkoutPriceTotal = document.querySelector(".checkout-price-total").innerText;
// opcional: substitua ".checkout-items-total" com o nome da classe do elemento contendo o total de itens no carrinho a serem comprados
const checkoutItemsTotal = document.querySelector(".checkout-items-total").innerText;
//Chame este método no evento de clique do botão final para enviar o pagamento
function updateOSOnCartPurchase(checkoutPriceTotal, checkoutItemsTotal) {
  let purchasePriceTotal = parseFloat(checkoutPriceTotal);
  let purchasedItemCount = parseInt(checkoutItemsTotal);
  OneSignalDeferred.push(function (OneSignal) {
    OneSignal.sendOutcome("Purchase", purchasePriceTotal);
    OneSignal.sendOutcome("Purchased Item Count", purchasedItemCount);
  });
}
//exemplo de adicionar este método ao botão "submit-payment"
const submitPurchaseButton = document.querySelector(".submit-payment");
if (submitPurchaseButton) {
  submitPurchaseButton.addEventListener("click", () => {
    updateOSOnCartPurchase(checkoutPriceTotal, checkoutItemsTotal);
  });
}
  • OneSignal.sendOutcome("Purchase", purchasePriceTotal); - enviará ao OneSignal o valor total da compra e acumulará essa receita para todas as compras feitas por todos os clientes que clicaram em um push ou receberam um push dentro de um período específico (influenciados) e fizeram a compra.
  • OneSignal.sendOutcome("Purchased Item Count", purchasedItemCount); - enviará ao OneSignal a quantidade total de itens comprados associados ao cliente que clicou diretamente no push para fazer uma compra ou fez a compra “influenciado” por um push.
Agora você é um especialista em OneSignal! Você alcançou uma implementação aprofundada da oferta do OneSignal e está pronto para fazer mais! Continue adicionando mais práticas recomendadas descritas em nossos Casos de Uso ou siga os links abaixo para se aprofundar nesses recursos individuais.
Precisa de ajuda?Converse com nossa equipe de Suporte ou envie email para [email protected]Por favor inclua:
  • Detalhes do problema que você está enfrentando e passos para reproduzir se disponível
  • Seu OneSignal App ID
  • O External ID ou Subscription ID se aplicável
  • A URL para a mensagem que você testou no Dashboard OneSignal se aplicável
  • Quaisquer logs ou mensagens de erro relevantes
Estamos felizes em ajudar!