文件GenStudio使用手冊

自訂範本

Last update: Thu Oct 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 中繼

使用​ Handlebars ​範本語言，調整您的HTML範本以適應Adobe GenStudio for Performance Marketing。 Handlebars語法使用具有雙大括弧的規則文字做為內容預留位置。 請參閱​ Handlebars語言指南 ​中的What is Handlebars?，瞭解如何準備您的範本。

以下幾節將說明如何新增內容預留位置、在預覽中隱藏不必要的元素以及管理靜態內容的連結。 您的範本準備就緒後，您可以將其上傳到GenStudio for Performance Marketing，並開始根據您的自訂範本產生個人化電子郵件。

內容預留位置

GenStudio for Performance Marketing可辨識範本中的某些元素，但前提是您使用可辨識的欄位名稱來識別它們。

在範本的head或body中，您可以使用Handlebars語法作為內容預留位置，其中您要求GenStudio for Performance Marketing將實際內容填入範本。 GenStudio for Performance Marketing會根據可辨識的​ 欄位 ​名稱來辨識及解譯內容預留位置。

例如，您可以使用{{ headline }}搭配Handlebars語法來指示電子郵件標題的放置位置：

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

可辨識的欄位名稱

下表列出GenStudio for Performance Marketing識別的欄位名稱，以填入範本。 在需要GenStudio for Performance Marketing產生內容的範本中，使用Handlebars語法新增這些欄位名稱。

欄位
角色
頻道範本
pre_header
前置標題
電子郵件
headline
標題
電子郵件
中繼廣告
body
內文
電子郵件
中繼廣告
cta
行動號召
電子郵件
中繼廣告
on_image_text
在影像文字上
中繼廣告
image
影像
電子郵件
中繼廣告
brand_logo
選取品牌的標誌
如需建議使用方式，請參閱品牌標誌欄位名稱。
電子郵件
中繼廣告

GenStudio for Performance Marketing會自動填入下列範本中的特定欄位：

  • 電子郵件範本 ​不需要您識別subject欄位
  • 中繼廣告範本 ​不需要您識別headline、body和CTA欄位
  • 顯示廣告範本 ​不需要您識別CTA欄位
WARNING
針對Instagram廣告，產生的標題不會出現在最終體驗中。

上傳範本到GenStudio for Performance Marketing時有20個欄位的限制。 由於subject欄位會在電子郵件中自動產生，因此會計為一個欄位。 這表示電子郵件範本中允許19個欄位。

TIP
您可以使用GenStudio for Performance Marketing中的範本預覽來驗證範本。

品牌標誌欄位名稱

此時，您無法選取範本上傳的品牌標誌。 下列範例示範兩種有條件地呈現品牌標誌的方法。 每種方法都會驗證來源、提供預設或替代影像（若沒有品牌標誌可用）並套用樣式：

範例1：直接在HTMLimg src屬性中使用Handlebars內建Helpers條件：

<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內建條件陳述式來包裝HTMLimg標籤：

{{#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}}

手動欄位名稱

所有其他欄位名稱會視為手動填入的欄位。

若要建立可編輯的區段，請在區段名稱兩側加上雙括弧：

{{customVariable}}

區段或群組

區段 ​通知GenStudio for Performance Marketing此區段中的欄位需要高度一致性。 建立此關係可協助AI產生符合區段中創意元素的內容。

在欄位名稱中使用您選擇的前置詞來指示欄位是區段或群組的一部分。 例如，您可能想要將焦點放在反白區域中出現的內容：

  • pod1_headline
  • pod1_body

每個區段只能使用每個欄位型別中的一個。 在上述範例中，pod1區段只能使用一個pod1_headline欄位。

範本最多可包含三個區段：

  • headline
  • body
  • pod1_headline
  • pod1_body
  • pod2_headline
  • pod2_body

GenStudio for Performance Marketing瞭解pod1_headline與pod1_body的關聯性比pod2_body更密切。

範本預覽

當您上傳範本時，GenStudio for Performance Marketing會掃描HTML檔案以找出可辨識的欄位。 使用預覽檢閱您的範本元素，並確認您以可辨識的欄位名稱正確識別它們。

電子郵件範本的範例預覽：

偵測到預覽欄位 {width="650"}

控制項預覽

您可以使用內建協助程式（可執行特定動作的Handlebars範本語言中的特殊運算式）來控制特殊內容的可見度。 例如，您可以新增條件陳述式，在匯出的範本中新增追蹤引數至連結，同時保持預覽連結整齊。

呈現範本時會設定_genStudio.browser值，匯出範本時會設定genStudio.export值。 例如，當範本用於匯出時，您可使用條件包裝函式，決定在電子郵件頂端包含特定內容：

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

另一個範例可能是為了防止在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>

靜態內容

電子郵件和中繼範本通常會連結至GenStudio for Performance Marketing外部託管的影像和CSS檔案。 當GenStudio for Performance Marketing為這些範本或衍生自這些範本的體驗產生縮圖時，如果這些外部資源沒有正確的跨原始資源共用(CORS)標題，則可能會忽略這些外部資源。

為了確保這些資源在縮圖產生程式期間可供使用，請考慮兩個選項：

  1. 使用CORS標頭：主機伺服器必須傳送回應，且生產環境的Access-Control-Allow-Origin標頭設為https://experience.adobe.com值。 此方法可讓GenStudio for Performance Marketing存取並包含資源。

  2. 使用資料URL：使用資料URL將外部資源直接內嵌到範本中。 此方法會繞過CORS限制，並確保資源在產生縮圖期間可供使用。

範本範例

範例：電子郵件範本包含一個區段

以下是包含一節之電子郵件的HTML範本基本範例。 標題包含用於樣式的簡單、內嵌CSS。 內文包含pre-header、headline和image 預留位置，供GenStudio for Performance Marketing在電子郵件產生程式期間用來插入內容。

code language-handlebars line-numbers h-13 
<!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><img alt="{{ headline }}"
                src="{{ image }}"
                width="600" height="600"
                border="0"/></p>
        <p>{{ body }}</p>
    </div>
</body>
</html>
範例：具有多個區段的電子郵件範本

以下是上述範例中的相同HTML範本，但包含另外兩個區段。 標題包含用於設定群組樣式的內嵌CSS。 本文使用兩個群組，其中的內容預留位置使用前置詞。

code language-handlebars line-numbers h-33 
<!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><img alt="{{ headline }}"
                src="{{ image }}"
                width="600" height="600"
                border="0"/></p>
        <p>{{ body }}</p>
    <!-- Pod1 -->
        <div class="pod">
            <h2>{{ pod1_header }}</h2>
            <p>{{ pod1_body }}</p>
        </div>
        <!-- End of Pod1 -->
    <!-- Pod2 -->
        <div class="pod">
            <h2>{{ pod2_header }}</h2>
            <p>{{ pod2_body }}</p>
        </div>
        <!-- End of Pod2 -->
    </div>
</body>
</html>
範例：中繼廣告範本

以下是中繼廣告範本的基本範例。 標題包含用於樣式的內嵌CSS。 本文使用前置詞的內容預留位置。

code language-handlebars line-numbers h-33 
<!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="(https://example.com)" class="ad-cta">"{{ CTA }}"</a>
</div>
</body>
</html>
recommendation-more-help
28475a92-7296-4969-af5f-82e50c3f1519