Saltar al contenido principal

​
Descripción general

Esta guía recorre múltiples formas de impulsar recordatorios de carrito abandonado en OneSignal. Aprenderá cómo sincronizar datos del carrito y personalizar correos electrónicos o notificaciones push cuando los usuarios dejan artículos atrás. Puede impulsar plantillas de carrito abandonado con:
  1. API custom_data — pase detalles del carrito en línea con su solicitud de mensaje.
  2. Etiquetas — almacene pares clave-valor para personalizar mensajes.
  3. Eventos personalizados — active Journeys desde eventos de usuario como cart_updated.
  4. Feeds de datos — extraiga datos del carrito en tiempo real directamente de su API en el momento del envío del mensaje.
Cada enfoque admite personalización Liquid y funciona con plantillas de Email y Push.

​
Ejemplos de configuración

  • API: custom_data
  • Etiquetas
  • Eventos personalizados
  • Feeds de datos
Use la API de creación de mensajes con la propiedad custom_data para inyectar datos del carrito almacenados en su servidor. Mejor para datos de carrito controlados del lado del servidor.Ejemplo de payload custom_data:
JSON
{
  "custom_data": {
    "cart_url": "https://yourdomain.com/cart",
    "cart": [
      {
        "cartImageURL": "https://i.imgur.com/ssPCfbC.png",
        "cartProductName": "24 Pack of Acorns",
        "cartQuantity": "1",
        "cartPrice": "$12.99"
      },
      {
        "cartImageURL": "https://i.imgur.com/8QWTfV4.png",
        "cartProductName": "Fancy Sweater",
        "cartQuantity": "1",
        "cartPrice": "$9.99"
      }
    ]
  }
}

​
Plantilla de correo electrónico de carrito abandonado

Este ejemplo de plantilla de correo electrónico demuestra cómo mostrar los artículos del cart Usando sintaxis Liquid:
  • Número total de artículos en el carrito
  • Artículos en el carrito del usuario incluyendo:
    • Imagen del producto
    • Nombre del producto
    • Cantidad del producto
    • Precio del producto
  • Enlace a la URL personalizada del carrito del cliente

Ejemplo de plantilla de correo electrónico de carrito abandonado

​
Configuración de la plantilla de correo electrónico

1

Crear una nueva plantilla de correo electrónico

Navegue a Mensajes > Plantillas > Nueva plantilla de correo electrónico.
2

Usar el Editor de Arrastrar y Soltar

3

Crear 5 filas con lo siguiente:

  • Las filas 1, 2 y 4 tienen 1 columna con un bloque de Texto.
  • La fila 3 tiene 4 columnas con: bloque HTML | bloque Texto | bloque Texto | bloque Texto
  • La fila 5 tiene 1 columna con un bloque de Botón

Configuración de plantilla de correo electrónico de carrito abandonado

​
Mostrar el recuento de artículos en el correo electrónico

Usando la sintaxis Liquid, muestre el número de productos usando la propiedad size. Dentro del bloque de Texto de la fila 1 de su plantilla, establezca su texto como desee.Ejemplo:
Estamos guardando {{message.custom_data.cart.size}} artículos en tu carrito, ¡pero no esperes demasiado, otras ardillas se están adelantando!

​
Mostrar artículos en el correo electrónico

Use un bucle for de Liquid para iterar sobre su array de carrito custom_data.Dentro del bloque de Texto de la fila 2 de la plantilla, establezca: {% for product in message.custom_data.cart %} que inicia el bucle for.La fila 3 con las 4 columnas tendrá lo siguiente en el bloque HTML de la 1ra columna:
<img src="{{product.cartImageURL}}" alt="Image" style="max-width:100%;" />
Los bloques de Texto de las columnas 2da, 3ra y 4ta tendrán el texto:
  • {{product.cartProductName}}
  • {{product.cartQuantity}}
  • {{product.cartPrice}}
Bloque de Texto de la fila 5, establezca: {% endfor %}El bucle for verifica cada product en el array cart que pasamos a custom_data y muestra el valor de cada producto en las columnas.

Ejemplo de plantilla de correo electrónico de carrito abandonado para mostrar artículos

​
Agregar una URL de carrito personalizada en el correo electrónico

Esto es opcional y solo es necesario si sus carritos son personalizados con una URL específica por cliente.Hay varias formas de configurar la URL del carrito. En este ejemplo pasamos la URL completa al carrito dentro de custom_data: "cart_url": "https://yourdomain.com/cart"Consulte URLs dinámicas para obtener más detalles.En el bloque Botón > Propiedades de contenido > Acción > URL, establezca {{message.custom_data.cart_url}}

Ejemplo de plantilla de correo electrónico de carrito abandonado para URL personalizada

​
Finalizar la plantilla de correo electrónico

Consulte Diseñar correos electrónicos con arrastrar y soltar para obtener más detalles sobre cómo personalizar la plantilla.
Cuando esté listo, puede usar el template_id dentro de sus solicitudes de API de Crear mensaje con la propiedad custom_data.

​
Plantilla Push de carrito abandonado

Este ejemplo de plantilla push demostrará cómo mostrar un artículo en el carrito del usuario incluyendo su imagen y nombre. También muestra cuántos artículos hay en total en el carrito y enlaza a la URL personalizada del carrito del cliente.

Ejemplo de plantilla push de carrito abandonado

​
Configuración de la plantilla Push

Las notificaciones push solo se pueden enviar con una cantidad limitada de datos. En lugar de enumerar todos los artículos en el carrito, queremos mostrar el primer artículo y mencionar cuántos artículos hay en total.Navegue a Mensajes > Plantillas > Nueva plantilla Push

​
Mostrar artículo y recuento de artículos en push

La sintaxis Liquid proporciona declaraciones if que podemos usar para cambiar lo que dice el mensaje dependiendo de cuántos artículos hay en el array cart de su objeto custom_data.En el campo Mensaje de la plantilla, agregue el siguiente texto:
{% assign cart = message.custom_data.cart %}
{% assign item_count = cart.size | plus: 0 %}
{% if item_count == 1 %}
Dejaste {{cart.first.cartProductName}} en tu carrito.
{% endif %}
{% if item_count == 2 %}
Dejaste {{cart.first.cartProductName}} y {{item_count | minus: 1}} artículo más en tu carrito.
{% endif %}
{% if item_count > 2 %}
Dejaste {{cart.first.cartProductName}} y {{item_count | minus: 1}} artículos más en tu carrito.
{% endif %}
En este ejemplo, primero asignamos la variable cart para que sea el custom_data.cart, luego asignamos la variable item_count para que sea el cart.size, y, si ese recuento es igual a 1, 2 o más de 2, mostramos contenido diferente.Debido a que el carrito posiblemente tiene más de 1 artículo, usamos la propiedad first para obtener el primer artículo en el carrito.Usamos la función minus para reducir el recuento total de artículos del carrito en 1 ya que ya lo mencionamos.

​
Mostrar imagen del artículo en push

En el campo Imagen de la plantilla, agregue la propiedad de URL de imagen con la sintaxis liquid. Si la imagen no existe, no se mostrará ninguna imagen. También puede establecer una imagen default. Ejemplo:
{{message.custom_data.cart.first.cartImageURL | default: "https://i.imgur.com/ssPCfbC.png"}}

​
Agregar una URL de carrito personalizada en push

En el campo URL de lanzamiento de la plantilla, agregue la propiedad de URL del carrito con la sintaxis liquid. Si el carrito no existe, el push dirigirá a la página de inicio del sitio o aplicación.Nota sobre la URL de lanzamiento dentro de las plantillas: configurar https:// o algún otro esquema en el formato x:// es necesario. Si establece esto dentro de los datos, puede usar la función remove de la sintaxis liquid de la siguiente manera:
  • https://{{message.custom_data.cart_url | remove: "https://"}}

​
Actualizar la plantilla push y enviar el mensaje

Consulte Envío de mensajes para obtener más detalles sobre las opciones proporcionadas dentro de las plantillas push.
Cuando esté listo, puede usar el template_id dentro de sus solicitudes de API de Crear mensaje con la propiedad custom_data.
Need help?Chat with our Support team or email support@onesignal.comPlease include:
  • Details of the issue you’re experiencing and steps to reproduce if available
  • Your OneSignal App ID
  • The External ID or Subscription ID if applicable
  • The URL to the message you tested in the OneSignal Dashboard if applicable
  • Any relevant logs or error messages
We’re happy to help!