Iterableにパーソナライズされた画像を追加する方法
Iterableにすでに送信しているHandlebarsフィールドを使用して、ユーザーごとに画像上に名前、予約詳細、または残高を描画してください。
初回公開日： Iterableに保存しているデータを、ユーザーに表示される画像に反映させてください。
Iterableテンプレートでは、Handlebarsを使用してすでにプロフィールデータやイベントデータを取得しています。Sendtric パーソナライズされた画像 さらに一歩進んで、それらの値をフォントやレイアウトを用いて画像に反映させてみましょう。たとえば、ユーザーの旅程が記載された搭乗券風のグラフィックや、最新の残高が表示されたポイントカードなどです。この画像は、メールが開かれた際に生成されます。
Iterableのドラッグ＆ドロップエディタには、 躍動感あふれる画像 Imageブロックのオプションには、Handlebarsを含むURLから画像を読み込む機能があり、同サービスのドキュメントでは、そのような画像を作成するために外部の画像サービスが紹介されています。Sendtricはそのようなサービスのひとつです。ユーザーが画像をデザインすると、そのURLにIterableフィールドが反映されます。
Iterableのパーソナライズされた画像でできること
- 旅行および予約の概要： 予約情報に含まれる出発地、到着地、および日付を、1つの旅行図にまとめて表示します。詳細はこちらをご覧ください。 画像上のカスタマイズされたテキスト 例としては、
- アプリの主なマイルストーン： お祝いメールの中で、カスタムプロフィールフィールドから「30回のワークアウトを完了しました」や「12回のレッスンを修了しました」といったメッセージを表示します。
- ロイヤリティに関する声明： 毎月のジャーニーメールに掲載されているカード画像上のポイント、ティア、および会員名。
- 年末の振り返り： 1つの背景上にユーザープロフィールのいくつかの統計情報を表示する、これはよくある用途で 今年の振り返りのメール.
| 画像の特長 | Free | Micro | Standard | 権力と企業 |
|---|---|---|---|---|
| 画像ごとにカスタマイズされたテキストレイヤー | 1 | 2 | 4 | 20 |
| ご自身で用意された画像レイヤー（ロゴ、製品など） | No | No | Yes | Yes |
| 単色の背景 | No | No | Yes | Yes |
| 背景が透明 | No | No | No | Yes |
Iterableに自分だけのパーソナライズされた画像を追加する方法
ステップ1：画像をデザインする
Sendtricで、以下の手順に進んでください。 画像のパーソナライズ そして、クリックしてください 新規作成. メディアライブラリから背景を選択するか、単色または透明のキャンバスを選択し、次に 動的テキスト 各値ごとにレイヤーを作成してください。テキストは改行されますが、文字数が縮小されることはありませんので、テキストボックスのサイズは、想定される最も長い値に合わせて設定してください。
手順 2：各レイヤーの「Iterable」フィールドに入力します
各ダイナミックテキストレイヤーについて、変数名には小文字を付けてください 変数名 そして、Iterable Handlebars式を ESPマージタグ、例えば {{firstName}}. フィールドはプロジェクトごとに異なりますので、ユーザープロフィールに表示されている通りの正確な名前を使用してください。ネストされたフィールドの場合はドット表記を含めてください。例えば、 {{address.city}} お住まいの都市が「address」オブジェクトに含まれている場合は、以下を追加してください。 フォールバックテキスト 値が設定されていないユーザーの場合。
手順 3：コードを保存してコピーします
保存 画像です。初回保存後にコードボックスが表示され、各変数が画像のURLに追加され、Iterable式が入力されます。配置を選択して、クリックしてください コードをコピーする.
ステップ4：HTMLブロックに貼り付けます
Iterableテンプレートを開き、[ ] をクリックしてください。 デザインを編集する. ドラッグ＆ドロップエディタで、 HTML ～からのブロック 目次 タブキーで適切な位置に移動し、その箇所を選択して、HTMLエディタにコードを貼り付けてください。WYSIWYGエディタまたはサイド・バイ・サイドエディタでは、ソースにコードを貼り付けてください。
ステップ5：実際のユーザーによるプレビュー
クリック プレビュー、ユーザーのメールアドレス（またはユーザーID）を入力し、をクリックしてください ユーザーデータを読み込む 値が表示された画像を確認してください。ユーザー名が長いユーザーと、そのフィールドが空のユーザーで試してみてください。その後、校正用データを送ってください。 自分自身へ、これにより、ご自身のプロフィールから各項目が自動的に入力されます。
HTMLの代わりに「画像」ブロックを使用する
Imageブロックを残しておきたい場合は、 src Sendtricのコードから、 画像 ブロック、オンにする 躍動感あふれる画像 そのアドレスを 動的URL. デザイン中にブロックが空っぽに見える場合は、チェックインしてください プレビュー ユーザーのデータが読み込まれた状態で。
Iterable または Sendtric におけるフォールバック
Sendtricの「フォールバックテキスト」機能で空の値を処理することもできますし、タグ内でIterableのヘルパー関数を使用することもできます。例えば、 {{defaultIfEmpty firstName 'there'}}. デフォルト値には一重引用符を使用してください。これは、式が画像の二重引用符で囲まれたアドレスの中に含まれているためです。Iterableがデフォルト値を指定している場合、Sendtricのフォールバックは表示されません。
Iterableのパーソナライズされた画像に関するよくある質問
プロファイルフィールドだけでなく、イベントデータも使用できますか？
はい。Iterableがメールをレンダリングする際に解決できるHandlebarsの値であれば、どのようなものでもレイヤーに含めることができます。これには、ジャーニーやキャンペーンをトリガーしたイベントのフィールドも含まれます。Iterableのドキュメントには、プロファイルフィールドと同じ名前のイベントフィールドが優先されると記載されており、 {{profile.fieldName}} プロファイルの値を明示的に読み取ります。
値にスペースや特殊文字が含まれている場合はどうなりますか？
あるフィールドにスペースや、次のような文字が含まれる場合、 & または #, Iterableの urlEncode たとえば、ブロックヘルパーなど {{#urlEncode}}{{city}}{{/urlEncode}}、そうすれば画像のアドレスはそのまま維持されます。その後、「プレビュー」で結果を確認してください。
その欄が空欄の場合、ユーザーには何が表示されるのでしょうか？
「フォールバックテキスト」が設定されている場合、ユーザーにはフォールバックテキストのみが表示されますので、完全なフレーズとして記述してください。設定されていない場合、変数の周囲の単語を含め、レイヤー全体が非表示になります。
送信後に画像を更新することはできますか？
はい。Sendtricで保存すると、次回起動時から送信されるすべてのメールの画像が変更されます。レンダリングされたバージョンは、値の組み合わせごとに約1時間キャッシュされますが、保存を行うとキャッシュがクリアされます。
プレビューは閲覧数にカウントされますか？
Sendtricエディタでのプレビューでは表示されません。画像を実際に読み込むたびに表示されます。これには、Iterableプルーフを開いた場合や、繰り返し開いた場合も含まれます。
このガイドでは、Sendtricの機能のうち1つについて解説しています。 メールのパーソナライゼーション プラットフォーム。すべての パーソナライズされた画像 オプションや例については、メインページをご覧ください。
その他のIterableガイド
- カウントダウンタイマー - Iterableにカウントダウンタイマーを追加する方法
- カウントダウンタイマー - Iterable に動的タイマーを追加する
- リアルタイム投票 - Iterableにライブ投票を追加する方法
- ルールに基づく画像 - Iterableにルールに基づく画像を追加する方法
- ダイナミック・ウェザー - Iterableにダイナミック・ウェザー情報を追加する方法
- 重大なアラート - Iterableに重大なアラートを追加する方法
- ソーシャルプルーフカウンター - Iterableにソーシャルプルーフカウンターを追加する方法
別のプラットフォームをご利用ですか？ こちらをご覧ください Sendtricのすべての連携機能.
