カスタマイズ可能なフラグメント customizable-fragments

フラグメントがメールまたはメールテンプレートで使用される場合、フラグメントは継承のためにデフォルトでロックされます。つまり、フラグメントに対して行われた変更は、使用されるすべてのアセットに自動的に反映されます。 カスタマイズ可能なフラグメントを使用すると、フラグメント内の特定のフィールドを、フラグメントが電子メールまたは電子メールテンプレートに追加されたときに編集可能として定義できます。 例えば、バナー、テキスト、ボタンを含むフラグメントがある場合、画像やボタンのターゲット URLなどの特定のフィールドを編集可能として指定できます。

カスタマイズ可能なフラグメントを使用すれば、まったく新しいコンテンツブロックを作成したり、フラグメントの継承を中断したりすることなく、コンテンツを管理およびパーソナライズできます。 フラグメントレベルで行われた変更は引き続き反映されますが、電子メールまたは電子メールテンプレートレベルでカスタマイズできます。

ビジュアルフラグメントと式フラグメントの両方をカスタマイズ可能としてマークできます。

ビジュアルフラグメントへの編集可能なフィールドの追加 visual

ビジュアルフラグメントの一部を編集可能にするには、次の手順に従います。

フラグメントをメールに追加すると、ユーザーはフラグメントで設定されたすべての編集可能フィールドをカスタマイズできます。

フラグメント内の編集可能なHTML コンポーネント editable-html

HTML コンポーネント内では、次の種類のエレメントを編集可能にすることができます。

パラメーター化された各CSS プロパティ値は、サフィックスなし、追加テキストなし、複数の変数なし、単一のプロパティ内の連結なし、正確に{{{varName}}}である必要があります。

パディングなどのマルチサイドプロパティをパラメーター化するには、次のいずれかの操作を行います。

HTML コンポーネントでの編集可能フィールドの仕組み components

HTML コンポーネントの編集可能なフィールドは、コンポーネントのソースコード内でインライン変数を直接宣言することによって作成されます。 各変数には一意のIDとデフォルト値があります。 次に、編集可能な値がマークアップに表示される場所で変数が参照されます。

フラグメントを保存して公開すると、HTML コンポーネントで宣言されたすべての変数が、フラグメントがメールに追加されたときに編集可能なパラメーターとして自動的に表示されます。

その後、メール作成者は、メールDesignerの任意の変数のデフォルト値を上書きできます（例えば、背景色の変更、CTA URLの入れ替え、見出しの更新など）。元となるHTMLを変更する必要はありません。

構文参照 syntax

編集可能なフィールドは、次の2つのパターンを使用して定義および参照されます。

変数の宣言 declaring

インライン宣言を使用して、一意のIDとデフォルト値を持つ変数を定義します。

{{#inline "variableID"}}default_value{{/inline}}

variableIDを編集可能なフィールドの一意のIDに置き換えます。 IDは、コンポーネント内で一意である必要があり、スペースを含めることはできません。

default_valueを、メール作成者が上書きしない場合に使用する値に置き換えます。

変数の参照 referencing

3つの中括弧を使用して、変数の値がマークアップに表示される場所を参照します。

{{{variableID}}}

同じ変数IDは、HTML内で何度でも参照できます。 すべての参照は、メール作成者が設定した値（上書きが指定されていない場合はデフォルト値）に解決されます。

オプションのパラメーター optional

インライン宣言では、編集可能なフィールドの表示方法や処理方法を変更するオプションのパラメーターをサポートしています。

HTML コンポーネントへの編集可能フィールドの追加 adding-editable-fields

ビジュアルフラグメント内のHTML コンポーネントの一部を編集可能にするには、次の手順に従います。

メールでのフラグメントの使用 using-fragment

フラグメントが公開されると、HTML コンポーネントで宣言されたすべての変数が、電子メールDesignerで編集可能なパラメーターとして表示されます。

メールでフラグメントを使用する際にカスタマイズするには、次の手順を実行します。

フラグメントは、カスタマイズされた値でレンダリングされますが、公開されたフラグメントに対して行われた将来の構造更新は引き続き継承されます。

例：編集可能なテキスト、カラー、URLを含むシンプルなフラグメント example

次の例では、4つの編集可能なフィールドを含む小さなプロモーションバナーを作成します。

フラグメントを公開した後、メール作成者は、フラグメントをメールに追加する際に、これらの値のいずれかを上書きできます。

シンプルな編集可能バナー

<!-- Define editable variables -->
{{#inline "bgColor"}}#0057FF{{/inline}}
{{#inline "headlineText"}}Example Headline{{/inline}}
{{#inline "ctaText"}}Learn More{{/inline}}
{{#inline "ctaUrl" assetType="url"}}https://www.example.com{{/inline}}

<!-- Use the variables in the HTML -->
<table width="100%" cellpadding="0" cellspacing="0"
       style="background-color:{{{bgColor}}}; border-radius:8px;" >
  <tr>
    <td style="padding:30px; text-align:center; font-family:Arial,sans-serif;">
      <h2 style="color:#ffffff; font-size:24px; margin:0;">
        {{{headlineText}}}
      </h2>
      <a href="{{{ctaUrl}}}"
         style="display:inline-block; margin-top:16px; padding:12px 28px;
                background:#ffffff; color:{{{bgColor}}};
                font-weight:bold; border-radius:4px; text-decoration:none;">
        {{{ctaText}}}
      </a>
    </td>
  </tr>
</table>

この例では、次のようになります。

ベストプラクティス best-practices

知っておくべきこと things-to-know