Personnaliser les listes de contenu dans les courriers électroniques

Les listes sont un moyen courant d’organiser les informations pour améliorer la lisibilité. Les exemples incluent une liste de sessions dans un événement, une liste de produits ou une liste de tickets de service. Customer Insights – Journey facilite la création de listes et la personnalisation de ces listes pour inclure uniquement les informations pertinentes pour le destinataire d’une manière facile à analyser et à agir.

Configurer une liste

Imaginons que vous souhaitiez créer un courrier électronique avec une liste de produits du client. Procédez comme suit :

  1. Créez un espace réservé pour la liste et sélectionnez la table que vous souhaitez utiliser pour la liste.

    Capture d’écran montrant la création de l’espace réservé de liste.

  2. Ensuite, ajoutez les attributs (colonnes) que vous souhaitez afficher en tant que contenu répété dans la liste (1). Vous pouvez également spécifier le nombre d’éléments que vous souhaitez afficher (2) et l’attribut selon lequel trier la liste (3). Une fois que vous avez configuré la liste comme vous le souhaitez, sélectionnez le bouton Enregistrer et copier pour enregistrer la liste et accéder au générateur de code qui fournit le code à copier.

Capture d’écran montrant les attributs de la liste à ajouter.

  1. Sélectionnez Copier le code, puis insérez-le dans le concepteur de courriers électroniques à l’endroit où vous souhaitez que cette liste soit incluse :

    Les instructions each de liste vous permettent de formater et d’afficher le contenu répété d’une table donnée. Vous pouvez ajouter le code requis pour créer ces instructions dans le concepteur ou dans la vue HTML. Vous pouvez ensuite utiliser la boîte de dialogue d’espace réservé pour spécifier la liste à évaluer, y compris le nombre de lignes à afficher et l’ordre dans lequel les afficher.

    {{#each Products}}
      {{Products.Name}}
      {{Products.Description}}
    {{/each}}
    

    Si vous ajoutez du code au HTML, assurez-vous de mettre des commentaires autour des lignes {{#each}} et {{/each}}.

    <!-- {{#each Products}}  -->
      {{Products.Name}}
      {{Products.Description}}
    <!-- {{/each}}  -->
    

Personnalisation de la liste – sélectionnez les éléments à inclure avec un filtre de liste

Parfois, lors de la création d’une liste dans un courrier électronique, vous souhaitez n’inclure que les éléments qui remplissent certaines conditions. Par exemple, un courrier électronique de confirmation concernant l’expédition d’une commande ne doit inclure que les articles présents dans cette expédition et exclure les articles qui sont dans la même commande mais pas dans l’expédition. De même, dans une newsletter mensuelle, vous souhaiterez peut-être inclure uniquement les événements prévus pour les 30 prochains jours. Ceci est réalisé en définissant un filtre de liste, qui est essentiellement une condition définie au niveau de la liste et appliquée à chaque élément de la liste pour décider si l’élément doit être inclus.

Pour filtrer une liste, sélectionnez une liste que vous avez déjà créée dans un courrier électronique et sélectionnez +Ajouter un filtre de liste.

Dans cet exemple, le courrier électronique contient une liste de visites de produits. Nous appliquons un filtre pour inclure uniquement les produits actuellement « actifs ». Si vous n’ajoutez pas de filtre à cette liste, la liste entière est incluse dans le courrier électronique (sous réserve du nombre maximum d’éléments spécifié). Dans ce cas, la liste aurait inclus tous les produits, quel que soit leur statut.

Capture d’écran montrant les éléments supplémentaires à ajouter avec des filtres de liste.

L’instruction conditionnelle peut inclure une condition, pour un filtrage simple, ou plusieurs conditions pour un filtrage complexe.

Note

Le code généré pour la liste ne change pas car la condition de filtre est stockée dans la définition de la liste et n’est pas nécessaire en tant que code en ligne.

Une grande personnalisation peut être obtenue avec de simples listes avec des filtres. Cependant, vous n’êtes pas limité à ces types de personnalisation. Cette section décrit les fonctionnalités supplémentaires disponibles pour créer des listes avancées et plus personnalisées. Pour accéder à ces fonctionnalités, sélectionnez le lien Option avancée.

Après avoir sélectionné « Option avancée », l’interface de l’application passe à une version plus avancée qui permet de nombreuses fonctionnalités avancées.

Capture d’écran montrant les options avancées qui peuvent être ajoutées pour la personnalisation de la liste.

Lorsque les fonctionnalités avancées sont activées :

  1. Les colonnes déjà sélectionnées sont présentées sous forme d’espaces réservés de texte dynamique. Cela permet de définir des valeurs par défaut et de spécifier les formats de date/heure.
  2. L’ajout de colonnes se fait via Ajouter une colonne qui permet toute la puissance et la flexibilité de sélectionner un source de données pour un texte dynamique (par exemple, parcours vers une table associée).
  3. Vous pouvez ajouter des conditions au niveau de l’article.

Répertorier les colonnes sous forme de texte dynamique

En mode standard, les colonnes de liste ne peuvent être sélectionnées que dans la liste d’attributs du source de données (dans l’exemple ci-dessus, seuls les attributs de la table « Produit » sont disponibles pour la sélection comme colonnes de liste). En mode avancé, les colonnes sont présentées sous forme de texte dynamique afin que toute la flexibilité et les fonctionnalités fournies avec le texte dynamique leur soient disponibles, comme indiqué ci-dessous.

Capture d’écran affichant les colonnes de liste sous forme de texte dynamique.

  1. En plus des attributs, des tables associées peuvent être sélectionnées pour apporter des informations supplémentaires. Dans cet exemple, nous ajoutons une colonne de liste qui ajoute la date de début de la liste de prix par défaut pour chaque produit.

    Note

    Lors de la sélection d’une table associée, seules les tables liées via des relations 1-à-1 ou plusieurs-à-un peut être utilisé. Les tables liées via des relations plusieurs-à-plusieurs ou un-à-plusieurs ne sont pas prises en charge dans la colonne de liste (elles sont prises en charge pour le texte dynamique).

  2. Vous pouvez spécifier une valeur par défaut lorsqu’il manque des données dans un élément de liste.

  3. Si l’élément de données est de type date/heure, vous pouvez spécifier son format d’affichage.

Condition dans une liste

Les filtres de liste décrits précédemment contrôlent si un élément de liste doit être inclus. Les conditions au sein d’une liste s’appliquent aux éléments de la liste et sont utiles pour inclure des annotations ou du contenu supplémentaires lorsque l’élément de liste inclus répond à certains critères. Par exemple, la liste de produits peut contenir certains produits qui sont spéciaux d’une certaine manière : ils peuvent être nouveaux, bientôt abandonnés, disponibles uniquement après une certaine date, etc. Les conditions de la liste peuvent être utilisées pour ajouter de telles légendes et annotations. En modifiant le HTML, vous pouvez même ajouter des liens cliquables ou des incitations à l’action (par exemple, des boutons), si nécessaire.

Voici un exemple dans lequel nous définissons une condition pour vérifier si le produit inclus dans la liste est en rupture de stock :

Capture d’écran montrant l’ajout de conditions dans les listes.

Lorsque de telles conditions sont définies, le code de liste est mis à jour pour fournir un modèle de travail de base que vous pouvez personnaliser selon vos besoins :

Capture d’écran montrant le code généré pour l’ajout de conditions dans la liste.

Par exemple, nous pouvons ajouter l’annotation « En rupture de stock » à côté de l’élément de la liste. Cette annotation ne sera incluse que si la condition est vraie pour l’élément de liste.

{{#each Products}}
  {{Products.Name}}
  {{Products.Description}}
  {{#if Products.OutofStock}}
  **Out of stock**
  {{/if}}
{{/each}}

Le générateur de code inclut par défaut une partie « else » que vous pouvez conserver ou supprimer si nécessaire. Si vous définissez plusieurs conditions, le générateur de code les inclut en tant que conditions distinctes (une instruction « if » par condition). Vous pouvez modifier le code pour créer des conditions « if » imbriquées selon vos besoins.

Voici un exemple où une condition supplémentaire « LowStock » a été définie lorsque les quantités sont inférieures à 10. Pour annoter correctement les stocks faibles et les ruptures de stock, l’instruction « si » doit être imbriquée comme indiqué ci-dessous :

{{#each Products}}
  {{Products.Name}}
  {{Products.Description}}
  {{#if Products.LowStock}}
    {{#if Products.OutofStock}}
      **Out of stock**
    {{else}}
      **Low stock – order soon**
  {{/if}}
{{/each}}