Utiliser des conditions d'affichage dans l'éditeur Drag & Drop [Nouveau]

Pour utiliser cette fonctionnalité, vous devez utiliser le langage de template de SendinBlue par défaut. Consultez ce guide pour vérifier ou mettre à jour vos paramètres. 

 

L'option de conditions d'affichage vous permet de concevoir des campagnes et des templates d'emails affichant des contenus adaptés spécifiquement au destinataire en fonction des conditions que vous avez paramétrées. 

builder.png   animation.gif

Les conditions d'affichage peuvent s'appliquer à un bloc de contenu entier dans l'éditeur Drag & Drop et se baser sur trois types d'éléments 

  1. un attribut de contact : une information au sujet de vos contacts enregistrée dans SendinBlue et que vous pouvez utiliser dans les campagnes d'emailing, les emails de marketing automation et les emails transactionnels
  2. des paramètres : les paramètres transactionnels que vous intégrez à un appel API pour envoyer une campagne ou un email transactionnel
  3. une variable de liste dynamique : celle-ci peut uniquement être utilisée lorsque l'option de liste dynamique est également activée pour un bloc spécifique de votre campagne ou de votre email transactionnel

Avant de commencer

Si vous n'avez pas encore créé vos attributs de contacts souhaités, utilisez ce guide afin de créer les attributs avant d'ajouter des conditions d'affichage à votre email.  

Si vous souhaitez utiliser des conditions d'affichage dans vos emails transactionnels, familiarisez-vous d'abord avec notre appel API (v3) pour envoyer un template d'email. (Vous pouvez aussi envoyer une campagne conçue dans l'éditeur Drag & Drop à l'aide de l'API.)

Conditions d'affichage basées sur les attributs de contact

Les conditions d'affichage vous permettent d'afficher un bloc spécifique (image, titre, texte, etc.) en fonction des informations que vous possédez sur votre destinataire et qui sont enregistrées dans les attributs de contact de votre compte SendinBlue. 

Prenons l'exemple d'une boutique de T-shirts en ligne qui souhaite envoyer une campagne d'emailing personnalisée basée sur quelques-uns des attributs de ses contacts : 

  • client existant ou non (attribut booléen)
  • couleur préférée (attribut de texte)
  • sexe (attribut de catégorie)

Imaginons que nous connaissons le sexe et la couleur préférée de nos clients, mais que nous ne possédons aucune information sur les clients qui n'ont encore passé aucune commande. Notre email fera la promotion de T-shirts en vente, et nous personnaliserons son contenu en utilisant les données disponibles pour chaque contact.

Personnalisation d'un texte 

Dans cet exemple, le titre diffère si le contact est un client existant.

Puisque nous possédons cette information en tant qu'attribut booléen (l'attribut doit être défini par Oui ou par Non), nous avons inclus deux blocs uniques que nous avons configurés afin que l'un s'affiche lorsque l'attribut « CLIENT » correspond à Oui, et l'autre lorsque l'attribut correspond à Non. Ainsi, tous les destinataires ne verront qu'un seul des deux blocs de texte.conditional-display-01_EN.png

Personnalisation d'une image

Nous allons personnaliser l'image en fonction de deux attributs de contact : la couleur préférée et le sexe. Afin que tous les destinataires voient une image, il est important de prendre en compte toutes les possibilités pour chacun de nos attributs : 

Couleur préférée : 

  • Bleu
  • Vert
  • Jaune
  • Rose

Sexe : 

  • Masculin
  • Féminin
  • Inconnu

Les T-shirts bleus étant les plus prisés, nous allons concentrer nos efforts de personnalisation sur cette couleur dans notre bloc d'image. Nous allons configurer les conditions d'affichage pour les blocs suivants : 

  • T-shirt bleu simple : s'affiche pour tous les destinataires dont l'attribut de couleur préférée est le bleu et dont le sexe est inconnu
  • T-shirt bleu porté par un homme : s'affiche pour tous les destinataires dont l'attribut de couleur préférée est le bleu et dont le sexe est masculin
  • T-shirt bleu porté par une femme : s'affiche pour tous les destinataires dont l'attribut de couleur préférée est le bleu et dont le sexe est féminin
  • Collection de T-shirts multicolore : s'affiche pour tous les destinataires dont l'attribut de couleur préférée n'est pas le bleu.

GIF_1.gif

Personnalisation d'un bouton de call-to-action

Enfin, nous allons personnaliser un bouton de call-to-action en fonction de la couleur préférée du destinataire. 

Nous allons créer deux boutons : l'un lorsque la couleur préférée du destinataire est connue, et l'autre lorsqu'elle est inconnue. 

Pour créer le premier bouton, cliquez sur le texte du bouton, puis sur Personnaliser. Dans la liste déroulante, sélectionnez l'attribut correspondant à la couleur préférée. SendinBlue insère alors automatiquement le nom de leur couleur préférée dans le texte du bouton, par exemple : 

« Acheter des T-shirts bleus », « Acheter des T-shirts verts », etc. 

Nous allons activer les conditions d'affichage pour le second bouton, puis nous modifierons les paramètres de sorte que ce bouton s'affiche si la couleur préférée du contact ne correspond à aucune de nos options d'attribut.

Par exemple, couleur préférée n'est pas égale à : bleu, vert, jaune, rose. Ce bloc s'affichera lorsque la couleur n'est pas égale à bleu ET n'est pas égale à vert ET n'est pas égale à rose, etc.

À présent, nous disposons du bouton « Acheter des T-shirts » comme solution de repli.

GIF_4.gif

Bon à savoir : pour tester vos personnalisations, il vous suffit d'envoyer un email de test à un contact pouvant prévisualiser votre email personnalisé.

 

Conditions d'affichage basées sur un paramètre transactionnel 

Les paramètres transactionnels sont des variables qui ne sont pas enregistrées dans votre liste de contacts SendinBlue, mais qui constituent un élément de votre appel API pour envoyer un email transactionnel.  

Les conditions d'affichage peuvent être utilisées pour modifier un template d'email en fonction de ses paramètres transactionnels lorsqu'il est envoyé à l'aide de notre API v3.

Les paramètres transactionnels contiennent deux éléments (comme indiqué ci-dessous) qui, lorsqu'ils sont utilisés via l'API, sont structurés ainsi : 

{{ params.parameterNAME }}

parameterNAME correspond au nom de votre paramètre transactionnel, au même format que dans l'API.

Bon à savoir : consultez ici notre documentation API portant sur l'envoi d'un email transactionnel, et obtenez plus d'informations sur les paramètres transactionnels ici.

Exemple 

Les emails transactionnels ont tous un objectif commercial spécifique et offrent la possibilité de cibler vos contacts les plus actifs avec un nouveau message de marketing (cliquez ici pour accéder à notre blog et vous inspirer de nos exemples).

Conservons notre exemple de la boutique de T-shirts en ligne et imaginons que nous souhaitons ajouter à notre template d'email de confirmation d'achat un bloc faisant la promotion d'un événement à venir. 

Dans le template de l'email, nous pouvons activer les conditions d'affichage et sélectionner paramètres dans le premier champ. 

Dans le deuxième champ (nom de la variable), saisissez uniquement le nom de votre paramètre transactionnel « parameterNAME ».

Par exemple, pour insérer un nombre d'invités à l'événement avec le paramètre

{{ params.RSVP }}

entrez simplement RSVP en tant que nom de variable.  

conditional-display_params_NEW.png

Paramétrez les champs restants en fonction de vos besoins. Dans notre exemple, le paramètre RSVP est défini par un format numérique, et un bloc promotionnel unique s'affiche selon les conditions suivantes : 

  • RSVP pour 0 billet : simple promotion d'un événement  
  • RSVP pour 1 billet : remerciements pour l'achat d'un billet, avec proposition d'inviter un ami
  • RSVP pour 2 billets : remerciements pour un achat de groupe, avec proposition de réserver une table  

GIF_5_NEW.gif

Conditions d'affichage basées sur une variable de liste dynamique

Lorsque vous utilisez l'option de liste dynamique pour créer un bloc dans votre campagne ou template d'email, vous pouvez choisir d'afficher (ou non) ce bloc lorsque les conditions de la liste dynamique sont satisfaites. 

Cette fonctionnalité est très pratique pour n'afficher une liste que lorsque celle-ci contient les éléments que vous avez définis.

Exemple 

En tant que vendeur dans le e-commerce, vous souhaitez peut-être envoyer un email qui confirme l'expédition de certains articles d'une commande et liste séparément les articles en attente d'expédition.

sample_email.png 

Pour créer l'email ci-dessus, il vous faut d'abord configurer une liste dynamique (comme indiqué dans ce guide), puis activer l'option de conditions d'affichage et sélectionner variable de liste dynamique

Dans le champ nom de clé, entrez le nom de la clé qui constitue le critère d'affichage du bloc. Dans notre exemple, nous avons entré la clé « expédié », et lorsque le template détecte que la valeur de cette clé est « oui », le bloc affiche tous les produits expédiés. 

Cond-display-dyanmic-list-var_true.png

Ensuite, nous avons créé un second bloc qui répertorie les éventuels produits en attente d'expédition.

Dans cet exemple, nous avons utilisé le même nom de clé (« expédié »), et lorsque le template détecte que la valeur de cette clé est « non », le bloc affiche tous les produits qui seront expédiés plus tard. 

Cond-display-dyanmic-list-var_false.png

Bon à savoir : cette option utilise le système des tags IF et FOR disponibles dans le nouveau langage de template. Pour en savoir plus sur cette fonctionnalité, consultez ce guide explicatif.

 

Si vous ne savez pas quels éléments font partie du tag FOR, ce code couleur peut vous aider à placer correctement chaque élément dans votre template ou campagne d'emailing. 

terms.png

Pour réaliser l'exemple d'email ci-dessus, nous avons intégré les éléments suivants dans notre appel API v3 pour envoyer un email transactionnel.

cond-display-dynamic-list-var_call-example.png

 

Enregistrement de votre email

Les blocs d'email intégrant un contenu dynamique, comme une liste dynamique ou des conditions d'affichage, sont marqués d'un symbole dans l'angle supérieur gauche.

SendinBlue_Responsive_Template_Builder.png

Lorsque vous enregistrez votre template ou campagne d'emailing, cette icône devient rouge si l'option de contenu dynamique est activée mais incomplète.

SendinBlue_Responsive_Template_Builder_error.png

Pour corriger cette erreur, il vous suffit de compléter les champs vides et d'enregistrer à nouveau.