Comment utiliser un bloc de tableau dans un e-mail

Objectif de cet article

Découvrez comment utiliser un bloc de tableau dans un e-mail. Ces blocs peuvent afficher des images et du texte côte à côte. Les blocs de tableau peuvent également être dynamiques, en itérant sur des données afin de personnaliser l’e-mail pour chaque destinataire.

Comprendre les blocs de tableau

Il existe 2 types de blocs de tableau :

• Statique
  Ce type de bloc de tableau affiche le nombre exact de lignes et de colonnes que vous sélectionnez. Chaque destinataire voit la même mise en page de tableau, mais le contenu peut varier si vous utilisez des tags de personnalisation, d’événement, de catalogue ou d’autres tags.
• Dynamique
  Ces blocs de tableau vous permettent d’itérer sur une liste de données (p. ex., une liste d’articles dans un flux de panier abandonné ou de confirmation de commande). Le nombre de lignes est déterminé par le nombre d’éléments dans la liste : si quelqu’un a commandé 1 article, il aura 1 ligne ; s’il a commandé 5 articles, il aura 5 lignes.

Le cas d’usage le plus courant d’un bloc de tableau dynamique consiste à mettre en avant des produits dans un message de panier abandonné. Cela utilise un bloc dynamique pour afficher plusieurs lignes avec des images, les noms de produits et les prix de chaque article abandonné.

Quand utiliser les blocs de tableau

Un bloc de tableau est l’une des nombreuses façons de placer 2 éléments de contenu ou plus côte à côte. Les alternatives incluent les blocs de fractionnement et les colonnes.

Découvrez les différentes options permettant de placer du contenu côte à côte dans le tableau ci-dessous.

Blocs de tableau statique

Le mot « static » signifie simplement que le contenu et le nombre de lignes dans le tableau restent identiques pour chaque destinataire. Le contenu ne change que si vous ajoutez du contenu dynamique, comme des tags de personnalisation, de date et de catalogue, dans un bloc de tableau statique.

Cas d’utilisation des blocs de tableau statique

Utilisez un bloc de tableau statique pour :

• Afficher un élément spécifique, par exemple pour des ventes flash ou des lancements de produits.
• Incluez toujours le même nombre d’éléments (par exemple, affichez l’élément consulté le plus récemment dans un message d’abandon de navigation).
• Créez un message de flux dans lequel les données d’événement ne contiennent qu’un seul article, qui comprend :
  • Flux de panier abandonné (déclencheur d’ajout au panier)
  • Flux d’abandon de navigation
  • Flux de retour en stock et de baisse de prix
• Vous souhaitez placer du texte statique et des images côte à côte

Comment créer un bloc de tableau statique

1. Accédez à un e-mail (c’est-à-dire un e-mail de campagne, un modèle ou un e-mail de flux).
2. Dans le menu Blocs, faites glisser un bloc Tableau dans la zone de travail.
   

3. Ouvrez le menu Styles du bloc. Notez que Statique est déjà sélectionné, car il s’agit du paramètre par défaut pour les blocs de tableau.
   

4. Sous Colonnes, cliquez sur Ajouter une colonne pour ajouter des colonnes supplémentaires.
   

5. Sous Lignes, cliquez sur Ajouter une ligne pour ajouter des lignes supplémentaires.
   

6. Revenez à l’onglet Content du bloc.
7. Utilisez la zone Sélecteur de cellule pour choisir la cellule que vous souhaitez modifier.
   

8. Choisissez si cette cellule doit être du texte ou une image à l’aide du menu Contenu de la cellule. Répétez l’opération pour chaque cellule.
9. Ajoutez du contenu (c’est-à-dire du texte ou une image) sous le menu Contenu de la cellule.
10. Une fois que vous avez ajouté du contenu à chaque cellule, cliquez sur la flèche de retour pour revenir au menu principal Contenu et continuer à créer votre e-mail.
    

Blocs de tableau dynamiques

Les blocs de tableau dynamiques parcourent un ensemble de données pour répéter le contenu en fonction du nombre d’entrées qu’il contient. Le bloc itère jusqu’à atteindre la fin de la liste. Par exemple, vous pouvez afficher le nombre exact de produits dans le panier de quelqu’un. 

Pour utiliser un bloc dynamique, vous devez référencer des données formatées sous forme de liste imbriquée, où chaque entrée de liste suit le même format. Le cas d’usage le plus courant est celui des informations produit figurant dans l’événement de déclenchement d’un flux (p. ex., début de commande, commande passée), mais vous pouvez aussi utiliser un flux web pour lister des articles de blog, ou référencer des données de profil mises en forme sous forme de liste.

Éléments d’un bloc de tableau dynamique

La création d’un bloc de contenu dynamique nécessite 3 éléments :

• Collection de lignes
  L’emplacement des données à parcourir. Lorsque vous examinez vos données sources (par exemple, les éléments dans les métadonnées d’un événement Début de paiement), il s’agit de la partie des balises de modèle pertinentes qui est identique pour chaque tag.
• Alias de ligne
  Une façon abrégée de référencer votre collection de lignes pendant que le tableau itère dans votre ensemble de données. L’alias de ligne est généralement item, mais vous pouvez utiliser n’importe quel texte.
• Contenu dynamique
  Le contenu qui apparaîtra dans chaque ligne. Par exemple, vous pouvez afficher une image, un nom de produit, un prix et des informations de variante pour chaque article qu’une personne a laissé dans son panier.

Cas d’utilisation des blocs de tableau dynamiques

Utilisez un bloc de tableau dynamique si vous faites référence de manière dynamique à une liste de données et si chaque entrée de la liste est formatée de la même manière. Il s’agit des numéros suivants :

• Flux de panier abandonné (déclencheur paiement démarré)
• Flux de confirmation de commande
• Flux de vente incitative ou de vente croisée

Comment créer un bloc de tableau dynamique

Cette section présente les blocs de tableau dynamiques de manière générale. Pour des instructions plus détaillées sur ce processus, découvrez comment créer des blocs dynamiques dans un e-mail de flux.

1. Accédez à l’éditeur d’un e-mail. Si vous utilisez des données d’événement (p. ex., les détails d’un panier abandonné), accédez à un e-mail dans un flux déclenché par l’événement concerné. 
2. Dans le menu Blocs, faites glisser un bloc Tableau dans la zone de travail.
   

3. Ouvrez le menu Styles du bloc, puis sélectionnez Dynamique.
   

4. Définissez votre collection de lignes: utilisez la partie du tag de personnalisation qui est cohérente pour chaque élément que vous souhaitez afficher.
   • Par exemple, si {{ event.products.0.imageURL }} est le tag de l’image du 1er élément et {{ event.products.1.name }} est le tag du nom du 2e élément, alors votre collection de lignes doit être event.products.
   • La collection de lignes correspond presque toujours à la partie du tag qui précède le premier chiffre (par exemple, event.extra.line_items si le tag complet est {{ event.extra.line_items.0.product.name }}).
5. Définissez votre Alias de ligne sur item.
6. Revenez à l’onglet Content du bloc.
   • Ajoutez du contenu à chaque cellule du tableau. En général, la cellule de gauche est une image et la cellule de droite est un texte contenant des tag dynamiques avec les informations sur les produits.
7. Remplacez tout ce qui précède le premier numéro dans chaque tag de votre tableau par l’alias de votre ligne (c’est-à-dire « item »). Par exemple :
   • {{ event.extra.line_items.0.imageURL }} devient {{ item.imageURL }}
   • {{ event.items.0.product.name }} devient {{ item.product.name }}
8. Cliquez sur Prévisualiser et tester pour prévisualiser votre e-mail.
   • Assurez-vous de prévisualiser avec les bonnes données (par ex., s’il s’agit d’un message de panier abandonné, prévisualisez en utilisant l’événement Started checkout), sinon le tableau n’affichera rien.

Ce processus permet aux développeurs et aux spécialistes marketing à l’aise avec le code de créer du contenu hautement personnalisé. Si vous n’avez pas de développeur dans votre équipe et si vous n’êtes pas à l’aise pour créer ce bloc vous-même, vous pouvez demander l’aide d’un partenaire Klaviyo.

En savoir plus sur la création d’un flux de panier abandonné ou sur l’utilisation des données d’événement pour personnaliser les flux d’e-mail et de SMS.

Fonctionnement des blocs de tableau dynamique

Les blocs de tableau dynamiques fonctionnent exactement comme une boucle for dans la plupart des langages de programmation.

• La collection de lignes identifie la partie des données à parcourir en boucle.
• L’ alias de ligne est un alias permettant d’identifier l’emplacement du contenu dynamique.
• Chaque tag qui utilise l’ alias de ligne fera référence à la ligne correcte dans les données d’événement, en fonction de la ligne dans laquelle il apparaît.

Lorsque l’e-mail est rendu, Klaviyo parcourt chaque élément du jeu de données. La première fois, l’alias de ligne est remplacé par [row collection].0., en référence au premier élément du jeu de données. La deuxième fois, l’alias de ligne est remplacé par [row collection].1., ce qui indique le deuxième élément du jeu de données. Ce processus se poursuit ensuite jusqu’à ce qu’il ne reste plus d’éléments, et il y a une ligne pour chaque élément du jeu de données.

Ressources supplémentaires