Comment créer des blocs dynamiques dans un flux d'e-mails

Vous apprendrez

Apprenez à utiliser des blocs de tableaux dynamiques pour ajouter des informations sur les produits et d'autres événements à vos flux déclenchés par des mesures. Dans cet article, vous apprendrez à créer un bloc dynamique en utilisant l'exemple d'un rappel de panier abandonné montrant les produits qui ont été abandonnés.

Si vous utilisez l'une des intégrations ecommerce préconstruites de Klaviyo (par exemple, Shopify, BigCommerce, Magento ou WooCommerce), vous n'avez pas besoin de construire ces blocs manuellement. Utilisez plutôt la bibliothèque de flux pour trouver des e-mails de flux préconstruits et entièrement fonctionnels à utiliser comme modèles. 

Dans un flux déclenché par des mesures, vous pouvez personnaliser le contenu de vos e-mails en fonction de l'événement qui déclenche le flux. Par exemple, si quelqu'un commence à passer à la caisse, vous pouvez inclure des images de produits et des prix dans un e-mail de panier abandonné pour encourager les destinataires à retourner dans leur panier et à terminer leur achat. Le bloc de tableau dynamique se répète automatiquement avec les informations spécifiées pour chaque article du panier.

Avant de commencer

Avant de vous lancer, assurez-vous que vous disposez des données de l'événement à utiliser. Naviguez vers Analytics > Metrics pour vous assurer que l'événement existe dans Klaviyo.

Si vous n'êtes pas familier avec l'utilisation de données d'événements ou de profils dans les e-mails, consultez d'abord notre référence sur la personnalisation des messages. 

Il sera également utile de comprendre les types de données dans Klaviyo, en particulier les listes (c'est-à-dire les tableaux). Un tableau est un moyen de stocker plusieurs données structurées de la même manière. Par exemple, les articles du panier d'un client sont stockés sous forme de tableau dans l'événement Checkout Started. Le tableau des articles contient une entrée par article commandé, et chaque entrée contient les détails de cet article (par exemple, le nom de l'article, l'URL de l'image, la quantité, la taille, la couleur, etc.) 

Quels types de flux peuvent utiliser le bloc de table dynamique ? 

Les tableaux dynamiques contiennent des informations sur un ou plusieurs produits avec lesquels un client a interagi d'une manière ou d'une autre (par exemple, il les a achetés ou les a laissés dans son panier). Ces blocs de table sont utiles pour les événements qui peuvent contenir différents nombres de produits, en fonction de l'action d'un client. Les blocs de tableaux dynamiques sont utiles pour les flux déclenchés par ces événements : 

• Ordre passé (flux de confirmation de l'ordre)
• Page de commande démarrée (panier abandonné flux) 
• Commande exécutée (flux de confirmation d'expédition) 
• Commande annulée (confirmation d'annulation) 
• Tout autre événement contenant une liste d'un ou plusieurs produits

Les tableaux dynamiques ne sont pas utiles si votre événement contient toujours un seul produit. Les événements ci-dessous requièrent plutôt un bloc de table statique. 

• Ajouté au panier (page de commande flux abandonnée)
• Produit consulté (flux d'abandon de navigation) 

Découvrez comment créer un bloc de tableau statique pour les événements portant sur un seul produit. 

1. Créez votre flux

Commencez par créer votre flux :

1. Accédez à l'onglet Flux dans Klaviyo.
2. Cliquez sur Créer un flux. 
3. Cliquez sur Créer votre flux. 
4. Donnez un nom à votre flux et cliquez sur Créer un flux. 
5. Sous Sélectionner un déclencheur, cliquez sur Votre indicateur. 
6. Sélectionnez les intégrations à partir desquelles votre indicateur de déclenchement est envoyé (par exemple, Shopify).
7. Choisissez l'événement qui doit déclencher votre flux. Dans cet exemple, nous utiliserons l'événement Checkout Started. Cela nous permet d'avoir accès aux données d'événement nécessaires à la construction d'un bloc de panier abandonné.
8. Cliquez sur Terminé. 
9. Glissez-déposez une action Email dans le flux.

2. Ajoutez un tableau dynamique à votre flux e-mail

Ensuite, ajoutez un tableau dynamique à votre e-mail de flux :

1. Cliquez sur le bloc d'e-mails que vous avez ajouté à votre flux dans la dernière section. 
2. En regard de modèle, cliquez sur Sélectionner un modèle. 
3. Choisissez un modèle qui vous servira de base.
4. Faites glisser un bloc de tableau dans votre e-mail.
5. Cliquez sur Styles > Dynamic pour convertir le tableau en bloc dynamique. Vous verrez apparaître deux champs : Collection de lignes et Alias de lignes, que vous remplirez aux étapes 3 et 4.
6. Cliquez à nouveau sur l'onglet Contenu pour ajuster vos types de colonnes.
7. En général, un message de panier abandonné montre des images des articles abandonnés à gauche et des détails sur l'article à droite. Cliquez sur le sélecteur de ligne gauche ou droite, puis cliquez sur Texte ou Image pour modifier le type de cellule.
   

3. Identifiez votre collection de rangs

Dans cette étape, vous ajouterez le nom du tableau sur lequel vous souhaitez itérer au champ de collecte Row. Pour trouver le nom de votre tableau :

1. Cliquez sur Prévisualiser et tester. 
2. Faites défiler les données de prévisualisation de votre événement jusqu'à ce que vous trouviez un tableau contenant les informations dont vous avez besoin. 
   Si personne n'a encore effectué l'action de déclenchement du flux, il n'y aura pas de données de prévisualisation disponibles pour le flux. Vous pouvez naviguer sur votre site pour effectuer l'action (par exemple, ajouter des articles à votre panier et lancer une page de commande), puis votre événement s'affichera dans les options de prévisualisation de Klaviyo.
   
   Dans cet exemple, il y a 2 tableaux qui indiquent les informations sur les articles de vente : 
   
   • Éléments
     Un tableau de premier niveau contenant une liste simple du nom de chaque élément.
   • line_items,
     Un tableau imbriqué dans le tableau extra contenant plus de détails, notamment le titre, le prix, l'UGS et l'URL de l'image de chaque article.
     

   Vous voudrez utiliser le tableau plus détaillé, line_items, car il contient les informations détaillées nécessaires à l'affichage dans le bloc de tableau répétitif. Pour trouver la variable appropriée à définir dans le champ de collecte Row, sélectionnez deux variables dans la première section du tableau et copiez-les. Dans cet exemple, copiez les balises pour variant_price et title. Voici les deux balises de cet exemple : 

   {{ event.extra.line_items.0.variant_price }}

   {{ event.extra.line_items.0.title }}

3. Ignorez les parenthèses et regardez les variables qu'elles contiennent. Notez que le début des deux variables est le même : event.extra.line_items.0. 

4. Utilisez tout ce qui va jusqu'au point et au nombre à la fin de cette partie de la variable (à l'exclusion de ceux-ci) comme votre collection de rangées. Dans cet exemple, le paramètre approprié pour le champ de collecte Row est event.extra.line_items.

Code de réduction par défaut (facultatif)

Le contenu de remplacement s'affiche s'il n'y a pas de données dans la collection de lignes que vous sélectionnez. Cela n'est nécessaire que si vous construisez un tableau basé sur des données qui n'apparaissent pas systématiquement dans l'événement déclencheur. Pour ajouter un contenu de remplacement, bouton bascule sur l'option Contenu de remplacement et ajoutez un contenu (c'est-à-dire un texte ou une image) dans le champ qui apparaît. 

4. Choisissez un alias de ligne

Votre alias de ligne peut être n'importe quel texte (sans caractères spéciaux ni espaces). Vous utiliserez cet alias dans votre bloc de tableau dynamique pour identifier les variables qui doivent être extraites du tableau que vous avez sélectionné ci-dessus. Il est utile de choisir un alias simple mais descriptif, afin qu'il soit facile à mémoriser. 

Dans cet exemple, le bloc de tableau dynamique répète une liste d'articles dans un panier abandonné, donc article est un bon alias à utiliser. Si votre bloc se répète sur une liste d'articles de blog, vous pouvez utiliser post comme alias.

Vous pouvez utiliser n'importe quel alias ; assurez-vous simplement d'utiliser systématiquement cet alias dans les variables de votre tableau (comme indiqué dans les étapes suivantes). 

Une fois que vous avez rempli les champs Row Collection et Row Alias, vous êtes prêt à construire votre table. 

5. Ajouter des détails dynamiques sur les produits

Une fois la source de données configurée, vous pouvez utiliser des balises pour ajouter du texte à votre courrier électronique. Comme cet e-mail concerne un flux de panier abandonné, il est important d'indiquer le nom du produit abandonné, ainsi que d'autres détails tels que le prix et le lien d'achat.

Pour saisir le titre du produit dans votre bloc :

1. Naviguez jusqu'à l'une des colonnes du tableau. Si vous souhaitez placer une image dans la première colonne et le texte dans la seconde, cliquez sur le sélecteur de colonne situé à droite de la section Contenu du bloc.
2. Collez la variable d'événement complète de la fenêtre de prévisualisation (par exemple, {{ event.extra.line_items.0.title }}).
3. Remplacez la collection de lignes dans la variable (c'est-à-dire le texte que vous avez utilisé pour la collection de lignes) et le point et le nombre qui suivent par l'alias sélectionné à la dernière étape (par exemple, élément), en conservant les parenthèses qui l'entourent. Dans cet exemple, {{ event.extra.line_items.0.title }} devient {{ item.title }}.
   
4. Prévisualisez l'e-mail pour vous assurer que le titre s'affiche. Si elle n'apparaît pas, vérifiez l'orthographe, les majuscules et le formatage du texte, ainsi que vos paramètres dans l'onglet Styles, pour vous assurer qu'il n'y a pas d'erreurs.

Répétez les mêmes étapes pour ajouter des détails supplémentaires sur les articles. 

Hyperlien vers le titre d'un produit

Pour ajouter un lien hypertexte au titre du produit : 

1. Trouvez la variable URL du produit dans les détails de votre événement.
2. Remplacez la collection et le numéro de la ligne par votre alias de ligne, comme pour la variable ci-dessus (par exemple, {{ event.extra.line_items.url }} devient {{ item.url }}). 
3. Mettez en évidence la variable complète du titre de l'élément (par exemple, {{ item.title }}). 
4. Cliquez sur l'icône de lien et collez votre variable URL dans le champ URL.

Considérations relatives aux variables monétaires

Si le prix de votre article est transmis sous forme de nombre dans les détails de l'événement (sans symbole de devise), utilisez la balise currency_format pour appliquer le formatage de la devise. Pour appliquer cette balise, remplacez nom_variable dans le code ci-dessous par la variable du prix complet, en excluant les crochets de la variable d'origine : 

{% currency_format variable_name %}

Ainsi, votre variable finale pourrait ressembler à ceci : 

{% currency_format item.price %}

6. Ajouter une image

Pour insérer une image dynamique, recherchez la variable d'événement de l'image dans la fenêtre de prévisualisation. Souvent, cette variable est répertoriée sous image, img ou src, mais cela dépend de votre intégration. Ici, il se trouve sous src : {{ event.extra.line_items.0.product.images.0.src }}. Appliquez à cette variable les mêmes ajustements que ceux décrits à l'étape 5 (en remplaçant event.extra.line_items.0 avec article). Il s'agit d'un tableau de variables d'événement dans event.extra.line_items, qui contient les images de cet élément spécifique.

1. Une fois que vous avez cette variable, rendez-vous dans la colonne où vous souhaitez afficher l'image (la colonne de gauche, dans ce cas).
2. Cliquez sur Image sous Contenu de la cellule si celle-ci est actuellement définie sur Texte.
3. Cliquez sur Sélectionner une image.
4. Dans l'onglet Image dynamique, collez votre variable d'image dans le champ Variable dynamique ou URL dynamique.
5. Saisissez la variable d'événement de l'image personnalisée, {{ item.product.images.0.src }}.
6. Cliquez sur Enregistrer.
7. Ajoutez la variable URL du produit de l'étape 5 dans le champ Adresse du lien pour que l'image soit cliquable.
8. Définissez une largeur maximale pour l'image, en commençant par 250-300 et en ajustant si nécessaire.
9. Une fois les modifications effectuées, cliquez sur Terminé et prévisualisez votre e-mail pour vous assurer qu'il s'affiche comme prévu. Si une image n'apparaît pas, vérifiez l'orthographe de la variable par rapport à celle de la modale de prévisualisation.

Prévisualiser votre e-mail

Après avoir suivi les étapes ci-dessus, les modèles d'e-mails devraient ressembler à l'image ci-dessous lorsqu'ils sont visualisés.

Pour voir ce que cela donnerait avec des contenus dynamiques, et pour vous assurer que les liens fonctionnent correctement, cliquez sur Prévisualisation & test. S'il y a des erreurs, vérifiez l'orthographe et la structure de vos variables, ainsi que l'onglet Styles de votre bloc. 

Vous pouvez utiliser ces mêmes concepts pour créer des blocs dynamiques supplémentaires pour les flux déclenchés sur la base de différentes mesures.

Créer un bloc de table statique pour les événements concernant un seul produit 

Si un événement ne peut contenir qu'un seul produit, utilisez un bloc de table statique. Pour ces événements, il n'est pas nécessaire de définir une collection Row ou un alias Row, et vous pouvez utiliser des variables non modifiées directement à partir des données de votre événement. 

1. Accédez à l'onglet Flux dans Klaviyo.
2. Cliquez sur Créer un flux. 
3. Cliquez sur Créer votre flux. 
4. Donnez un nom à votre flux et cliquez sur Créer un flux. 
5. Sous Sélectionner un déclencheur, cliquez sur Votre indicateur. 
6. Choisissez un indicateur de produit unique, tel que Produit vu ou Ajouté au panier. 
7. Cliquez sur Terminé. 
8. Glissez-déposez une action Email dans le flux.
9. En regard de modèle, cliquez sur Sélectionner un modèle. 
10. Sélectionnez un modèle à utiliser comme base.
11. Faites glisser un bloc de tableau dans votre e-mail.
12. Par défaut, le champ des données est défini sur Statique sous Styles; ne modifiez pas ce paramètre.
    
13. Cliquez sur Aperçu du test & pour voir les variables disponibles pour votre message. Cliquez sur la variable URL de l'image pour la copier.
    
14. À l'aide des champs Sélecteur de cellule et Contenu de cellule, définissez la cellule de gauche pour qu'elle utilise le type de cellule Image.
15. Cliquez sur Sélectionner une image. 
16. Sélectionnez Image dynamique. 
17. Collez la variable URL de l'image que vous avez copiée dans le champ Variable dynamique ou URL dynamique. 
18. Cliquez sur Enregistrer. 
19. Réglez la cellule de droite pour qu'elle utilise le type de cellule Texte. 
20. Copiez les variables que vous souhaitez afficher (par exemple, le titre du produit, le prix du produit) et collez-les dans la cellule de texte.
    
21. Ajoutez des blocs supplémentaires, comme un bouton CTA pour retourner au panier, et stylisez l'e-mail comme vous le souhaitez.
22. Lorsque vous avez terminé, cliquez sur Quitter.

Ressources complémentaires

• Comment créer un flux de panier abandonné
• Guide de personnalisation des messages
• Comment afficher les produits verticalement dans les e-mails
• Cours : Appliquer les concepts de la logique de programmation pour construire des messages plus personnalisés