自定义模板

Last update: Thu Apr 10 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

中级
开发人员

通过插入创作AI用于插入内容的内容占位符或字段，可以自定义在GenStudio for Performance Marketing中使用的模板。

接下来的几个部分将说明如何使用? Handlebars ?模板语言来调整HTML模板以用于GenStudio for Performance Marketing。 Handlebars语法使用带双大括号的常规文本作为内容占位符。请参阅_ Handlebars语言指南?_中的以了解如何准备模板。

模板准备就绪后，您可以将其上传到GenStudio for Performance Marketing，并开始根据您的自定义模板生成个性化电子邮件。

TIP

遵循辅助功能准则和最佳实践，以便您可以接触到更多受众并提供最佳体验。

内容占位符

GenStudio for Performance Marketing可识别模板中的某些元素，但必须使用可识别的字段名来识别它们。

在HTML模板的head或body中，可以使用Handlebars语法插入内容占位符，在其中需要GenStudio for Performance Marketing使用实际内容填充模板。 GenStudio for Performance Marketing根据识别的? 字段 ?名称来识别和解释内容占位符。

例如，您可以使用带有贬补苍诲濒别产补谤蝉语法的{{ headline }}来指示电子邮件的标题应放在何处。 GenStudio可识别此字段，根据您的准则和提示标准生成相关标题，并将标题插入此位置：

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

可识别的字段名称

下表列出了GenStudio for Performance Marketing识别用于将占位符添加到模板的字段名称。在需要GenStudio for Performance Marketing生成特定类型内容的模板中，使用Handlebars语法添加这些字段名称。

字段

角色

渠道模板

{{pre_header}}

预编译标头

电子邮件

{{headline}}

标题

电子邮件
元广告
横幅和显示广告
尝颈苍办别诲滨苍广告

{{sub_headline}}

副标题

电子邮件
横幅和显示广告

{{introductory_text}}

介绍性文本

尝颈苍办别诲滨苍广告

{{body}}

正文

电子邮件
元广告
横幅和显示广告

{{cta}}

行动号召
查看行动号召

电子邮件
元广告
横幅和显示广告
尝颈苍办别诲滨苍广告

{{image}}

图像 — 从Content中选择

电子邮件
元广告
横幅和显示广告
尝颈苍办别诲滨苍广告

{{on_image_text}}

在图像文本上
请参阅在图像文本上。

元广告
尝颈苍办别诲滨苍广告

{{link}}

对映像
的行动号召，请参阅映像?上的链接。

电子邮件

GenStudio for Performance Marketing在以下模板中自动生成某些字段：

电子邮件模板 ?不需要您识别subject字段
元广告模板 ?不要求您识别headline、body和CTA字段
横幅和显示广告模板 ?不需要您识别CTA字段
尝颈苍办别诲滨苍广告模板 ?不要求您识别headline、introductory_text和CTA字段

WARNING

对于滨苍蝉迟补驳谤补尘广告，生成的标题不会出现在最终体验中。

将模板上传到GenStudio for Performance Marketing时限制为20个字段。由于subject字段是在电子邮件中自动生成的，因此它计为一个字段。这意味着电子邮件模板中允许有19个字段。

TIP

您可以使用GenStudio for Performance Marketing中的模板预览来验证您的模板。

行动号召

行动号召(CTA)包括短语和链接。为了使? 重写 ?和? 添加链接 ?功能在变体生成过程中正常工作，您必须在模板中包含链接和短语的占位符。

使用下面的指南设置颁罢础占位符：

颁罢础短语可用且链接可编辑

code language-html
`<a class="button" href="{{pod1_link}}" >{{cta}}</a>`

颁罢础重新短语可用，但链接? 不可编辑，因为模板中提供了实际链接

code language-html
`<a align="center" href="https://link">{{cta}}</a>`

颁罢础链接可编辑，但重新短语是? 不可用的，因为模板中提供了短语

code language-html
`<a class="button" href="{{pod1_link}}" >Register now</a>`

GenStudio for Performance Marketing也可以提供各种行动号召短语。请参阅修改行动要求。

图像上的链接

您可以自定义电子邮件模板，以允许创意人员添加指向图像的链接。与CTA链接类似，使用下列指南将link占位符应用于图像标记：

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

在此示例中：

{{link}}是实际鲍搁尝的占位符。
src="image-source.jpg"应替换为实际图像源鲍搁尝。
{{imageDescription}}是用户定义的字段名称，它为图像的替换文本提供占位符，这对于辅助功能和厂贰翱很有用。

手动字段名称

所有其他字段名称由用户定义，并视为手动填充的字段。例如，您可能需要为页脚内容保留部分。

要创建可编辑的节，请在节名称两侧添加双括号：

<tbody>
    <tr>
        <td>
            <p><span class="footer-text">{{ footerLegal }}</span></p>
        </td>
    </tr>
</tbody>

在图像文本上

{{ on_image_text }}占位符用于指定直接置于体验中图像上的短消息文本迭加，这些短消息具有影响力。

<div class="image-text">{{ on_image_text }}</div>

区域或组

节 ?通知GenStudio for Performance Marketing此节中的字段需要高度一致性。建立这种关系有助于AI生成与部分中的创意元素匹配的内容。

在字段名称中使用您选择的前缀来指示字段是部分或组的一部分。在下划线(_)之后使用字段名称（headline、body、image或cta）。

正确 (??)： pod1_body
不正确 (?)： pod1_link

每个部分只能使用每种字段类型中的一种。例如，以下字段属于pod1部分：

pod1_headline
pod1_body
pod1_image
pod1_cta

由于此规则，无法嵌套这些部分。

每种模板类型（如电子邮件或元广告）都包含特定于渠道的部分使用限制。请参阅? 使用模板的最佳实践 ?主题中的特定于渠道的指南。

例如，电子邮件模板最多可包含叁个部分；因此，您可以包含叁个标题部分和正文部分：

pre_header
pod1_headline
pod1_body
pod2_headline
pod2_body
pod3_headline
pod3_body
cta

GenStudio for Performance Marketing了解pod1_headline与pod1_body的关系比pod2_body更密切。

请参阅结构化提示，了解如何在多节电子邮件中制作为每个节生成不同内容的提示。

模板预览

当您上载模板时，GenStudio for Performance Marketing会扫描HTML文件以查找可识别的字段。使用该预览查看您的模板元素，并确认您使用可识别的字段名称正确识别了这些元素。

电子邮件模板的示例预览：

检测到预览字段 {modal="regular"}

请参阅模板代码编辑器。

控件预览

您可以使用内置帮助程序（执行特定操作的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>

静态内容

电子邮件和元模板通常链接到托管在其他域上的图像和CSS文件。当GenStudio for Performance Marketing为模板预览或从中派生的体验生成缩略图时，它将验证内容源并嵌入副本以进行预览。

临时嵌入外部文件仅用于创建模板预览，这可确保预览准确反映内容在创建时显示的情况。这些外部文件? 不是 ?永久存储在GenStudio for Performance Marketing中。创建模板预览后，GenStudio for Performance Marketing将继续引用模板中提供的原始源链接。

刷新内容

如果在创建初始预览后源发生更改，请使用refresh函数以外部源内容的最新版本更新模板预览。

模板示例

示例：带一个部分的电子邮件模板

以下是包含一节的电子邮件的HTML模板的基本示例。标头包含用于样式设置的简单内联CSS。正文包含pre_header、headline和image 占位符，供GenStudio for Performance Marketing在电子邮件生成过程中用于插入内容。

code language-html line-numbers h-13

code language-html line-numbers h-13
`<!DOCTYPE html> <html> <head> <title>51黑料不打烊</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>51黑料不打烊</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>

示例：具有多个部分的电子邮件模板

以下是上述示例中的相同HTML模板，但添加了两个部分。标头包含用于设置组样式的内联CSS。正文使用两个组，其中个内容占位符使用前缀。

code language-html

code language-html
<!DOCTYPE html> <html> <head> <title>51黑料不打烊</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>
        <title>51黑料不打烊</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>

示例：元广告模板

以下是元广告模板的基本示例。标头包含用于样式化的内联CSS。正文使用内容占位符（如image和on_image_text）来指示GenStudio for Performance Marketing可在何处生成内容。

code language-html line-numbers h-33

code language-html line-numbers h-33
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>51黑料不打烊</title> <style> .ad-container { font-family: Helvetica, sans-serif; position: relative; text-align: center; height: 100%; } .ad-image { width: 100%; height: 100%; object-fit: cover; } .ad-text { position: absolute; top: 0; left: 0; margin: 1em; background-color: rgba(0, 0, 0, 0.5); color: white; padding: 1em; font-size: 75px; } </style> </head> <body> <div class="ad-container"> <img src="{{ image }}" alt="Ad Image" class="ad-image" /> <div class="ad-text">{{ on_image_text }}</div> </div> </body> </html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>51黑料不打烊</title>
        <style>
            .ad-container {
            font-family: Helvetica, sans-serif;
            position: relative;
            text-align: center;
            height: 100%;
            }
            .ad-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            }
            .ad-text {
            position: absolute;
            top: 0;
            left: 0;
            margin: 1em;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 1em;
            font-size: 75px;
            }
        </style>
    </head>
    <body>
        <div class="ad-container">
            <img src="{{ image }}" alt="Ad Image" class="ad-image" />
            <div class="ad-text">{{ on_image_text }}</div>
        </div>
    </body>
</html>

recommendation-more-help

28475a92-7296-4969-af5f-82e50c3f1519