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)

• 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 mensajes 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

• El usuario se vuelve elegible para entrar al Journey
• Un período de espera le da tiempo para regresar de forma natural
• Los mensajes se envían solo si no salen
• El usuario sale inmediatamente cuando el carrito se vacía

​

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 la actividad del carrito a OneSignal

OneSignal.User.trackEvent("cart_updated", {
  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"
});

{
  "events": [
    {
      "name": "cart_updated",
      "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"
    }
  ]
}

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"
})

{
  "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

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

Mensaje:

Liquid

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

Imagen:

Liquid

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

URL de lanzamiento:

Liquid

{{journey.event.cart_updated.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_updated.properties.product_image | default: "stock_image"}}.png

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

Liquid

{{tag_key | default: "fallback_value"}}

Mensaje:

Liquid

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

Imagen:

Liquid

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

URL de lanzamiento:

Liquid

{{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/{{product_image | default: "stock_image"}}.png

​

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

1. User Tag — cart_updated exists
2. Last Session — less than 7 days ago

​

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_updated
• Filtrar por propiedad: Con todas las siguientes propiedades: product_name exists

Usar eventos personalizados permite que usuarios individuales entren a los Journeys múltiples veces.Use propiedades para filtrar usuarios para que solo entren cuando exista una propiedad específica.

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

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

Los usuarios deben salir del Journey cuando vacíen su carrito o completen el Journey.

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

Esta configuración usa el mismo nombre de evento personalizado (cart_updated) tanto para las reglas de entrada como de salida.Esto permite que el usuario solo esté en el Journey una vez a la vez. Cada vez que actualice su carrito, esa instancia del usuario saldrá y una nueva instancia del mismo usuario entrará al Journey. Por eso es importante usar propiedades para filtrar usuarios dentro de las reglas de entrada.

• 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. Da al usuario suficiente tiempo para vaciar su carrito (realizar una compra o eliminar artículos manualmente)
2. Si no lo hace, envía un mensaje recordándole los artículos en su carrito

• Establezca el tiempo de espera tan largo como desee. Recomendamos establecerlo en 1 o 2 hours 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 3.

​

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).

​

Tipos de mensajes y contenido

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);
  });
}

​

Preguntas frecuentes

​

¿Debo usar eventos personalizados o etiquetas para el seguimiento del carrito?

​

¿Cuánto tiempo debo esperar antes de enviar el primer recordatorio?

​

¿Qué sucede si un usuario actualiza su carrito mientras está en el Journey?