テンプレートのカスタマイズ

生成 AI がコンテンツの挿入に使用するコンテンツプレースホルダー（フィールド）を挿入することで、GenStudio for Performance Marketingで使用するテンプレートをカスタマイズできます。

以降の節では、Handlebars ​テンプレート言語を使用してHTML テンプレートをGenStudio for Performance Marketingに適応させる方法について説明します。 Handlebars の構文では、コンテンツのプレースホルダーとして中括弧を使用した通常のテキストを使用します。 テンプレートの準備方法については、_ Handlebars 言語ガイド _の 概要 Handlebars を参照してください。

テンプレートの準備が整ったら、GenStudio for Performance Marketingにアップロード、カスタムテンプレートに基づいてパーソナライズされたメールの生成を開始できます。

コンテンツプレースホルダー

GenStudio for Performance Marketingはテンプレート内の特定の 要素を認識しますが、それは 認識されたフィールド名で識別した場合に限られます。

HTML テンプレートの先頭または本文内では、Handlebars の構文を使用して、GenStudio for Performance Marketingに実際のコンテンツをテンプレートに入力させる必要があるコンテンツプレースホルダーを挿入できます。 GenStudio for Performance Marketingは、 認識された field name に基づいてコンテンツプレースホルダーを認識および解釈します。

例えば、Handlebars 構文で {{ headline }} を使用して、メールのヘッドラインを配置する場所を示すことができます。 GenStudioはこのフィールドを認識し、ガイドラインとプロンプトの条件に基づいて関連するヘッドラインを生成して、この場所にヘッドラインを挿入します。

<div>{{ headline }}</div>

認識されたフィールド名

次の表に、テンプレートにプレースホルダーを追加するためにGenStudio for Performance Marketingで認識されるフィールド名を示します。 GenStudio for Performance Marketingで特定のタイプのコンテンツを生成する必要があるテンプレートに、Handlebars 構文を使用してこれらのフィールド名を追加します。

GenStudio for Performance Marketingでは、特定のフィールドに次のテンプレートで自動的に入力されます。

テンプレートをGenStudio for Performance Marketingにアップロードできるフィールドは 20 個までです。 メールでは subject フィールドが自動的に生成されるので、1 つのフィールドとしてカウントされます。 つまり、メールテンプレートでは 19 個のフィールドを使用できます。

コールトゥアクション

コールトゥアクション（CTA）には、フレーズとリンクが含まれます。 バリアントの生成プロセスでCTA フレーズの変更 および リンクの追加 機能が正しく機能するには、テンプレートにリンクとフレーズのプレースホルダーを含める必要があります。

次のガイダンスを使用して、CTAのプレースホルダーを設定します。

GenStudio for Performance Marketingでは、様々なコールトゥアクションフレーズを提供することもできます。 コールトゥアクションの修正を参照してください。

画像上のリンク

メールテンプレートをカスタマイズして、クリエイティブが画像にリンクを追加できるようにすることができます。 CTA リンクと同様に、次のガイダンスを使用して画像タグに link プレースホルダーを適用します。

<a href="{{link}}"><img src="image-source.jpg" alt="description"></a>

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

ブランドロゴフィールド名

現時点では、テンプレートのアップロードに使用するブランドロゴを選択することはできません。 次の例は、ブランドロゴを条件に応じてレンダリングする 2 つの方法を示しています。 各方法では、ソースを検証し、ブランドロゴが使用できない場合に備えてデフォルトまたは代替の画像を提供し、スタイルを適用します。

例 1：組み込みヘルパー条件 HandlebarsHTML img src 属性に直接使用する

<img src="{{#if brand_logo}}{{brand_logo}}{{else}}<default-image>{{/if}}" alt="img alt text" style="max-width: 88px; margin: 10px auto; display: block;">

例 2：組み込み条件ステートメント Handlebars 使用してHTML img タグをラッピングする：

{{#if brand_logo}}
    <img src="{{brand_logo}}" alt="img alt text" style="width: 120px; height: 45px; margin: 10px auto; display: block;">
    {{else}}
    <img src="data:image/png;base64,iVBORw0KGgo..." alt="img alt text" style="width: 120px; height: 45px; margin: 10px auto; display: block;">
{{/if}}

手動フィールド名

その他のすべてのフィールド名は、手動で入力されたフィールドとして扱われます。 例えば、フッターコンテンツ用のセクションを予約することができます。

編集可能なセクションを作成するには、セクション名の周りに二重括弧を追加します。

<tbody>
    <tr>
        <td>
            <p><span class="s1">{{ footerLegal }}</span></p>
        </td>
    </tr>
</tbody>

セクションまたはグループ

セクション このセクションのフィールドには高い一貫性が必要であることをGenStudio for Performance Marketingに伝えます。 この関係を確立すると、AI がセクションのクリエイティブ要素に一致するコンテンツを生成するのに役立ちます。

フィールド名に任意の接頭辞を使用して、フィールドがセクションまたはグループの一部であることを示します。 アンダースコア（_）の後にフィールド名（headline、body、image、cta）を使用します。 例えば、次のヘッドラインと本文は、pod1 セクションに属しています。

各セクションは、各フィールドタイプの 1 つのみを使用できます。 上記の例では、pod1 セクションは 1 つの pod1_headline フィールドのみを使用できます。 このルールのため、セクションをネストすることはできません。

メールやメタ広告などの各テンプレートタイプには、セクションの使用に関するチャネル固有の制約があります。 テンプレート使用のベストプラクティストピックの チャネル固有のガイドライン を参照してください。

例えば、1 つのメールテンプレートに最大 3 つのセクションを含めることができます。したがって、次の 3 つのヘッドラインと本文セクションを含めることができます。

GenStudio for Performance Marketingは pod1_headline が pod2_body よりも pod1_body と密接に関係していることを理解しています。

複数セクションのメールの各セクションに対して様々なコンテンツを生成するプロンプトを作成する方法については、 構造化プロンプトを参照してください。

テンプレートのプレビュー

テンプレートをアップロードすると、GenStudio for Performance MarketingはHTML ファイルをスキャンして、認識されたフィールドを探します。 プレビューを使用して テンプレート要素を確認し、それらが 認識されたフィールド名で正しく識別されたことを確認します。

メールテンプレートのプレビューの例：

{modal="regular"}

テンプレートコードエディターを参照してください。

プレビューを制御

組み込みヘルパー（特定のアクションを実行する Handlebars テンプレート言語の特別な式）を使用して、特別なコンテンツの表示を制御できます。 例えば、プレビューリンクをクリーンに保ちながら、書き出されたテンプレート内のリンクにトラッキングパラメーターを追加する条件ステートメントを追加できます。

テンプレートのレンダリング時には _genStudio.browser の値が設定され、テンプレートの書き出し時には genStudio.export の値が設定されます。 条件付きラッパーを使用して、メールの上部に特定のコンテンツを含めることもできます。例えば、テンプレートを書き出しに使用する場合です。

{{#if _genStudio.export}}
<%@ include view='emailParent' %>
{{/if}}

もう 1 つの例として、GenStudio for Performance Marketingでテンプレートをプレビューする際に、トラッキングコードを使用しないようにすることがあります。 次の例では、プレビューリンクをクリーンな状態に保ちながら、書き出されたテンプレート内のリンクにトラッキングパラメーターを追加する方法を示します。

<a class="button" {{#if _genStudio.browser }}
   href="{{ link }}"{{/if}}{{#if _genStudio.export }}
   href="{{ link }}?trackingid=<%=getTrackingId()%>&mv=email"{{/if}}
   target="_blank">{{ cta }}</a>

静的コンテンツ

多くの場合、メールおよびメタテンプレートは、他のドメインでホストされている画像や CSS ファイルにリンクしています。 GenStudio for Performance Marketingは、テンプレートプレビューまたはそれらから派生したエクスペリエンスのサムネールを生成する際に、コンテンツソースを検証し、プレビュー目的でコピーを埋め込みます。

外部ファイルは、テンプレートプレビューを作成する目的でのみ一時的に埋め込まれます。これにより、プレビューで作成時に表示されるコンテンツが正確に反映されます。 これらの外部ファイルは、GenStudio for Performance Marketingに永続的に保存 されません。 テンプレートのプレビューが作成された後、GenStudio for Performance Marketingは引き続き、テンプレートで提供された元のソースリンクを参照します。

コンテンツを更新

最初のプレビューの作成後にソースが変更された場合は、refresh 関数を使用して、外部ソースからのコンテンツの最新バージョンでテンプレートプレビューを更新できます。

テンプレートの例

<!DOCTYPE html>
<html>
<head>
    <title>Adobe</title>
    <style>
        .container {
            width: 100%;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>{{ pre_header }}
    <div class="container">
        <h1>{{ headline }}</h1>
        <p><a href="{{ link }}">
           <img alt="{{ headline }}"
                src="{{ image }}"
                width="600" height="600"
                border="0"/></a></p>
        <p>{{ body }}</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Adobe</title>
    <style>
        .container {
            width: 100%;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .pod {
            background-color: #f8f8f8;
            margin: 10px;
            padding: 20px;
            border-radius: 5px;
        }
        .pod h2 {
            color: #333;
        }
        .pod p {
            color: #666;
        }
    </style>
</head>
<body>{{ pre_header }}
    <div class="container">
        <h1>{{ headline }}</h1>
        <p>{{ body }}</p>
        <!-- Pod1 -->
        <div class="pod">
            <h2>{{ pod1_headline }}</h2>
            <p><img alt="{{ headline }}" src="{{ pod1_image }}" width="200" height="200" border="0"></p>
            <p>{{ pod1_body }}</p>
        </div>
        <!-- End of Pod1 -->
        <!-- Pod2 -->
        <div class="pod">
            <h2>{{ pod2_headline }}</h2>
            <p><img alt="{{ headline }}" src="{{ pod2_image }}" width="200" height="200" border="0"></p>
            <p>{{ pod2_body }}</p>
        </div>
        <!-- End of Pod2 -->
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adobe</title>
    <style>
        .ad-container {
            width: 300px;
            border: 1px solid #ddd;
            padding: 16px;
            font-family: Arial, sans-serif;
        }
        .ad-image {
            width: 100%;
            height: auto;
        }
        .ad-headline {
            font-size: 18px;
            font-weight: bold;
            margin: 12px 0;
        }
        .ad-body {
            font-size: 14px;
            margin: 12px 0;
        }
        .ad-cta {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="ad-container">
    <img src="{{ image }}" alt="Ad Image" class="ad-image">
    <div class="ad-headline">{{ headline }}</div>
    <div class="ad-body">{{ body }}</div>
    <a href="{{ link }}" class="ad-cta">{{ CTA }}</a>
</div>
</body>
</html>