文档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或正文中，可以使用Handlebars语法作为内容占位符，其中要求GenStudio for Performance Marketing使用实际内容填充模板。 GenStudio for Performance Marketing根据识别的​ 字段 ​名称来识别和解释内容占位符。

例如，您可以使用带有Handlebars语法的{{ headline }}来指示电子邮件标题的放置位置：

<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内置帮助程序条件：

<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