Passer au contenu principal

​
Aperçu

Ce guide présente plusieurs façons d’alimenter les rappels de panier abandonné dans OneSignal. Vous apprendrez comment synchroniser les données de panier et personnaliser les e-mails ou les notifications push lorsque les utilisateurs laissent des articles derrière eux. Vous pouvez alimenter les modèles de panier abandonné avec :
  1. API custom_data — transmettez les détails du panier en ligne avec votre demande de message.
  2. Tags — stockez des paires clé-valeur pour personnaliser les messages.
  3. Événements personnalisés — déclenchez des Journeys à partir d’événements utilisateur comme cart_updated.
  4. Flux de données — récupérez les données de panier en temps réel directement depuis votre API au moment de l’envoi du message.
Chaque approche prend en charge la personnalisation Liquid et fonctionne avec les modèles d’e-mail et de push.

​
Exemples de configuration

  • API: custom_data
  • Tags
  • Événements personnalisés
  • Flux de données
Utilisez l’API Créer un message avec la propriété custom_data pour injecter les données de panier stockées sur votre serveur. Idéal pour les données de panier contrôlées côté serveur.Exemple de charge utile 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"
      }
    ]
  }
}

​
Modèle d’e-mail de panier abandonné

Cet exemple de modèle d’e-mail démontre comment afficher les articles du cart En utilisant la syntaxe Liquid :
  • Nombre total d’articles dans le panier
  • Articles dans le panier de l’utilisateur incluant :
    • Image du produit
    • Nom du produit
    • Quantité du produit
    • Prix du produit
  • Lien vers l’URL du panier personnalisé du client

Exemple de modèle d'e-mail de panier abandonné

​
Configuration du modèle d’e-mail

1

Créer un nouveau modèle d'e-mail

Accédez à Messages > Modèles > Nouveau modèle d’e-mail.
2

Utiliser l'éditeur Glisser-Déposer

3

Créer 5 rangées avec ce qui suit :

  • Les rangées 1, 2 et 4 ont 1 colonne avec un bloc Texte.
  • La rangée 3 a 4 colonnes avec : bloc HTML | bloc Texte | bloc Texte | bloc Texte
  • La rangée 5 a 1 colonne avec un bloc Bouton

Configuration du modèle d'e-mail de panier abandonné

​
Afficher le nombre d’articles dans l’e-mail

En utilisant la syntaxe Liquid, affichez le nombre de produits en utilisant la propriété size. Dans votre modèle rangée 1, bloc Texte, définissez votre copie comme souhaité.Exemple :
We're holding onto {{message.custom_data.cart.size}} items in your cart, but don't wait too long, other squirrels are getting ahead!

​
Afficher les articles dans l’e-mail

Utilisez une boucle for Liquid pour itérer sur votre tableau custom_data cart.Dans le modèle rangée 2, bloc Texte, définissez : {% for product in message.custom_data.cart %} qui commence la boucle for.La rangée 3 avec les 4 colonnes aura ce qui suit dans le bloc HTML de la 1ère colonne :
<img src="{{product.cartImageURL}}" alt="Image" style="max-width:100%;" />
Les blocs Texte des 2ème, 3ème et 4ème colonnes auront le texte :
  • {{product.cartProductName}}
  • {{product.cartQuantity}}
  • {{product.cartPrice}}
Rangée 5, bloc Texte, définissez : {% endfor %}La boucle for vérifie chaque product dans le tableau cart que nous transmettons dans custom_data et affiche la valeur pour chaque produit dans les colonnes.

Exemple de modèle d'e-mail de panier abandonné pour afficher les articles

​
Ajouter une URL de panier personnalisée dans l’e-mail

Ceci est optionnel et n’est nécessaire que si vos paniers sont personnalisés pour une URL spécifique par client.Il existe plusieurs façons de configurer l’URL du panier. Dans cet exemple, nous transmettons l’URL complète du panier dans le custom_data : "cart_url": "https://yourdomain.com/cart"Consultez URLs dynamiques pour plus de détails.Dans le bloc Bouton > Propriétés du contenu > Action > URL, définissez {{message.custom_data.cart_url}}

Exemple de modèle d'e-mail de panier abandonné pour URL personnalisée

​
Finaliser le modèle d’e-mail

Consultez Concevoir des e-mails avec Glisser-Déposer pour plus de détails sur la personnalisation du modèle.
Une fois prêt, vous pouvez utiliser le template_id dans vos requêtes API Créer un message avec la propriété custom_data.

​
Modèle Push de panier abandonné

Cet exemple de modèle push démontrera comment afficher un article dans le panier de l’utilisateur incluant son image et son nom. Il affiche également combien d’articles au total se trouvent dans le panier et renvoie vers l’URL de panier personnalisée du client.

Exemple de modèle push de panier abandonné

​
Configuration du modèle Push

Les notifications push ne peuvent être envoyées qu’avec une quantité limitée de données. Au lieu de lister tous les articles du panier, nous voulons afficher le premier article et mentionner combien d’articles au total il y a.Accédez à Messages > Modèles > Nouveau modèle Push

​
Afficher l’article et le nombre d’articles dans le push

La syntaxe Liquid fournit des instructions if que nous pouvons utiliser pour modifier ce que dit le message en fonction du nombre d’articles dans le tableau cart de votre objet custom_data.Dans le champ Message du modèle, ajoutez la copie suivante :
{% assign cart = message.custom_data.cart %}
{% assign item_count = cart.size | plus: 0 %}
{% if item_count == 1 %}
You left {{cart.first.cartProductName}} in your cart.
{% endif %}
{% if item_count == 2 %}
You left {{cart.first.cartProductName}} and {{item_count | minus: 1}} more item in your cart.
{% endif %}
{% if item_count > 2 %}
You left {{cart.first.cartProductName}} and {{item_count | minus: 1}} more items in your cart.
{% endif %}
Dans cet exemple, nous attribuons d’abord la variable cart au custom_data.cart, puis attribuons la variable item_count à cart.size, et, si ce compte est égal à 1, 2 ou plus de 2, affichons un contenu différent.Le panier pouvant avoir plus d’un article, nous utilisons la propriété first pour obtenir le premier article du panier.Nous utilisons la fonctionnalité minus pour réduire le nombre total d’articles du panier de 1 puisque nous le mentionnons déjà.

​
Afficher l’image de l’article dans le push

Dans le champ Image du modèle, ajoutez la propriété URL de l’image avec la syntaxe liquid. Si l’image n’existe pas, alors aucune image ne s’affichera. Vous pouvez également définir une image default. Exemple :
{{message.custom_data.cart.first.cartImageURL | default: "https://i.imgur.com/ssPCfbC.png"}}

​
Ajouter une URL de panier personnalisée dans le push

Dans le champ URL de lancement du modèle, ajoutez la propriété URL du panier avec la syntaxe liquid. Si le panier n’existe pas, le push dirigera vers la page d’accueil du site ou de l’application.Remarque sur l’URL de lancement dans les modèles : la définition de https:// ou d’un autre schéma au format x:// est requise. Si vous définissez cela dans les données, vous pouvez utiliser la fonctionnalité remove de la syntaxe liquid comme suit :
  • https://{{message.custom_data.cart_url | remove: "https://"}}

​
Mettre à jour le modèle push et envoyer le message

Consultez Envoi de messages pour plus de détails sur les options fournies dans les modèles push.
Une fois prêt, vous pouvez utiliser le template_id dans vos requêtes API Créer un message avec la propriété custom_data.
Besoin d’aide ?Discutez avec notre équipe d’assistance ou envoyez un e-mail à support@onesignal.comVeuillez 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 pertinents
Nous serons ravis de vous aider !