メールにプレビューテキストを挿入する方法

このページで学べること

プレビューテキストとは何か、デフォルトでメールのどこに表示されるか、そしてメール本文に挿入する方法について確認します。

プレビューテキストについて

プレビューテキストは、受信者がメールを受信トレイで受け取った際に最初に目にするものの 1 つです。プレビューテキストは、受信トレイでメールの件名の後に表示され、通常はメール本文内の最初の 1 行目のテキストから取得されます。

プレビューテキストを使ってメールを強化する方法は主に 2 つあります：

1. プレビューテキストを使用して、メールの概要をまとめます。
2. プレビューテキストを使用して、件名を補完します。

プレビューテキストを設定しない場合、受信トレイはメールの冒頭から自動的にプレビューテキストを抽出します。これには代替テキストやナビゲーションバーが含まれる場合があるため、受信者に表示したいテキストを指定することをおすすめします。プレビューテキストを戦略的に活用する方法について詳しくは、Klaviyoブログをご覧ください。

フローのメールにプレビューテキストを追加

ドラッグ＆ドロップフローのメールにプレビューテキストを追加するには：

1. 編集したいメールが含まれているフローを開きます。
2. フローメッセージをクリックして、メールの詳細サイドバーを開きます。
   

3. 件名と送信者で、フィールドがすでに編集可能になっていない場合は編集をクリックしてください。下書きメールの場合は、サイドバーでフィールドを直接編集してください。
4. プレビューテキストフィールドに、希望するプレビューテキストを追加してください。
   

5. [保存] をクリックします。

キャンペーンメールにプレビュー テキストを追加する

ドラッグ&ドロップテンプレートを使用して下書きキャンペーンメールにプレビューテキストを追加するには：

1. 編集したいキャンペーンを開きます。
2. メッセージステップに移動してください。受信者ステップにいる場合は、次へをクリックしてください。
3. プレビューテキストフィールドに、希望するプレビューテキストを追加してください。
   

4. 次へをクリックして変更を保存し、確認を続行してください。

テキストのみのメールにプレビューテキストを追加する

1. エディターでテキストのみのメールを開きます。
2. レビュー画面が表示された場合は、編集ビューを比較してください。テキストのみではメールのスタイルを調整できます。HTMLでは元のスタイルが保持され、カスタムHTML編集に切り替わります。確認後は編集ビューを切り替えられません。これらの手順を続行するには、テキストのみを選択し、保存をクリックして、確認してください。
3. メール本文の上にあるプレビューテキストフィールドにテキストを入力してください。プレビューテキストを表示しないはオンにしないでください。
4. [保存] をクリックします。

プレビューテキストを空欄のままにし、プレビューテキストを表示しないを未選択のままにすると、メールの冒頭がプレビューテキストとして使用されます。

受信トレイでプレビュー テキストを確認する

プレビューテキストフィールドでは、受信トレイのプレビューにメール本文のコンテンツが表示されないようにするため、テキストの後に自動的にスペーサーが追加されます。メールクライアントによってこれらのスペーサーの扱いが異なる場合があるため、テストメールを送信して結果を確認してください。

デバイスやメールクライアントによって表示されるプレビューテキストの量は異なり、画面が小さいほど表示される文字数は少なくなります。プレビューテキストは簡潔にしてください。以下の文字数は保証された上限ではなく例として捉え、オーディエンスが使用している受信トレイでメールをテストしてください。

メール内にプレビュー テキストを表示する

場合によっては、テンプレートの本文内にプレビューテキストを表示したいことがあります。ドラッグ＆ドロップフローまたはキャンペーンメールに設定したプレビューテキストを表示するには、次のタグを使用します：

{% render_variable preview_text %}

テンプレート内の任意のテキストブロックにタグを貼り付けます。

プレビューテキストを非表示

ドラッグ＆ドロップメールの受信トレイプレビュー領域を空白のままにするには、まずプレビューテキストフィールドをクリアし、上記のフローまたはキャンペーンの手順を使用して変更を保存します。次に、以下のコードスニペットをメールの先頭に追加します。この手法をサポートしているメールクライアントでは、非表示のスペーサーによって本文コンテンツがプレビュー領域の外に押し出されます。

1. メールの他のすべてのコンテンツより上、一番上にHTMLブロックを追加してください。
2. 次のコードスニペットを追加します：
   

<div style="display: none; max-height: 0px; overflow: hidden;">͏ &zwnj;
    &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
    ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
    &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
    &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
    ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
    &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
    &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy;
    ͏&zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp;
    &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj;
    &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy; ͏ &zwnj; &nbsp; &shy;
    ͏&zwnj; &nbsp; &shy;
</div>

1. 変更を適用するには、HTMLブロックの外側をクリックしてから、メールの保存が完了するまで待機してください。

受信トレイプレビュー領域が空白であることを確認するために、テストメールを送信してください。結果は、受信者のメールクライアントによって異なります。

テキストのみのメールの場合は、テキストのみエディタを開き、プレビュー用テキストを表示しないを選択して、保存をクリックしてください。これにより、HTMLスニペットを自分で追加しなくても、非表示のスペーサーが追加されます。結果を確認するために、テストメールを送信してください。

その他のリソース