Tutoriel panier abandonné

​

Aperçu

• Détecte l’activité du panier
• Attend une courte période d’inactivité
• Envoie un rappel personnalisé
• Arrête immédiatement les messages après l’achat ou la suppression du panier

• Custom Events (recommandé pour la plupart des implémentations)
• Tags (plus simple, cas d’utilisation limités)

​

Ce que vous allez créer

• L’activité du panier envoyée à OneSignal (via Tags ou Custom Events)
• Un signal d’abandon clair, défini par le code
• Des modèles de messages qui personnalisent les données du panier
• Un Journey qui :
  • Démarre lorsqu’un signal d’abandon est reçu
  • Attend avant d’envoyer
  • Envoie un message de panier abandonné
  • Se termine immédiatement lorsque le panier est vidé ou acheté
• Des Analytics pour mesurer les performances des messages et des revenus

​

Choisissez votre méthode de suivi

• Utilisez les Custom Events si vous :
  • Pouvez détecter l’abandon après une période d’inactivité
  • Souhaitez des données de panier riches (articles, images, prix)
  • Êtes à l’aise pour garantir que les événements se déclenchent une seule fois par abandon
• Utilisez les Tags si vous :
  • Souhaitez une sécurité basée sur l’état par défaut
  • N’avez besoin que de données de panier simples
  • Préférez une entrée et une sortie contrôlées par segment

​

Comment les paniers abandonnés sont modélisés

• Après une période significative d’inactivité (ex : 1 heure)
• Uniquement si le panier contient encore des articles

​

Comment les Journeys utilisent les signaux d’abandon

• L’utilisateur devient éligible pour entrer dans le Journey
• Une période d’attente lui laisse le temps de revenir naturellement
• Un message est envoyé uniquement s’il ne sort pas
• L’utilisateur sort immédiatement lorsque cart_emptied est reçu

​

Configuration

​

Étape 1. Planifiez vos données et votre source de panier

• Nom du produit, image, prix et quantité
• Nombre d’articles dans le panier
• Un lien profond vers le panier

​

Étape 2. Envoyez les signaux d’état du panier à 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"
    }
  }
}

​

Étape 3. Créez des modèles de messages de panier abandonné

• Syntaxe Liquid
• Personnalisation des messages
• Modèles

• Modèle push Custom Event
• Modèle push Tag

Référencez les propriétés d’événement en utilisant le format de syntaxe Liquid :

Liquid

Copier

Demander à l'IA

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

Message :

Liquid

Copier

Demander à l'IA

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

Image :

Liquid

Copier

Demander à l'IA

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

URL de lancement :

Liquid

Copier

Demander à l'IA

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

L’image ne s’affichera pas si product_image n’est pas une URL d’image directe et publiquement accessible.Si votre product_image est le nom d’un fichier image disponible en ligne, vous pouvez référencer l’image en utilisant le format suivant : https://yourdomain.com/images/{{journey.event.cart_abandoned.properties.product_image | default: "stock_image"}}.png

Référencez les propriétés de tag en utilisant le format de syntaxe Liquid :

Liquid

Copier

Demander à l'IA

{{tag_key | default: "fallback_value"}}

Message :

Liquid

Copier

Demander à l'IA

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

Image :

Liquid

Copier

Demander à l'IA

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

URL de lancement :

Liquid

Copier

Demander à l'IA

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

L’image ne s’affichera pas si product_image n’est pas une URL d’image directe et publiquement accessible.Si votre product_image est le nom d’un fichier image disponible en ligne, vous pouvez référencer l’image en utilisant le format suivant : https://yourdomain.com/images/{{journey.event.cart_updated.properties.product_image | default: "stock_image"}}.png

​

Étape 4. Créez le Segment de panier abandonné (Tags uniquement)

​

Étape 5. Créez le Journey de panier abandonné

​

Paramètres du Journey

• Custom Event : Règles d'entrée
• Tag : Règles d'entrée

• Sélectionnez Custom Event
• Nom du Custom Event : cart_abandoned

Les utilisateurs entrent dans le Journey chaque fois que l’événement cart_abandoned est envoyé. N’envoyez cet événement qu’après une période significative d’inactivité.

• Sélectionnez Audience Segment
• Inclure le Segment : Abandoned Cart - cart_updated

• Custom Event : Règles de sortie
• Tag : Règles de sortie

• Sélectionnez Meet a certain condition
• Cochez Exit when custom event condition occurs
• Nom du Custom Event : cart_emptied

Les utilisateurs sortiront du Journey lorsque :

• L’événement cart_emptied (de l’étape 3) est exécuté.
• Ils complètent le Journey.

• Sélectionnez Meet a certain condition
• Cochez Exit when a user no longer matches the audience conditions

Les utilisateurs sortiront du Journey lorsque :

• Ils quittent le segment.
• Ils complètent le Journey.

• Sélectionnez Yes, after a certain amount of time
• Définissez le temps de réentrée à 1 day

​

Étapes du Journey

1. Donner à l’utilisateur suffisamment de temps pour vider son panier (effectuer un achat ou vider manuellement son panier)
2. S’il ne vide pas son panier, lui envoyer un message lui rappelant les articles dans son panier

• Définissez le temps d’attente à la durée souhaitée. Nous recommandons de le régler à 1 hour pour pouvoir leur envoyer un message pendant qu’ils ont encore l’intention d’acheter.

• Sélectionnez le modèle de notification push Abandoned Cart que vous avez créé à l’étape 4.

​

Configuration avancée du Journey

​

Séquence de messages

1. Envoyer le premier message après 1 heure (complété dans ce guide).
2. Ajouter une autre étape Wait d’1 jour et envoyer un deuxième message (~24 heures depuis la mise à jour du panier).
3. Ajouter une autre étape Wait de 2 jours et envoyer un troisième message (~72 heures depuis la mise à jour du panier).

1. Ce guide montre comment envoyer une notification push après la première heure. Cela sert de rappel utile pour essayer de conclure la vente pendant que l’utilisateur est peut-être encore en ligne.
2. Envisagez d’utiliser à la fois le push et l’e-mail pour votre 2ème message. Utilisez ce deuxième message pour mettre en avant les avantages et la preuve sociale avec une légère urgence pour les encourager à acheter.
3. Pour le dernier message de la séquence, utilisez un e-mail ou peut-être un SMS (selon le cas d’utilisation) comme « dernier appel ». Envisagez d’utiliser un code de réduction ou une autre incitation pour les encourager à acheter.

​

Messages de repli

​

Suivez les performances

​

Suivez les revenus avec les 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);
  });
}