Skip to content

Probar mensajes con JSON simulado en la vista previa

Simula JSON de API o de tipo entrada dentro de tu mensaje con capture y json_parse para que puedas validar Liquid y el diseño en la vista previa del creador antes de lanzar una campaña, desencadenar un Canvas o llamar a contenido conectado en vivo.

Acerca de este ejemplo

Flash & Thread, una marca ficticia de comercio minorista de ropa, crea mensajes que dependen de respuestas de contenido conectado, variables de contexto de Canvas o datos de perfil con arrays de objetos. Desencadenar llamadas reales a la API o lanzar Campaigns para cada iteración ralentiza el desarrollo.

Este patrón incorpora una carga útil JSON simulada en el cuerpo del mensaje, la almacena con capture y luego la analiza con json_parse para que Liquid pueda hacer referencia a campos estructurados en la sección de vista previa, sin necesidad de una llamada en vivo de contenido conectado, una entrada de Canvas desencadenada por API o un envío de prueba.

Usa esto durante el desarrollo de mensajes. No sustituye las pruebas de extremo a extremo con desencadenadores reales, envíos de prueba o rutas de usuario en vista previa en Canvas.

Consideraciones

  • Este enfoque admite la vista previa del creador durante el desarrollo. Ejecuta envíos de prueba y verificaciones de ruta en vivo antes de lanzar a los clientes.
  • Un bloque capture por sí solo almacena JSON como una cadena. Haz referencia a los campos solo después de aplicar json_parse; de lo contrario, la salida de la vista previa puede estar en blanco.
  • El JSON simulado debe ser válido. Un JSON no válido provoca que json_parse falle o devuelva estructuras inesperadas.
  • Elimina o quita los bloques simulados antes del lanzamiento, o protege el Liquid de producción para que los datos simulados se utilicen solo en la vista previa (por ejemplo, con un indicador de comentario que elimines antes de la puesta en marcha).
  • Los fragmentos de código de Liquid en este artículo son ejemplos. Pruébalos en tus canales y con las formas reales de tu carga útil.
  • Para el contenido conectado en producción, elimina el bloque simulado y utiliza tu etiqueta de URL en vivo. Consulta Realizar una llamada a la API.

Configuración

Este ejemplo simula una respuesta de listado de productos al estilo de contenido conectado para un correo electrónico que itera sobre listings.

Paso 1: Captura el JSON simulado en el mensaje

Usa capture para almacenar la cadena JSON. Utiliza sintaxis JSON válida dentro del bloque (comillas dobles en las claves y los valores de cadena).

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 %}

Paso 2: Analiza el JSON con json_parse

Asigna la estructura analizada a una variable que puedas referenciar en el resto del mensaje.

1

{% assign response_json = mock_response | json_parse %}

Sin json_parse, la notación de punto sobre la cadena capturada (por ejemplo {{ mock_response.listings }}) normalmente se muestra en blanco en la vista previa.

Paso 3: Referencia los campos analizados en Liquid

Itera sobre el arreglo analizado y renderiza los campos como lo harías con una respuesta de API en vivo.

1
2
3

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

Ve a la sección vista previa en el creador de mensajes y confirma que los campos se renderizan.

Paso 4: Aplica el mismo patrón a otras estructuras JSON

Usa el mismo flujo de capture + json_parse para simular:

Datos que quieres probar Estructura JSON simulada
Variables de contexto de Canvas Objeto con las claves de propiedad que tu mensaje espera
Arreglo de objetos en un perfil Arreglo JSON de objetos con las mismas claves que tu atributo personalizado
Respuesta de contenido conectado JSON de API de ejemplo guardado de una llamada exitosa anterior

Reemplaza las variables simuladas por Liquid de producción (variables de contexto de Canvas, atributos personalizados o etiquetas de contenido conectado) antes de lanzar.
New Stuff!