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 ropa del sector de comercio minorista, crea mensajes que dependen de respuestas de contenido conectado, variables de contexto de Canvas o datos de perfil en forma de arreglos de objetos. Desencadenar llamadas reales a la API o lanzar Campaigns en cada iteración ralentiza el desarrollo.

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

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

Consideraciones

• Este enfoque admite la vista previa en el creador durante el desarrollo. Realiza envíos de prueba y comprobaciones de la ruta en vivo antes de lanzarlo 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, el resultado de la vista previa puede quedar en blanco.
• El JSON simulado debe ser válido. Un JSON no válido hace que json_parse falle o devuelva estructuras inesperadas.
• Reemplaza o elimina los bloques simulados antes del lanzamiento, o protege el Liquid de producción para que los datos simulados se usen solo en la vista previa (por ejemplo, con un indicador en un comentario que elimines antes de la puesta en marcha).
• Los fragmentos de código Liquid de este artículo son ejemplos. Pruébalos en tus canales y con las estructuras reales de tu carga útil.
• Para el contenido conectado en producción, elimina el bloque simulado y usa tu etiqueta de URL en vivo. Consulta Hacer una llamada a la API.

Configuración

Este ejemplo simula una respuesta de listado de productos al estilo de Connected Content para un correo electrónico que recorre listings en un bucle.

Paso 1: Captura un JSON simulado en el mensaje

Usa capture para guardar la cadena JSON. Usa una sintaxis JSON válida dentro del bloque (comillas dobles en las claves y en 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 a la que harás referencia en el resto del mensaje.

1

{% assign response_json = mock_response | json_parse %}

Sin json_parse, la notación de puntos sobre la cadena capturada (por ejemplo, {{ mock_response.listings }}) suele aparecer en blanco en la vista previa.

Paso 3: Haz referencia a los campos analizados en Liquid

Recorre la matriz analizada y muestra 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 del creador de mensajes y confirma que los campos se muestran correctamente.

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

Usa el mismo flujo de capture + json_parse para simular:

Antes del lanzamiento, sustituye las variables simuladas por el Liquid de producción (variables de contexto de Canvas, atributos personalizados o etiquetas de Connected Content).

Artículos relacionados

• Enviar mensajes de prueba
• Vista previa de las rutas de usuario en Canvas
• Filtros avanzados de Liquid (json_parse)
• Contenido conectado
• Matriz de objetos
• Variables de contexto