Een sjabloon aanpassen

Pas uw malplaatjes van HTML voor Adobe GenStudio for Performance Marketing aan door de het malplaatjetaal te gebruiken 0} Handlebars {. In de syntaxis van Handlebars wordt gewone tekst met dubbele accolades gebruikt als plaatsaanduidingen voor inhoud. Zie What is Handlebars?in de de taalgids van Handlebars leren hoe te om uw malplaatje voor te bereiden.

In de volgende secties wordt uitgelegd hoe u plaatsaanduidingen voor inhoud toevoegt, overbodige elementen uit de voorvertoning verbergt en koppelingen naar statische inhoud beheert. Zodra uw malplaatje klaar is, kunt u het uploaden aan GenStudio for Performance Marketingen beginnen gepersonaliseerde e-mails te produceren die op uw douanemalplaatje worden gebaseerd.

Plaatsaanduidingen voor inhoud

GenStudio for Performance Marketing erkent bepaalde elementenbinnen een malplaatje, maar slechts als u hen met een erkende gebiedsnaam identificeert.

In de kop of de hoofdtekst van een sjabloon kunt u de syntaxis van Handlebars gebruiken als plaatsaanduiding voor inhoud, waarbij u GenStudio for Performance Marketing nodig hebt om de sjabloon te vullen met werkelijke inhoud. GenStudio for Performance Marketing erkent en interpreteert de inhoudsplaceholders die op worden gebaseerd erkende gebied naam.

U kunt {{ headline }} bijvoorbeeld met de syntaxis van Handlebars gebruiken om aan te geven waar de kop van de e-mail moet worden geplaatst:

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

Erkende veldnamen

De volgende tabel bevat een lijst met de veldnamen die door GenStudio for Performance Marketing worden herkend voor populatie in sjablonen. Voeg deze veldnamen met de syntaxis Handlebars toe aan uw sjabloon waar u GenStudio for Performance Marketing nodig hebt om inhoud te genereren.

GenStudio for Performance Marketing vult bepaalde velden automatisch in de volgende sjablonen in:

Er geldt een limiet van 20 velden wanneer u een sjabloon uploadt naar GenStudio for Performance Marketing. Aangezien het veld subject automatisch wordt gegenereerd in een e-mail, telt het als één veld. Dit betekent dat er 19 velden zijn toegestaan in een e-mailsjabloon.

Naam merklogo

Op dit moment kunt u het merklogo voor het uploaden van de sjabloon niet selecteren. In de volgende voorbeelden worden twee methoden getoond die het merklogo voorwaardelijk weergeven. Elke methode verifieert de bron, biedt een standaard- of alternatieve afbeelding voor het geval het merklogo niet beschikbaar is en past een stijl toe:

Voorbeeld 1: Het gebruiken van Handlebars Ingebouwde voorwaarde van Helpers direct in het HTML img src attribuut:

<img src="{{#if brand_logo}}{{brand_logo}}{{else}}<default-image>{{/if}}" alt="img alt text" style="max-width: 88px; margin: 10px auto; display: block;">

Voorbeeld 2: Het gebruiken van Handlebars Ingebouwde voorwaardelverklaring om de HTML img markering te verpakken:

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

Handmatige veldnamen

Alle andere veldnamen worden behandeld als handmatig gevulde velden.

Als u een bewerkbare sectie wilt maken, voegt u dubbele haakjes toe rond de sectienaam:

{{customVariable}}

Secties of groepen

Secties informeren GenStudio for Performance Marketing dat de gebieden in deze sectie een hoge graad van coherentie vereisen. Als u deze relatie instelt, kan de AI inhoud genereren die overeenkomt met de creatieve elementen in de sectie.

Gebruik een voorvoegsel van uw keuze in de veldnaam om aan te geven dat een veld deel uitmaakt van een sectie of groep. U kunt bijvoorbeeld de inhoud van een gemarkeerd gebied als spotlight instellen:

Elke sectie kan slechts één van elk gebiedstype gebruiken. In het bovenstaande voorbeeld kan de sectie pod1 slechts één pod1_headline -veld gebruiken.

Een sjabloon kan maximaal drie secties bevatten:

GenStudio for Performance Marketing begrijpt dat pod1_headline nauwer verwant is aan pod1_body dan aan pod2_body .

Sjabloonvoorbeeld

Wanneer u een malplaatjeuploadt, scant GenStudio for Performance Marketing het dossier van de HTML voor erkende gebieden. Gebruik de voorproef om uw malplaatjeelementente herzien en te bevestigen dat u hen behoorlijk met erkende gebiedsnamenidentificeerde.

Voorbeeld van een e-mailsjabloon:

{width="650"}

Voorvertoning besturen

U kunt de zichtbaarheid van speciale inhoud bepalen met behulp van ingebouwde hulpmiddelen (speciale expressies in de sjabloontaal Handlebars die bepaalde handelingen uitvoeren). U kunt bijvoorbeeld een voorwaardelijke instructie toevoegen waarmee trackingparameters worden toegevoegd aan koppelingen in de geëxporteerde sjabloon terwijl de voorbeeldkoppelingen schoon blijven.

De waarde _genStudio.browser wordt ingesteld bij het renderen van een sjabloon en de waarde genStudio.export wordt ingesteld bij het exporteren van een sjabloon. U kunt besluiten om bepaalde inhoud bij de bovenkant van een e-mail te omvatten gebruikend een voorwaardelijke omslag, bijvoorbeeld wanneer het malplaatje voor de uitvoer wordt gebruikt:

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

Een ander voorbeeld kan zijn om het gebruik van volgcodes te verhinderen wanneer het previewing van een malplaatje in GenStudio for Performance Marketing. In het volgende voorbeeld ziet u hoe u volgparameters toevoegt aan koppelingen in de geëxporteerde sjabloon, terwijl de voorbeeldkoppelingen ongewijzigd blijven:

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

Statische inhoud

E-mail- en metasjablonen zijn vaak gekoppeld aan afbeeldingen en CSS-bestanden die buiten GenStudio for Performance Marketing worden gehost. Wanneer GenStudio for Performance Marketing miniaturen voor deze sjablonen of de ervaringen die hiervan zijn afgeleid genereert, kunnen deze externe bronnen worden genegeerd als ze niet de juiste koppen CORS (Cross-Origin Resource Sharing) hebben.

Houd rekening met twee opties om ervoor te zorgen dat deze bronnen beschikbaar zijn tijdens het genereren van miniaturen:

Sjabloonvoorbeelden

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