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

A Flash & Thread, uma marca fictícia de varejo de roupas, cria mensagens que dependem de respostas de Connected Content, variáveis de contexto do Canvas ou dados de perfil em array de objetos. Disparar chamadas de API reais ou lançar Campaigns a cada iteração torna 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 Prévia — sem uma chamada de Connected Content em tempo real, entrada no Canvas disparada por API ou envio de teste.

Use isso durante o desenvolvimento da mensagem. Ele não substitui testes de ponta a ponta com disparos reais, envios de teste ou prévia de jornadas de usuários 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 depois de aplicar json_parse — caso contrário, a saída da prévia pode ficar em branco.
• O JSON simulado deve ser válido. JSON inválido faz com que json_parse falhe ou retorne estruturas inesperadas.
• Substitua ou remova 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 entrar em produção).
• 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 ao vivo. 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 itera sobre listings.

Etapa 1: Capturar JSON simulado na mensagem

Use capture para armazenar a string JSON. Use sintaxe JSON válida dentro do bloco (aspas duplas em chaves e 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: Analisar 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 }}) normalmente renderiza em branco na prévia.

Etapa 3: Referenciar campos analisados no Liquid

Itere sobre o array analisado e renderize os campos como faria para 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: Aplicar o mesmo padrão a outras estruturas JSON

Use o mesmo fluxo de capture + json_parse para simular:

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

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