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 deixa o desenvolvimento mais lento.

Este cenário incorpora uma carga útil JSON simulada no corpo da mensagem e a armazena com capture. Depois, ela é analisada com json_parse para que o Liquid possa referenciar campos estruturados na seção Prévia. Tudo isso sem uma chamada de Connected Content ativa, uma entrada no Canvas disparada por API ou um envio de teste.

Use essa abordagem durante o desenvolvimento de mensagens. Ela não substitui os testes de ponta a ponta com disparos reais, envios de teste ou prévias das jornadas de usuário no Canvas.

Considerações

• Essa abordagem é compatível com a prévia do criador durante o desenvolvimento. Faça envios de teste e verificações da jornada ativa antes de lançar para clientes.
• Um bloco capture sozinho armazena o JSON como string. Referencie os campos somente depois de aplicar json_parse. Caso contrário, a saída da prévia pode ficar em branco.
• O JSON simulado precisa ser válido. Um JSON inválido faz o json_parse falhar ou retornar estruturas inesperadas.
• Substitua ou remova os blocos simulados antes do lançamento. Outra opção é proteger o Liquid de produção para que os dados simulados sejam usados apenas na prévia (por exemplo, com um sinalizador em 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 usar o Connected Content em produção, remova o bloco simulado e use a sua tag com a URL real. Consulte Fazer uma chamada de API.

Configuração

Este exemplo simula uma resposta de listagem de produtos no estilo do 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ê vai referenciar 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 aparece 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 ativa.

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 que os campos são renderizados.

Etapa 4: Aplique o mesmo padrão a outros formatos de 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 do Connected Content) antes do lançamento.

Artigos relacionados

• Enviar mensagens de teste
• Prévia das jornadas do usuário no Canvas
• Filtros avançados de Liquid (json_parse)
• Conteúdo conectado
• Array de objetos
• Variáveis de contexto