Personalizzare un modello

Adattare i modelli HTML per Adobe GenStudio for Performance Marketing utilizzando il linguaggio di modelli Handlebars. La sintassi Handlebars utilizza testo normale con doppie parentesi graffe come segnaposto di contenuto. Per informazioni su come preparare il modello, consulta What is Handlebars? nella Guida del linguaggio Handlebars.

Nelle sezioni successive viene illustrato come aggiungere segnaposto di contenuto, nascondere elementi non necessari dall’anteprima e gestire i collegamenti al contenuto statico. Quando il modello è pronto, puoi caricarlo in GenStudio for Performance Marketing e iniziare a generare e-mail personalizzate in base al modello personalizzato.

Segnaposto di contenuto

GenStudio for Performance Marketing riconosce alcuni elementi all'interno di un modello, ma solo se li identifichi con un nome di campo riconosciuto.

All'interno dell'intestazione o del corpo di un modello, è possibile utilizzare la sintassi Handlebars come segnaposto di contenuto in cui è necessario che GenStudio for Performance Marketing compili il modello con il contenuto effettivo. GenStudio for Performance Marketing riconosce e interpreta i segnaposto di contenuto in base al nome campo riconosciuto.

Ad esempio, è possibile utilizzare {{ headline }} con la sintassi Handlebars per indicare dove deve essere posizionato il titolo dell'e-mail:

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

Nomi di campi riconosciuti

Nella tabella seguente sono elencati i nomi dei campi riconosciuti da GenStudio for Performance Marketing per il popolamento in modelli. Aggiungere questi nomi di campo utilizzando la sintassi Handlebars al modello in cui è necessario GenStudio for Performance Marketing per generare il contenuto.

GenStudio for Performance Marketing compila automaticamente alcuni campi nei seguenti modelli:

Il caricamento di un modello in GenStudio for Performance Marketing prevede un limite di 20 campi. Poiché il campo subject viene generato automaticamente in un messaggio e-mail, viene conteggiato come un campo. Ciò significa che sono consentiti 19 campi in un modello e-mail.

Nome campo logo marchio

Al momento, non è possibile selezionare il logo del brand per il caricamento del modello. Gli esempi seguenti illustrano due metodi che eseguono il rendering del logo del brand in modo condizionale. Ogni metodo verifica l’origine, fornisce un’immagine predefinita o alternativa nel caso in cui il logo del brand non sia disponibile e applica uno stile:

Esempio 1: utilizzo della condizione Helper incorporati Handlebars direttamente nell'attributo 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;">

Esempio 2: utilizzo dell'istruzione di condizione incorporata Handlebars per racchiudere il tag 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}}

Nomi di campi manuali

Tutti gli altri nomi di campo vengono trattati come campi popolati manualmente.

Per creare una sezione modificabile, aggiungere parentesi doppie attorno al nome della sezione:

{{customVariable}}

Sezioni o gruppi

Sezioni informano GenStudio for Performance Marketing che i campi in questa sezione richiedono un elevato grado di coerenza. Stabilire questa relazione aiuta l’intelligenza artificiale a generare contenuti che corrispondono agli elementi creativi della sezione.

Utilizzare un prefisso scelto nel nome del campo per indicare che un campo fa parte di una sezione o di un gruppo. Ad esempio, potrebbe essere utile evidenziare il contenuto visualizzato in un'area evidenziata:

Ogni sezione può utilizzare solo uno di ogni tipo di campo. Nell'esempio precedente, la sezione pod1 può utilizzare un solo campo pod1_headline.

Un modello può includere fino a tre sezioni:

GenStudio for Performance Marketing è consapevole che pod1_headline è più strettamente correlato a pod1_body che a pod2_body.

Anteprima modello

Quando carichi un modello, GenStudio for Performance Marketing analizza il file HTML per individuare i campi riconosciuti. Utilizza l'anteprima per rivedere i tuoi elementi modello e confermare di averli identificati correttamente con i nomi di campo riconosciuti.

Esempio di anteprima per un modello e-mail:

{width="650"}

Anteprima controllo

È possibile controllare la visibilità dei contenuti speciali utilizzando Helper incorporati (espressioni speciali nel linguaggio del modello Handlebars che eseguono determinate azioni). Ad esempio, puoi aggiungere un’istruzione condizionale che aggiunge parametri di tracciamento ai collegamenti nel modello esportato mantenendo puliti i collegamenti di anteprima.

Il valore _genStudio.browser viene impostato durante il rendering di un modello e il valore genStudio.export viene impostato durante l'esportazione di un modello. Puoi decidere di includere un determinato contenuto nella parte superiore di un’e-mail utilizzando un wrapper condizionale, ad esempio, quando il modello viene utilizzato per l’esportazione:

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

Un altro esempio può essere quello di impedire l’utilizzo dei codici di tracciamento durante l’anteprima di un modello in GenStudio for Performance Marketing. L’esempio seguente mostra come aggiungere parametri di tracciamento ai collegamenti nel modello esportato, mantenendo allo stesso tempo puliti i collegamenti di anteprima:

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

Contenuto statico

I modelli e-mail e metadati spesso si collegano a immagini e file CSS ospitati al di fuori di GenStudio for Performance Marketing. Quando GenStudio for Performance Marketing genera le miniature per questi modelli o le esperienze da essi derivate, queste risorse esterne possono essere ignorate se non dispongono delle intestazioni CORS (Cross-Origin Resource Sharing) corrette.

Per garantire che queste risorse siano disponibili durante il processo di generazione delle miniature, considera due opzioni:

Esempi di modelli

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