Personalizar um modelo

Adapte seus modelos de HTML para o Adobe GenStudio for Performance Marketing usando a linguagem de modelo Handlebars. A sintaxe Handlebars usa texto regular com chaves duplas como espaços reservados para conteúdo. Consulte What is Handlebars? no Guia de linguagem do Handlebars para saber como preparar seu modelo.

As próximas seções explicam como adicionar espaços reservados para o conteúdo, ocultar elementos desnecessários da visualização e gerenciar links para conteúdo estático. Quando o modelo estiver pronto, você poderá carregá-lo no GenStudio for Performance Marketing e começar a gerar emails personalizados com base no modelo personalizado.

Espaços reservados de conteúdo

A GenStudio for Performance Marketing reconhece determinados elementos em um modelo, mas somente se você identificá-los com um nome de campo reconhecido.

Dentro do cabeçalho ou do corpo de um modelo, você pode usar a sintaxe Handlebars como um espaço reservado de conteúdo, em que você requer que o GenStudio for Performance Marketing preencha o modelo com conteúdo real. A GenStudio for Performance Marketing reconhece e interpreta os espaços reservados de conteúdo com base no nome do campo reconhecido.

Por exemplo, você pode usar {{ headline }} com a sintaxe Handlebars para indicar onde o título do email deve ser colocado:

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

Nomes de campo reconhecidos

A tabela a seguir lista os nomes de campo reconhecidos pelo GenStudio for Performance Marketing para preenchimento em modelos. Adicione esses nomes de campos usando a sintaxe Handlebars ao modelo em que você precisa do GenStudio for Performance Marketing para gerar conteúdo.

O GenStudio for Performance Marketing preenche determinados campos automaticamente nos seguintes modelos:

Há um limite de 20 campos ao fazer upload de um modelo para o GenStudio for Performance Marketing. Como o campo subject é gerado automaticamente em um email, ele conta como um campo. Isso significa que há 19 campos permitidos em um template de email.

Nome do campo de logotipo da marca

No momento, não é possível selecionar o logotipo da marca para o upload do modelo. Os exemplos a seguir demonstram dois métodos que renderizam condicionalmente o logotipo da marca. Cada método verifica a origem, fornece uma imagem padrão ou alternativa caso o logotipo da marca não esteja disponível e aplica um estilo:

Exemplo 1: usando a condição Handlebars Built-in Helpers diretamente no atributo HTML 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;">

Exemplo 2: usando a instrução de condição interna Handlebars para envolver a marca 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}}

Nomes de campo manuais

Todos os outros nomes de campo são tratados como campos preenchidos manualmente.

Para criar uma seção editável, adicione colchetes duplos ao redor do nome da seção:

{{customVariable}}

Seções ou grupos

As seções informam à GenStudio for Performance Marketing que os campos desta seção exigem um alto grau de coerência. O estabelecimento dessa relação ajuda a IA a gerar conteúdo que corresponde aos elementos criativos na seção.

Use um prefixo de sua escolha no nome do campo para indicar que um campo faz parte de uma seção ou grupo. Por exemplo, talvez você queira destacar o conteúdo que aparece em uma área destacada:

Cada seção pode usar apenas um de cada tipo de campo. No exemplo acima, a seção pod1 só pode usar um campo pod1_headline.

Um modelo pode incluir até três seções:

A GenStudio for Performance Marketing entende que pod1_headline está mais intimamente relacionado a pod1_body do que a pod2_body.

Visualização do modelo

Quando você carrega um modelo, o GenStudio for Performance Marketing verifica o arquivo HTML em busca de campos reconhecidos. Use a visualização para revisar seus elementos do modelo e confirmar se você os identificou corretamente com os nomes de campo reconhecidos.

Exemplo de visualização para um modelo de email:

{width="650"}

Visualização do controle

Você pode controlar a visibilidade de conteúdo especial usando Auxiliares Internos (expressões especiais na linguagem de modelo Handlebars que executam determinadas ações). Por exemplo, é possível adicionar uma declaração condicional que adicione parâmetros de rastreamento aos links no modelo exportado, mantendo os links de visualização limpos.

O valor _genStudio.browser é definido ao renderizar um modelo, e o valor genStudio.export é definido ao exportar um modelo. Você pode decidir incluir determinado conteúdo na parte superior de um email usando um invólucro condicional, por exemplo, quando o modelo for usado para exportação:

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

Outro exemplo pode ser impedir o uso de códigos de rastreamento ao visualizar um modelo no GenStudio for Performance Marketing. O exemplo a seguir mostra como adicionar parâmetros de rastreamento a links no modelo exportado, mantendo os links de visualização limpos:

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

Conteúdo estático

Os modelos de email e meta geralmente vinculam a imagens e arquivos CSS hospedados fora do GenStudio for Performance Marketing. Quando o GenStudio for Performance Marketing gera miniaturas para esses modelos ou as experiências derivadas deles, ele pode ignorar esses recursos externos se eles não tiverem os cabeçalhos corretos do CORS (Cross-Origin Resource Sharing, Compartilhamento de recursos entre origens).

Para garantir que esses recursos estejam disponíveis durante o processo de geração de miniaturas, considere duas opções:

Exemplos de modelo

<!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>

<!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>

<!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>