Les blocs de produits dynamiques servent à afficher des recommandations personnalisées de produits à vos contacts. Cela permet à vos emails de s’adapter au comportement et au cycle de vie de chaque utilisateur, en restant à jour et pertinents, ce qui améliore les conversions.
Dans cet article, vous apprendrez comment créer un bloc de produits personnalisés dans un email.
Temps de mise en œuvre : 15 minutes.
Difficulté : Faible
Quand l’utiliser : Lorsque vous avez besoin d’afficher des produits personnalisés dans vos emails.
Avant de lire cet article, nous vous recommandons de consulter l’ Éditeur d’email.
ÉTAPE 1. Créer une conception d’email avec un bloc de produits dynamique
1. Accédez à "Contenus > Emails" et cliquez sur Créer un nouvel email.
2. Ajoutez un composant de type "Produits", en faisant glisser le bloc depuis l’onglet Composants vers l’éditeur.
ÉTAPE 2. Personnaliser votre bloc de produits
Vous pouvez prévisualiser tout changement lors du processus de création et de personnalisation d’un bloc de produits. À tout moment, suivez les instructions de l’ÉTAPE 3 pour valider vos modifications avant de passer à l’étape suivante.
2.1. Configuration de base
(Dans cette section, vous allez indiquer les données d’identification et le style général du bloc de produits).
3. Cliquez sur (Modifier l’élément) dans le menu contextuel qui apparaît lorsque vous survolez le bloc inséré avec la souris.
4. (Facultatif) Dans Nom du bloc de produits, définissez un titre pour identifier le bloc.
Si vous utilisez plusieurs blocs de Produits, nous vous recommandons de nommer chacun d’eux. Cela vous facilitera l’assignation de variables dans le workflow où le contenu web est utilisé.
2.2. Configuration du modèle
(Dans cette section, le contenu du bloc de produits va être défini).
5. Dans Modèles, choisissez parmi les trois options par défaut.
Les modèles incluent des emplacements désignés pour afficher les informations essentielles d’un produit : son nom, une image ou un bouton pour accéder à sa fiche sur l’eCommerce, entre autres données du produit.
Les principales caractéristiques qui les distinguent sont :
— Produit basique (type 1) : inclut un espace réservé pour la description du produit.
— Produit avec marque (type 2) : inclut un espace réservé pour afficher la marque du produit et un autre pour son prix.
— Produit avec prix (type 3) : inclut un espace réservé pour afficher la description du produit et un autre pour son prix.
6. Utilisez l’éditeur pour personnaliser les styles du modèle sélectionné.
L’éditeur du modèle permet à la fois de styliser et d’ajouter des éléments au composant. Vous pourrez modifier, par exemple, la typographie, la taille ou les couleurs des textes, ou ajouter des images.
7. (Facultatif) Cliquez sur HTML pour personnaliser votre composant via du code, si cela est nécessaire pour votre design.
2.3. (Facultatif) Création de nouvelles variables dynamiques
(Dans cette section, de nouvelles variables vont être définies pour être utilisées dans le bloc de produits, au cas où vous souhaiteriez ajouter des données supplémentaires).
Lorsque la conception de l’email sera incluse dans un workflow, le lien entre les données du flux et les variables de l’email sera établi via un nœud "Envoyer un email". Pour en savoir plus sur ce type de nœuds, cliquez ici.
8. Dans l’éditeur, cliquez à l’endroit du contenu où vous souhaitez ajouter la variable.
9. Cliquez sur le bouton Variables.
10. Dans Identifiant de la variable, saisissez un nom pour votre variable.
L’identifiant de la variable ne peut pas contenir d’espaces et ne peut contenir que des lettres, des chiffres et les symboles tiret ( - ) et soulignement ( _ ). Il ne peut pas non plus contenir d’accents, car ce sont des caractères non autorisés.
Dans notre exemple, la variable a été nommée "description".
11. Cliquez sur Accepter.
Lors de la création de la variable, l’éditeur ajoute automatiquement les doubles accolades qui la distinguent.
12. Répétez les étapes 8 à 11 pour chaque variable que vous souhaitez ajouter.
Pour supprimer une variable, sélectionnez-la dans l’éditeur, y compris les accolades qui l’entourent, puis appuyez sur la touche Suppr de votre clavier.
2.4. Configuration de la structure
(Dans cette section, vous allez définir le nombre de produits à afficher).
13. Dans Structure, définissez le nombre de produits que vous souhaitez afficher dans le contenu.
Le nombre de produits visibles dépendra des lignes et colonnes définies, et pourra varier selon que le contact consulte l’email depuis un ordinateur ("Lignes sur ordinateur" et "Colonnes sur ordinateur") ou depuis un appareil mobile ("Lignes sur mobile" et "Colonnes sur mobile").
Dans notre exemple, 1 ligne et 3 colonnes ont été sélectionnées pour l’affichage sur ordinateur, ce qui signifie que 3 produits seront affichés lorsque le contact consultera l’email depuis un ordinateur.
Si l’utilisateur lit l’email depuis un mobile, le bloc affichera également 3 articles mais chacun sur une ligne distincte.
14. (Facultatif) Décochez la case "Afficher les lignes incomplètes" pour que les produits ne soient affichés que s’il y en a suffisamment pour remplir toutes les colonnes d’une ligne.
Dans notre exemple, si nous décochons la case "Afficher les lignes incomplètes", le contenu ne s’affichera que si les données d’au moins 3 produits sont disponibles.
ÉTAPE 3. Prévisualiser la conception de votre bloc de produits personnalisé
Gardez à l’esprit que les nouvelles variables que vous avez créées ainsi que celles incluses dans le modèle ne sont pas encore liées à des données produits, elles s’afficheront donc sous forme de texte de remplacement (placeholder).
L’attribution de données aux variables, qui permet au contact de visualiser le contenu, se fait via un workflow.
15. Cliquez sur (Aperçu).
16. Cliquez sur (Vue ordinateur) et vérifiez que le design sur ordinateur est adapté à votre stratégie.
L’affichage par défaut de l’aperçu correspond à celui sur ordinateur.
17. Cliquez sur Vue mobile et vérifiez que le design sur appareils mobiles correspond à votre stratégie.
18. (Facultatif) Cliquez sur (Envoyer un email de prévisualisation) pour tester la mise en page dans votre client de messagerie. Pour cela, remplissez les paramètres d’envoi et cliquez sur le bouton Envoyer un test.
19. (Facultatif) Dans votre messagerie, vérifiez l’email de prévisualisation que vous avez envoyé.
L’email de prévisualisation permet de vérifier la mise en page. Étant donné qu’il n’est pas envoyé depuis un workflow, ce message ne contient pas de contexte relatif au contact ou à sa navigation, c’est pourquoi les variables du bloc de contenu ne seront pas associées à des produits et les liens spéciaux ne fonctionneront pas.
20. Cliquez sur Annuler, si vous n’avez pas envoyé d’email de prévisualisation.
21. (Facultatif) Effectuez les modifications nécessaires, en répétant les étapes et points précédents concernés, pour adapter le design à votre stratégie.
22. Dans l’éditeur, cliquez sur Enregistrer.
Succès !
Votre bloc de produits personnalisé dans un email est prêt.
Continuez à apprendre !
Pour tirer pleinement parti de votre compte Connectif, nous vous recommandons de poursuivre avec les articles suivants :
- Créer un bloc de produits personnalisés dans un contenu web, pour créer et personnaliser un bloc de contenu dynamique dans un contenu web.
- Afficher des produits personnalisés dans un contenu, pour lier les données collectées dans un workflow aux variables d’un contenu web.
- Afficher un pourcentage de remise uniquement si le produit est en promotion dans un email, pour personnaliser le comportement du contenu dynamique selon que le produit soit en promotion ou non.
- Panier abandonné + recommandations, pour envoyer un email aux contacts avec les produits de leur panier abandonné et des produits associés.