Tutorial de carrinho abandonado

​

Visão geral

• Detecta atividade no carrinho
• Aguarda por um curto período de inatividade
• Envia um lembrete personalizado
• Para de enviar mensagens imediatamente após a compra ou remoção do carrinho

• Custom Events (recomendado para a maioria das implementações)
• Tags (mais simples, casos de uso limitados)

​

O que você vai construir

• Atividade do carrinho enviada ao OneSignal (via Tags ou Custom Events)
• Um sinal de abandono claro, definido por código
• Templates de mensagem que personalizam dados do carrinho
• Uma Journey que:
  • Inicia quando um sinal de abandono é recebido
  • Aguarda antes de enviar
  • Envia uma mensagem de carrinho abandonado
  • Sai imediatamente quando o carrinho é esvaziado ou comprado
• Analytics para medir o desempenho de mensagens e receita

​

Escolha seu método de rastreamento

• Use Custom Events se você:
  • Consegue detectar abandono após um período de inatividade
  • Deseja dados ricos do carrinho (itens, imagens, preços)
  • Está confortável em garantir que os eventos disparem uma vez por abandono
• Use Tags se você:
  • Deseja segurança baseada em estado por padrão
  • Precisa apenas de dados simples do carrinho
  • Prefere entrada e saída controladas por segmento

​

Como carrinhos abandonados são modelados

• Após um período significativo de inatividade (ex.: 1 hora)
• Somente se o carrinho ainda contiver itens

​

Como as Journeys usam sinais de abandono

• O usuário se torna elegível para entrar na Journey
• Um período de espera dá tempo para ele retornar naturalmente
• Uma mensagem é enviada somente se ele não sair
• O usuário sai imediatamente quando cart_emptied é recebido

​

Configuração

​

Etapa 1. Planeje os dados e a fonte do seu carrinho

• Nome do produto, imagem, preço e quantidade
• Número de itens no carrinho
• Um deep link de volta ao carrinho

​

Etapa 2. Envie sinais de estado do carrinho ao OneSignal

OneSignal.User.trackEvent("cart_abandoned", {
  product_name: "24 Pack of Acorns",
  product_image: "https://i.imgur.com/ssPCfbC.png",
  product_price: 12.99,
  product_quantity: 1,
  cart_url: "https://yourdomain.com/cart"
});

OneSignal.User.addTags({
  cart_updated: unix_timestamp_seconds,
  product_name: "24 Pack of Acorns",
  product_image: "https://i.imgur.com/ssPCfbC.png",
  product_price: "$12.99",
  product_quantity: "1",
  cart_url: "https://yourdomain.com/username/cart"
})

{
  "events": [
    {
      "name": "cart_abandoned",
      "properties": {
        "product_name": "24 Pack of Acorns",
        "product_image": "https://i.imgur.com/ssPCfbC.png",
        "product_price": "$12.99",
        "product_quantity": "1",
        "cart_url": "https://yourdomain.com/username/cart"
      },
      "external_id": "ID_OF_THE_USER"
    }
  ]
}

{
  "properties": {
    "tags": {
      "cart_updated": "unix_timestamp_seconds",
      "product_name": "24 Pack of Acorns",
      "product_image": "https://i.imgur.com/ssPCfbC.png",
      "product_price": "$12.99",
      "product_quantity": "1",
      "cart_url": "https://yourdomain.com/username/cart"
    }
  }
}

​

Etapa 3. Crie templates de mensagem de carrinho abandonado

• Sintaxe Liquid
• Personalização de mensagens
• Templates

• Template Push com Custom Event
• Template Push com Tag

Referencie propriedades de eventos usando o formato de sintaxe Liquid:

Liquid

Copiar

Perguntar à IA

{{journey.event.name.properties.property_name | default: "fallback_value"}}

Mensagem:

Liquid

Copiar

Perguntar à IA

You left {{journey.event.cart_abandoned.properties.product_name | default: "items"}} in your cart.

Imagem:

Liquid

Copiar

Perguntar à IA

{{journey.event.cart_abandoned.properties.product_image | default: "https://i.imgur.com/ssPCfbC.png"}}

URL de abertura:

Liquid

Copiar

Perguntar à IA

{{journey.event.cart_abandoned.properties.cart_url | default: "https://yourdomain.com/cart"}}

A imagem não será exibida se product_image não for uma URL de imagem direta e publicamente acessível.Se seu product_image é o nome de um arquivo de imagem disponível online, você pode referenciar a imagem usando o seguinte formato: https://yourdomain.com/images/{{journey.event.cart_abandoned.properties.product_image | default: "stock_image"}}.png

Referencie propriedades de tags usando o formato de sintaxe Liquid:

Liquid

Copiar

Perguntar à IA

{{tag_key | default: "fallback_value"}}

Mensagem:

Liquid

Copiar

Perguntar à IA

You left {{product_name | default: "items"}} in your cart.

Imagem:

Liquid

Copiar

Perguntar à IA

{{product_image | default: "https://i.imgur.com/ssPCfbC.png"}}

URL de abertura:

Liquid

Copiar

Perguntar à IA

{{cart_url | default: "https://yourdomain.com/cart"}}

A imagem não será exibida se product_image não for uma URL de imagem direta e publicamente acessível.Se seu product_image é o nome de um arquivo de imagem disponível online, você pode referenciar a imagem usando o seguinte formato: https://yourdomain.com/images/{{journey.event.cart_updated.properties.product_image | default: "stock_image"}}.png

​

Etapa 4. Crie o Segmento de carrinho abandonado (somente Tags)

​

Etapa 5. Crie a Journey de carrinho abandonado

​

Configurações da Journey

• Custom Event: Regras de entrada
• Tag: Regras de entrada

• Selecione Custom Event
• Nome do Custom Event: cart_abandoned

Os usuários entram na Journey toda vez que o evento cart_abandoned é enviado. Envie este evento somente após um período significativo de inatividade.

• Selecione Audience Segment
• Incluir Segmento: Abandoned Cart - cart_updated

• Custom Event: Regras de saída
• Tag: Regras de saída

• Selecione Meet a certain condition
• Marque Exit when custom event condition occurs
• Nome do Custom Event: cart_emptied

Os usuários sairão da Journey quando:

• O evento cart_emptied (da etapa 3) for executado.
• Eles completarem a Journey.

• Selecione Meet a certain condition
• Marque Exit when a user no longer matches the audience conditions

Os usuários sairão da Journey quando:

• Eles saírem do segmento.
• Eles completarem a Journey.

• Selecione Yes, after a certain amount of time
• Defina o tempo de reentrada para 1 day

​

Etapas da Journey

1. Dar ao usuário tempo suficiente para esvaziar o carrinho (fazer uma compra ou esvaziar o carrinho manualmente)
2. Se eles não esvaziarem o carrinho, enviar uma mensagem lembrando-os sobre os itens no carrinho

• Defina o tempo de espera conforme desejar. Recomendamos definir para 1 hour para que você possa enviar a mensagem enquanto eles ainda têm a intenção de comprar.

• Selecione o template de Push Notification Abandoned Cart que você criou na Etapa 4.

​

Configuração avançada da Journey

​

Sequência de mensagens

1. Enviar a primeira mensagem após 1 hora (concluído neste guia).
2. Adicionar outra etapa de Wait de 1 dia e enviar uma segunda mensagem (~24 horas desde que atualizaram o carrinho).
3. Adicionar outra etapa de Wait de 2 dias e enviar uma terceira mensagem (~72 horas desde que atualizaram o carrinho).

1. Este guia mostra como enviar uma notificação push após a primeira hora. Isso é usado como um lembrete útil para tentar capturar a venda enquanto o usuário ainda pode estar online.
2. Considere usar tanto push quanto e-mail para sua 2ª mensagem. Use esta segunda mensagem para destacar benefícios e prova social com leve urgência para incentivá-los a comprar.
3. Para a mensagem final da sequência, use um e-mail ou talvez um SMS (dependendo do caso de uso) como uma “última chamada”. Considere usar um código de desconto ou outro incentivo para incentivá-los a comprar.

​

Mensagens de fallback

​

Acompanhe o desempenho

​

Acompanhe a receita com Outcomes

// Example: capture total price and item count at checkout
const checkoutPriceTotal = document.querySelector(".checkout-price-total").innerText;
const checkoutItemsTotal = document.querySelector(".checkout-items-total").innerText;

function updateOSOnCartPurchase(checkoutPriceTotal, checkoutItemsTotal) {
  const purchasePriceTotal = parseFloat(checkoutPriceTotal);
  const purchasedItemCount = parseInt(checkoutItemsTotal);

  OneSignalDeferred.push(function (OneSignal) {
    OneSignal.Session.sendOutcome("Purchase", purchasePriceTotal);
    OneSignal.Session.sendOutcome("Purchased Item Count", purchasedItemCount);
  });
}

const submitPurchaseButton = document.querySelector(".submit-payment");
if (submitPurchaseButton) {
  submitPurchaseButton.addEventListener("click", () => {
    updateOSOnCartPurchase(checkoutPriceTotal, checkoutItemsTotal);
  });
}