プレビューでモック JSON を使用してメッセージをテストする

capture と json_parse を使用して、メッセージ内でAPIやエントリスタイルのJSONをモックすることで、キャンペーンの起動、キャンバスのトリガー、Connected Contentのライブ呼び出しを行う前に、メッセージ作成画面のプレビューでLiquidとレイアウトを検証できます。

この例について

架空の衣料小売ブランド Flash & Thread は、Connected Contentのレスポンス、キャンバスのコンテキスト変数、またはオブジェクト配列のプロファイルデータに依存するメッセージを作成しています。実際のAPI呼び出しをトリガーしたり、イテレーションごとにキャンペーンを起動したりすると、開発が遅くなります。

このパターンでは、モックJSONペイロードをメッセージ本文に埋め込み、captureで保存してからjson_parseで解析します。これにより、ライブのConnected Content呼び出し、APIトリガーのキャンバスエントリ、テスト送信なしでも、プレビューセクションでLiquidから構造化フィールドを参照できます。

このパターンはメッセージ開発中に使用してください。実際のトリガー、テスト送信、またはキャンバスでのユーザーパスのプレビューを使ったエンドツーエンドのテストに代わるものではありません。

考慮事項

• このアプローチは、開発中のメッセージ作成画面のプレビューをサポートします。顧客にリリースする前に、テスト送信とライブパスの確認を実行してください。
• capture ブロック単体では、JSON を文字列として保存します。フィールドを参照するには、必ず json_parse を適用してからにしてください。そうしないと、プレビュー出力が空白になることがあります。
• モック JSON は有効な形式である必要があります。無効な JSON は json_parse の失敗や予期しない構造の返却を引き起こします。
• リリース前にモックブロックを置き換えるか削除してください。あるいは、本番環境の Liquid でモックデータがプレビュー時のみ使用されるようにガードしてください（たとえば、公開前に削除するコメントフラグを使用するなど）。
• この記事の Liquid スニペットはあくまで例です。実際のチャネルおよびペイロード形式でテストしてください。
• 本番環境で Connected Content を使用する場合は、モックブロックを削除し、ライブ URL タグを使用してください。API 呼び出しの作成を参照してください。

設定

この例では、listings をループ処理するメールのために、Connected Content スタイルの商品一覧レスポンスをモックする方法を示します。

ステップ1:メッセージ内でモック JSON をキャプチャする

capture を使用して JSON 文字列を保持します。ブロック内では有効な JSON 構文（キーと文字列値にはダブルクォートを使用）を使用してください。

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

ステップ2:json_parse で JSON を解析する

解析された構造を変数に割り当て、メッセージの残りの部分で参照できるようにします。

1

{% assign response_json = mock_response | json_parse %}

json_parse を使用しない場合、キャプチャした文字列に対するドット記法（例：{{ mock_response.listings }}）はプレビューで通常空白として表示されます。

ステップ3:Liquid で解析済みフィールドを参照する

解析された配列をループ処理し、ライブ API レスポンスと同様にフィールドを表示します。

1
2
3

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

メッセージ作成画面のプレビューセクションに移動して、フィールドが正しく表示されることを確認します。

ステップ4:他の JSON 形式にも同じパターンを適用する

同じ capture + json_parse のフローを使用して、以下をモックできます。

ローンチ前に、モック変数を本番用の Liquid（キャンバスコンテキスト変数、カスタム属性、または Connected Content タグ）に置き換えてください。

関連記事

• テストメッセージの送信
• キャンバスでユーザーパスをプレビュー
• 高度なLiquidフィルター (`json_parse`)
• Connected Content
• オブジェクトの配列
• コンテキスト変数