Testar mensagens com JSON simulado na prévia

Simule JSON de API ou de entrada dentro da sua mensagem com capture e json_parse para validar o Liquid e o layout na prévia do criador antes de lançar uma Campaign, disparar um Canvas ou chamar o Connected Content em tempo real.

Sobre este exemplo

Flash & Thread, uma marca fictícia de varejo de roupas, cria mensagens que dependem de respostas do Connected Content, variáveis de contexto do Canvas ou dados de perfil em array de objetos. Disparar chamadas reais de API ou lançar Campaigns a cada iteração deixa o desenvolvimento mais lento.

Esse padrão incorpora uma carga útil JSON simulada no corpo da mensagem, armazena-a com capture e depois a analisa com json_parse para que o Liquid possa referenciar campos estruturados na seção Preview — sem uma chamada ao vivo do Connected Content, entrada no Canvas disparada por API ou envio de teste.

Use isso durante o desenvolvimento de mensagens. Ele não substitui testes de ponta a ponta com disparos reais, envios de teste ou prévia de jornadas de usuário no Canvas.

Considerações

• Essa abordagem suporta a prévia do criador durante o desenvolvimento. Execute envios de teste e verificações de jornada ao vivo antes de lançar para os clientes.
• Um bloco capture sozinho armazena JSON como uma string. Referencie campos somente após aplicar json_parse — caso contrário, a saída da prévia pode ficar em branco.
• O JSON simulado precisa ser válido. JSON inválido faz com que json_parse falhe ou retorne estruturas inesperadas.
• Remova ou substitua os blocos simulados antes do lançamento, ou proteja o Liquid de produção para que os dados simulados sejam usados apenas na prévia (por exemplo, com um sinalizador de comentário que você exclui antes de ir ao ar).
• Os snippets de Liquid neste artigo são exemplos. Teste nos seus canais e com os formatos reais da sua carga útil.
• Para Connected Content em produção, remova o bloco simulado e use sua tag de URL ativa. Consulte Fazendo uma chamada de API.

Configuração

Este exemplo simula uma resposta de listagem de produtos no estilo Connected Content para um e-mail que percorre listings em loop.

Etapa 1: Capture o JSON simulado na mensagem

Use capture para armazenar a string JSON. Use sintaxe JSON válida dentro do bloco (aspas duplas nas chaves e nos valores de string).

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

Etapa 2: Analise o JSON com json_parse

Atribua a estrutura analisada a uma variável que você referencia no restante da mensagem.

1

{% assign response_json = mock_response | json_parse %}

Sem json_parse, a notação de ponto na string capturada (por exemplo, {{ mock_response.listings }}) geralmente renderiza em branco na prévia.

Etapa 3: Referencie os campos analisados no Liquid

Percorra o array analisado em loop e renderize os campos como faria com uma resposta de API em tempo real.

1
2
3

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

Acesse a seção Prévia no criador de mensagem e confirme se os campos são renderizados.

Etapa 4: Aplique o mesmo padrão a outras estruturas JSON

Use o mesmo fluxo de capture + json_parse para simular:

Substitua as variáveis simuladas pelo Liquid de produção (variáveis de contexto do Canvas, atributos personalizados ou tags de Connected Content) antes de fazer o lançamento.

Artigos relacionados

• Enviar mensagens de teste
• Prévia de jornadas de usuários no Canvas
• Filtros avançados de Liquid (`json_parse`)
• Connected Content
• Array de objetos
• Variáveis de contexto