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)

• 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 des messages 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

• L’utilisateur devient éligible pour entrer dans le Journey
• Une période d’attente lui laisse le temps de revenir naturellement
• Les messages sont envoyés uniquement s’il ne sort pas
• L’utilisateur sort immédiatement lorsque le panier est vidé

​

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 l’activité du panier à 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"
    }
  }
}

​

É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

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

Message :

Liquid

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

Image :

Liquid

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

URL de lancement :

Liquid

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

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

Liquid

{{tag_key | default: "fallback_value"}}

Message :

Liquid

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

Image :

Liquid

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

URL de lancement :

Liquid

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

​

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

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

​

É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_updated
• Filtrer par propriété : Avec toutes les propriétés suivantes : product_name exists

L’utilisation des Custom Events permet aux utilisateurs individuels d’entrer dans les Journeys plusieurs fois.Utilisez des propriétés pour filtrer les utilisateurs afin qu’ils n’entrent que lorsqu’une propriété spécifique existe.

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

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

Les utilisateurs doivent sortir du Journey lorsqu’ils vident leur panier ou complètent le Journey.

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

Cette configuration utilise le même nom de Custom Event (cart_updated) pour les règles d’entrée et de sortie.Cela permet à l’utilisateur d’être dans le Journey une seule fois à la fois. Chaque fois qu’il met à jour son panier, cette instance de l’utilisateur sortira et une nouvelle instance du même utilisateur entrera dans le Journey. C’est pourquoi il est important d’utiliser des propriétés pour filtrer les utilisateurs dans les règles d’entrée.

• 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. Donne à l’utilisateur suffisamment de temps pour vider son panier (effectuer un achat ou retirer des articles manuellement)
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 ou 2 hours 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 3.

​

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

​

Types et contenu des messages

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

​

FAQ

​

Dois-je utiliser des Custom Events ou des Tags pour le suivi du panier ?

​

Combien de temps dois-je attendre avant d’envoyer le premier rappel ?

​

Que se passe-t-il si un utilisateur met à jour son panier pendant qu’il est dans le Journey ?