Tutorial de carrito abandonado

​

Descripción general

• Detecta la actividad del carrito
• Espera un breve período de inactividad
• Envía un recordatorio personalizado
• Detiene los mensajes inmediatamente después de la compra o eliminación del carrito

• Eventos personalizados (recomendado para la mayoría de las implementaciones)
• Etiquetas (más simple, casos de uso limitados)

​

Lo que construirá

• Actividad del carrito enviada a OneSignal (a través de etiquetas o eventos personalizados)
• Una señal de abandono clara, definida por código
• Plantillas de mensajes que personalizan los datos del carrito
• Un Journey que:
  • Se inicia cuando se recibe una señal de abandono
  • Espera antes de enviar
  • Envía un mensaje de carrito abandonado
  • Sale inmediatamente cuando el carrito se vacía o se completa la compra
• Analíticas para medir el rendimiento de mensajes e ingresos

​

Elija su método de seguimiento

• Use eventos personalizados si:
  • Puede detectar el abandono después de un período de inactividad
  • Desea datos enriquecidos del carrito (artículos, imágenes, precios)
  • Se siente cómodo asegurándose de que los eventos se disparen una vez por abandono
• Use etiquetas si:
  • Desea seguridad basada en estado por defecto
  • Solo necesita datos simples del carrito
  • Prefiere entrada y salida controladas por segmento

​

Cómo se modelan los carritos abandonados

• Después de un período significativo de inactividad (por ejemplo, 1 hora)
• Solo si el carrito todavía contiene artículos

​

Cómo los Journeys usan señales de abandono

• El usuario se vuelve elegible para entrar al Journey
• Un período de espera les da tiempo para regresar naturalmente
• Se envía un mensaje solo si no salen
• El usuario sale inmediatamente cuando se recibe cart_emptied

​

Configuración

​

Paso 1. Planifique sus datos y fuente del carrito

• Nombre del producto, imagen, precio y cantidad
• Número de artículos en el carrito
• Un enlace profundo de regreso al carrito

​

Paso 2. Envíe señales de estado del carrito a 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"
    }
  }
}

​

Paso 3. Cree plantillas de mensajes de carrito abandonado

• Sintaxis Liquid
• Personalización de mensajes
• Plantillas

• Plantilla push de evento personalizado
• Plantilla push de etiqueta

Haga referencia a las propiedades del evento usando el formato de sintaxis Liquid:

Liquid

Copiar

Preguntar a la IA

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

Mensaje:

Liquid

Copiar

Preguntar a la IA

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

Imagen:

Liquid

Copiar

Preguntar a la IA

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

URL de lanzamiento:

Liquid

Copiar

Preguntar a la IA

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

La imagen no se mostrará si product_image no es una URL de imagen directa y públicamente accesible.Si su product_image es el nombre de un archivo de imagen disponible en línea, puede hacer referencia a la imagen usando el siguiente formato: https://yourdomain.com/images/{{journey.event.cart_abandoned.properties.product_image | default: "stock_image"}}.png

Haga referencia a las propiedades de la etiqueta usando el formato de sintaxis Liquid:

Liquid

Copiar

Preguntar a la IA

{{tag_key | default: "fallback_value"}}

Mensaje:

Liquid

Copiar

Preguntar a la IA

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

Imagen:

Liquid

Copiar

Preguntar a la IA

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

URL de lanzamiento:

Liquid

Copiar

Preguntar a la IA

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

La imagen no se mostrará si product_image no es una URL de imagen directa y públicamente accesible.Si su product_image es el nombre de un archivo de imagen disponible en línea, puede hacer referencia a la imagen usando el siguiente formato: https://yourdomain.com/images/{{journey.event.cart_updated.properties.product_image | default: "stock_image"}}.png

​

Paso 4. Cree el segmento de carrito abandonado (solo etiquetas)

​

Paso 5. Cree el Journey de carrito abandonado

​

Configuración del Journey

• Evento personalizado: Reglas de entrada
• Etiqueta: Reglas de entrada

• Seleccione Custom Event
• Custom Event Name: cart_abandoned

Los usuarios entran al Journey cada vez que se envía el evento cart_abandoned. Solo envíe este evento después de un período de inactividad significativo.

• Seleccione Audience Segment
• Include Segment: Abandoned Cart - cart_updated

• Evento personalizado: Reglas de salida
• Etiqueta: Reglas de salida

• Seleccione Meet a certain condition
• Marque Exit when custom event condition occurs
• Custom Event Name: cart_emptied

Los usuarios saldrán del Journey cuando:

• Se realice el evento cart_emptied (del paso 3).
• Completen el Journey.

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

Los usuarios saldrán del Journey cuando:

• Abandonen el segmento.
• Completen el Journey.

• Seleccione Yes, after a certain amount of time
• Establezca el tiempo de reingreso en 1 day

​

Pasos del Journey

1. Dar al usuario suficiente tiempo para vaciar su carrito (realizar una compra o vaciar su carrito manualmente)
2. Si no vacían su carrito, enviarles un mensaje recordándoles los artículos en su carrito

• Establezca el tiempo de espera tan largo como desee. Recomendamos establecerlo en 1 hour para que pueda enviarles mensajes mientras aún tienen la intención de comprar.

• Seleccione la plantilla de notificación push Abandoned Cart que creó en el Paso 4.

​

Configuración avanzada del Journey

​

Secuencia de mensajes

1. Enviar el primer mensaje después de 1 hora (completado en esta guía).
2. Agregar otro paso Wait de 1 día y enviar un segundo mensaje (~24 horas desde que actualizaron su carrito).
3. Agregar otro paso Wait de 2 días y enviar un tercer mensaje (~72 horas desde que actualizaron su carrito).

1. Esta guía muestra cómo enviar un mensaje de notificación push después de la primera hora. Esto se usa como un recordatorio útil para intentar capturar la venta mientras el usuario puede estar todavía en línea.
2. Considere usar tanto push como correo electrónico para su segundo mensaje. Use este segundo mensaje para destacar beneficios y prueba social con urgencia ligera para animarlos a comprar.
3. Para el mensaje final de la secuencia, use un correo electrónico o quizás un SMS (dependiendo del caso de uso) como “última llamada”. Considere usar un código de descuento u otro incentivo para animarlos a comprar.

​

Mensajes de respaldo

​

Seguimiento del rendimiento

​

Seguimiento de ingresos con 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);
  });
}