> ## Documentation Index > Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt > Use this file to discover all available pages before exploring further. # Tutoriel panier abandonné > Récupérez les ventes perdues avec les notifications de panier abandonné en utilisant OneSignal en suivant l'activité du panier, en créant des segments ciblés et en envoyant des rappels opportuns avec les Journeys. ## Aperçu Les paniers abandonnés représentent l'une des opportunités les plus impactantes pour récupérer des revenus perdus. La plupart des utilisateurs qui abandonnent un panier ont encore l'intention d'acheter — ils ont simplement besoin d'un rappel au bon moment. Ce guide vous montre comment créer un **Journey automatisé de panier abandonné** dans OneSignal qui : * 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 Vous pouvez implémenter cela en utilisant : * Custom Events (recommandé pour la plupart des implémentations) * Tags (plus simple, cas d'utilisation limités) Le bon choix dépend des données que vous souhaitez afficher dans le message et de leur provenance. **Ce que vous allez créer** À la fin de ce guide, vous disposerez de : * 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 **Comment les paniers abandonnés sont modélisés** Ce guide suppose que vous suivez les événements de « panier mis à jour », ce qui signifie chaque fois qu'un utilisateur ajoute ou retire des articles de son panier. Il peut s'agir d'un seul article comme un abonnement à votre contenu ou de plusieurs articles comme un panier d'achat. Une fois que OneSignal reçoit un événement `cart_updated` : * 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 Décidez **quelles informations du panier vous souhaitez afficher** et **d'où proviennent ces données**. Les données courantes du panier incluent : * Nom du produit, image, prix et quantité * Nombre d'articles dans le panier * Un lien profond vers le panier Votre source de données détermine comment vous envoyez les événements : | Source de données | Méthode recommandée | | -------------------------- | ------------------------------------- | | Application ou site web | OneSignal Frontend SDK | | Backend ou base de données | OneSignal REST API | | Plateforme tierce | Custom Events basés sur l'intégration | À la fin de cette étape, vous savez **quelles données vous allez envoyer** et **comment vous allez les envoyer**. ### Étape 2 : Envoyez l'activité du panier à OneSignal Lorsque l'état du panier change, envoyez les données mises à jour du panier à OneSignal pour que l'activité puisse être suivie. Ce guide utilise l'événement ou le tag `cart_updated` pour suivre l'activité du panier et au moins une propriété. Sélectionnez la méthode que vous avez choisie à l'étape 1 : Envoyez un Custom Event `cart_updated` chaque fois que le panier change. Incluez les propriétés du produit lorsque des articles sont dans le panier et omettez-les lorsque le panier est vide. | Référence | Description | | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | Méthode `trackEvent` | Envoyer via Frontend SDK ([Mobile SDK](./mobile-sdk-reference#custom-events), [Web SDK](./web-sdk-reference#custom-events)) | | [API Custom Events](/reference/create-custom-events) | Envoyer via REST API | | [Intégrations](./integrations) | Envoyer via intégration | **Exemple de la méthode `trackEvent` du Frontend SDK** ```javascript Panier mis à jour theme={null} 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" }); ``` ```javascript Panier vidé theme={null} OneSignal.User.trackEvent("cart_updated"); ``` **Exemple d'API Custom Events** ```json Panier mis à jour theme={null} { "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" } ] } ``` ```json Panier vidé theme={null} { "events": [ { "name": "cart_updated", "external_id": "ID_OF_THE_USER" } ] } ``` Définissez des tags lorsque des articles sont dans le panier et supprimez-les lorsque le panier est vide. Ces exemples définissent le tag `cart_updated` sur un horodatage Unix (en secondes) représentant la dernière mise à jour du panier. Vous pouvez également utiliser une valeur booléenne (true/false), mais un horodatage offre plus de flexibilité avec les [Time Operators](./time-operators). | Référence | Description | | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | `addTags` / `removeTags` | Envoyer via Frontend SDK ([Mobile SDK](./mobile-sdk-reference#data-tags), [Web SDK](./web-sdk-reference#data-tags)) | | [API de mise à jour utilisateur](/reference/update-user) | Envoyer via REST API | **Exemple des méthodes `addTags` / `removeTags` du Frontend SDK** ```javascript Panier mis à jour theme={null} 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" }) ``` ```javascript Panier vidé (supprimer les tags) theme={null} OneSignal.User.removeTags([ "cart_updated", "product_name", "product_image", "product_price", "product_quantity", "cart_url" ]) ``` **Exemple d'API de mise à jour utilisateur** ```json Panier mis à jour theme={null} { "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" } } } ``` ```json Panier vidé (supprimer les tags) theme={null} { "properties": { "tags": { "cart_updated": "", "product_name": "", "product_image": "", "product_price": "", "product_quantity": "", "cart_url": "" } } } ``` L'activité du panier est maintenant envoyée à OneSignal. Chaque fois que le panier change, OneSignal reçoit les données mises à jour nécessaires pour déclencher et personnaliser les messages. *** ### Étape 3 : Créez des modèles de messages de panier abandonné Créez des modèles de messages qui référencent dynamiquement les données du panier. Pour plus de détails sur les concepts utilisés dans cette section, consultez : * [Syntaxe Liquid](./using-liquid-syntax) * [Personnalisation des messages](./message-personalization) * [Modèles](./templates) Référencez les propriétés d'événement en utilisant le format de syntaxe Liquid : ```liquid Liquid theme={null} {{journey.event.name.properties.property_name | default: "fallback_value"}} ``` **Message** : ```liquid Liquid theme={null} You left {{journey.event.cart_updated.properties.product_name | default: "items"}} in your cart. ``` **Image** : ```liquid Liquid theme={null} {{journey.event.cart_updated.properties.product_image | default: "https://i.imgur.com/ssPCfbC.png"}} ``` **URL de lancement** : ```liquid Liquid theme={null} {{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` Exemple de modèle de panier abandonné avec Custom Events Référencez les propriétés de tag en utilisant le format de syntaxe Liquid : ```liquid Liquid theme={null} {{tag_key | default: "fallback_value"}} ``` **Message** : ```liquid Liquid theme={null} You left {{product_name | default: "items"}} in your cart. ``` **Image** : ```liquid Liquid theme={null} {{product_image | default: "https://i.imgur.com/ssPCfbC.png"}} ``` **URL de lancement** : ```liquid Liquid theme={null} {{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` Exemple de modèle de panier abandonné avec Tags **Besoin d'exemples d'e-mails, d'aide ou simplement d'inspiration ?** Guide complet pour utiliser les Custom Events dans les Journeys. Inclut le stockage des événements, la configuration du Journey, un exemple de panier abandonné, les bonnes pratiques et le dépannage. Guide complet pour utiliser les Propriétés et Tags dans les Journeys. Inclut le stockage des événements, la configuration du Journey, un exemple de panier abandonné, les bonnes pratiques et le dépannage. ### Étape 4 : Créez le Segment de panier abandonné (Tags uniquement) Cette étape est requise uniquement si vous utilisez les Tags pour suivre l'activité du panier. Si vous utilisez les Custom Events, vous pouvez ignorer cette étape. Le Segment déterminera qui peut entrer dans le Journey. Consultez [Segments](./segmentation) pour plus de détails. Ajoutez deux filtres au Segment : 1. **User Tag** — `cart_updated` `exists` 2. **Last Session** — `less than` `7` `days ago` Segment de panier abandonné avec filtre Tag où le tag cart_updated existe et la dernière session date de moins de 7 jours Vous pouvez maintenant suivre les utilisateurs qui mettent à jour leur panier et qui ont visité l'application ou le site web au cours des 7 derniers jours. Les utilisateurs sont automatiquement retirés du segment lorsque l'une des conditions suivantes est remplie : * Après 7 jours écoulés depuis leur dernière visite de l'application/du site web * Lorsque le tag `cart_updated` est supprimé ### Étape 5 : Créez le Journey de panier abandonné Créez un Journey qui réagit à l'activité du panier. Consultez [Journeys](./journeys-overview) pour plus de détails. Écran de création d'un nouveau Journey de panier abandonné #### Paramètres du Journey Consultez le guide [Paramètres du Journey](./journeys-settings) pour plus de détails sur les règles d'entrée, de sortie et de réentrée. **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. Règles d'entrée du Journey de panier abandonné avec Custom Event * Sélectionnez **Audience Segment** * Inclure le Segment : **Abandoned Cart - cart\_updated** Règles d'entrée du Journey de panier abandonné **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` Règles de sortie du Journey de panier abandonné avec Custom Event 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** Règles de sortie du Journey de panier abandonné avec Tag Les utilisateurs sortiront du Journey lorsque : * Ils quittent le segment. * Ils complètent le Journey. **Règles de réentrée** (Tags uniquement) : * Sélectionnez **Yes, after a certain amount of time** * Définissez le temps de réentrée à `1` `day` Règles de réentrée du Journey de panier abandonné Si vous avez suivi ce guide entièrement jusqu'ici, les utilisateurs vont : 1. Entrer dans le Journey lorsqu'ils abandonnent/mettent à jour leur panier 2. Sortir du Journey lorsqu'ils vident leur panier ou complètent le Journey. 3. Être éligibles pour réentrer dans le Journey : * **Custom Events** : Chaque fois que l'événement `cart_updated` est exécuté * **Tags** : Après 1 jour écoulé depuis leur dernière sortie du Journey et qu'ils sont dans le segment. Enregistrez les paramètres du Journey. #### Étapes du Journey Les utilisateurs entreront dans le Journey selon vos règles d'entrée. Cela se produit généralement dans les quelques minutes suivant la réception de l'événement/du tag. Les utilisateurs progresseront dans le Journey étape par étape jusqu'à atteindre la fin ou qu'une règle de sortie soit satisfaite. Un Journey basique de panier abandonné fait deux choses : 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 Pour cela, ajoutez d'abord une étape **Wait** au Journey. * 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. Ajoutez une étape **Message**. * Sélectionnez le modèle de notification push **Abandoned Cart** que vous avez créé à l'étape 3. Étapes basiques du Journey de panier abandonné Le Journey basique de panier abandonné est maintenant configuré. Lorsqu'un utilisateur entre dans le Journey, il attendra 1 heure. S'il ne sort pas du Journey, il recevra la notification push de panier abandonné. ## Configuration avancée du Journey Étendez le Journey pour envoyer plus de messages au fil du temps pour des taux de récupération plus élevés. ### Séquence de messages Une cadence très courante et performante est : 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 Selon les canaux que vous avez configurés avec OneSignal, vous obtiendrez de meilleurs résultats en utilisant une approche omnicanale. 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 Les Journeys de OneSignal fournissent une logique de branchement **Wait Until** que vous pouvez utiliser pour vérifier si un message a été confirmé comme livré, cliqué ou ouvert et, si ce n'est pas le cas dans un certain délai, envoyer un message de repli. C'est extrêmement utile pour les utilisateurs qui se sont peut-être désabonnés d'un canal de messagerie spécifique. Plus de détails sur la configuration des messages de repli sont disponibles dans notre guide [Messages de repli](./push-fallback-method). ### Suivez les performances Les [Analytics du Journey](./journeys-analytics) peuvent être utilisées pour suivre les performances globales du Journey. Vous pouvez également suivre les performances de chaque message en utilisant les [Analytics de modèle](./template-analytics). #### Suivez les revenus avec les Outcomes Pour suivre les revenus de ce Journey, vous pouvez utiliser les [Custom Outcomes](./custom-outcomes). Lorsqu'un achat est effectué, vous pouvez envoyer l'événement en tant que « Custom Outcome » pour suivre les revenus associés au message spécifique envoyé. Les Custom Outcomes peuvent être envoyés via le [Mobile SDK](./mobile-sdk-reference#outcomes) ou le [Web SDK](./web-sdk-reference#outcomes). ```javascript Example: Send purchase outcome via frontend SDK theme={null} // 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); }); } ``` Les Outcomes peuvent attribuer des revenus aux messages que les utilisateurs ont cliqués ou par lesquels ils ont été influencés dans une fenêtre d'attribution définie. Vous avez implémenté avec succès un Journey de panier abandonné. Lorsque vous êtes prêt à commencer à envoyer des messages, sélectionnez **Set Live**. ## FAQ ### Dois-je utiliser des Custom Events ou des Tags pour le suivi du panier ? Les Custom Events sont recommandés pour la plupart des implémentations. Ils prennent en charge des données plus riches, permettent un filtrage basé sur les propriétés dans les règles d'entrée du Journey et gèrent automatiquement la réentrée lorsque le même événement se déclenche à nouveau. Les Tags conviennent pour des cas d'utilisation plus simples où vous avez seulement besoin de savoir si un panier existe, mais nécessitent la création manuelle de segments et la configuration de la réentrée. ### Combien de temps dois-je attendre avant d'envoyer le premier rappel ? Une à deux heures est un point de départ courant. Cela laisse à l'utilisateur suffisamment de temps pour revenir de lui-même pendant que l'intention d'achat est encore fraîche. Testez différents temps d'attente et utilisez les [Analytics du Journey](./journeys-analytics) pour trouver ce qui fonctionne le mieux pour votre audience. ### Que se passe-t-il si un utilisateur met à jour son panier pendant qu'il est dans le Journey ? Avec les Custom Events, l'utilisateur quitte l'instance actuelle du Journey (car `cart_updated` se déclenche comme condition de sortie) et entre immédiatement à nouveau avec les données d'événement mises à jour. Avec les Tags, l'utilisateur reste dans la même instance du Journey car le tag existe toujours — il ne réentre qu'après être sorti et avoir attendu la période de réentrée. Besoin d'aide ? Discutez avec notre équipe d'assistance ou envoyez un e-mail à `support@onesignal.com` Veuillez inclure : * Les détails du problème que vous rencontrez et les étapes de reproduction si disponibles * Votre OneSignal App ID * L'External ID ou le Subscription ID le cas échéant * L'URL du message que vous avez testé dans le OneSignal Dashboard le cas échéant * Tous les [journaux ou messages d'erreur](/docs/en/capturing-a-debug-log) pertinents Nous serons ravis de vous aider !