Tester les messages avec du JSON simulé dans l’aperçu

Simulez du JSON de type API ou de type entrée dans votre message avec capture et json_parse afin de valider le Liquid et la mise en page dans l’aperçu du compositeur avant de lancer une Campaign, de déclencher un Canvas ou d’appeler du contenu connecté en direct.

À propos de cet exemple

Flash & Thread, une marque fictive de prêt-à-porter, crée des messages qui dépendent de réponses de contenu connecté, de variables de contexte Canvas ou de données de profil sous forme de tableaux d’objets. Déclencher de vrais appels API ou lancer des campagnes à chaque itération ralentit le développement.

Dans ce scénario, un payload JSON fictif est intégré dans le corps du message et stocké avec capture. Il est ensuite analysé avec json_parse pour que Liquid puisse référencer des champs structurés dans la section Aperçu, sans appel de contenu connecté en direct, sans entrée dans un Canvas déclenché par API et sans envoi de test.

Utilisez cette approche pendant le développement de vos messages. Elle ne remplace pas les tests de bout en bout avec de vrais déclencheurs, les envois de test ou l’aperçu des parcours utilisateur dans Canvas.

Points à prendre en compte

• Cette approche prend en charge l’aperçu dans l’éditeur pendant le développement. Effectuez des envois de test et des vérifications sur le parcours en production avant le lancement auprès de vos clients.
• Un bloc capture seul stocke le JSON sous forme de chaîne de caractères. Ne référencez les champs qu’après avoir appliqué json_parse, sinon le résultat de l’aperçu risque d’être vide.
• Le JSON fictif doit être valide. Un JSON non valide fait échouer json_parse ou renvoie des structures inattendues.
• Remplacez ou supprimez les blocs fictifs avant le lancement, ou protégez votre code Liquid de production afin que les données fictives ne soient utilisées que dans l’aperçu (par exemple avec un commentaire servant d’indicateur, que vous supprimez avant la mise en production).
• Les extraits de code Liquid de cet article sont des exemples. Testez-les dans vos canaux et avec la structure réelle de vos payloads.
• Pour le contenu connecté en production, supprimez le bloc fictif et utilisez votre étiquette d’URL en direct. Consultez la section Effectuer un appel API.

Configuration

Cet exemple simule une réponse de type Connected Content contenant une liste de produits, pour un e-mail qui parcourt listings en boucle.

Étape 1 : Capturer le JSON simulé dans le message

Utilisez capture pour stocker la chaîne JSON. Respectez la syntaxe JSON dans le bloc (guillemets doubles autour des clés et des valeurs de chaîne de caractères).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{% capture mock_response %}
{
  "success": true,
  "listings": [
    {
      "id": 45731,
      "name": "Summit Trail Jacket",
      "image_url": "https://example.com/images/trail-jacket.png",
      "price": {
        "actual": "89.00",
        "currency": "USD"
      },
      "link": "https://example.com/products/trail-jacket",
      "product_category": "Outerwear",
      "properties": {
        "size": "L",
        "colour": "Navy",
        "limited_edition": false
      },
      "out_of_stock": false
    }
  ]
}
{% endcapture %}

Étape 2 : Analyser le JSON avec json_parse

Attribuez la structure analysée à une variable que vous référencerez dans le reste du message.

1

{% assign response_json = mock_response | json_parse %}

Sans json_parse, la notation par points sur la chaîne capturée (par exemple {{ mock_response.listings }}) s’affiche généralement vide dans l’aperçu.

Étape 3 : Référencer les champs analysés dans Liquid

Parcourez le tableau analysé et affichez les champs comme vous le feriez pour une réponse d’API en production.

1
2
3

{% for listing in response_json.listings %}
{{ listing.name }} — {{ listing.price.actual }} {{ listing.price.currency }}
{% endfor %}

Accédez à la section Aperçu dans l’éditeur de messages et vérifiez que les champs s’affichent correctement.

Étape 4 : Appliquer le même modèle à d’autres structures JSON

Utilisez le même flux capture + json_parse pour simuler :

Remplacez les variables simulées par le Liquid de production (variables de contexte Canvas, attributs personnalisés ou tags Connected Content) avant le lancement.

Articles connexes

• Envoyer des messages de test
• Prévisualiser les parcours utilisateur dans Canvas
• Filtres Liquid avancés (json_parse)
• Contenu connecté
• Tableau d’objets
• Variables de contexte