Personnalisation d’un modèle

Adaptez vos modèles d’HTML pour Adobe GenStudio for Performance Marketing à l’aide du langage de modèle Handlebars. La syntaxe Handlebars utilise du texte normal avec des accolades doubles comme espaces réservés au contenu. Voir What is Handlebars? dans le guide de langue Handlebars pour apprendre à préparer votre modèle.

Les sections suivantes expliquent comment ajouter des espaces réservés de contenu, masquer les éléments superflus de l’aperçu et gérer les liens vers du contenu statique. Une fois votre modèle prêt, vous pouvez le charger vers GenStudio for Performance Marketing et commencer à générer des emails personnalisés basés sur votre modèle personnalisé.

Espaces réservés de contenu

GenStudio for Performance Marketing reconnaît certains éléments dans un modèle, mais seulement si vous les identifiez avec un nom de champ reconnu.

Dans l’en-tête ou le corps d’un modèle, vous pouvez utiliser la syntaxe Handlebars comme espace réservé de contenu dans lequel vous avez besoin de GenStudio for Performance Marketing pour remplir le modèle avec du contenu réel. GenStudio for Performance Marketing reconnaît et interprète les espaces réservés de contenu en fonction du nom champ reconnu.

Par exemple, vous pouvez utiliser {{ headline }} avec la syntaxe Handlebars pour indiquer où le titre de l'email doit être placé :

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

Noms de champ reconnus

Le tableau suivant répertorie les noms de champ reconnus par GenStudio for Performance Marketing pour la population dans les modèles. Ajoutez ces noms de champ en utilisant la syntaxe Handlebars à votre modèle pour lequel vous avez besoin de GenStudio for Performance Marketing pour générer du contenu.

GenStudio for Performance Marketing renseigne automatiquement certains champs dans les modèles suivants :

La limite est de 20 champs lors du téléchargement d’un modèle vers GenStudio for Performance Marketing. Comme le champ subject est généré automatiquement dans un email, il est compté comme un champ. Un modèle d'email peut donc contenir 19 champs.

Nom du champ du logo de la marque

Actuellement, vous ne pouvez pas sélectionner le logo de la marque pour le téléchargement du modèle. Les exemples suivants montrent deux méthodes qui rendent de manière conditionnelle le logo de la marque. Chaque méthode vérifie la source, fournit une image par défaut ou alternative si le logo de la marque n’est pas disponible et applique un style :

Exemple 1 : utilisation de la condition Handlebars d’assistance intégrée directement dans l’attribut d’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;">

Exemple 2 : utilisation de l’instruction de condition intégrée Handlebars pour encapsuler la balise d’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}}

Noms de champ manuels

Tous les autres noms de champ sont traités comme des champs renseignés manuellement.

Pour créer une section modifiable, ajoutez des crochets doubles autour du nom de la section :

{{customVariable}}

Sections ou groupes

Les sections informent GenStudio for Performance Marketing que les champs de cette section nécessitent un haut degré de cohérence. L’établissement de cette relation permet à l’IA de générer du contenu correspondant aux éléments créatifs de la section .

Utilisez un préfixe de votre choix dans le nom du champ pour indiquer qu’un champ fait partie d’une section ou d’un groupe. Par exemple, vous pouvez mettre en évidence le contenu qui s’affiche dans une zone mise en surbrillance :

Chaque section ne peut utiliser qu’un seul type de champ. Dans l’exemple ci-dessus, la section pod1 ne peut utiliser qu’un seul champ pod1_headline.

Un modèle peut comporter trois sections au maximum :

GenStudio for Performance Marketing comprend que pod1_headline est plus étroitement lié à pod1_body qu’à pod2_body.

Aperçu du modèle

Lorsque vous chargez un modèle, GenStudio for Performance Marketing recherche les champs reconnus dans le fichier d’HTML. Utilisez l’aperçu pour passer en revue vos éléments de modèle et confirmer que vous les avez correctement identifiés avec les noms de champ reconnus.

Exemple d'aperçu pour un modèle de courrier électronique :

{width="650"}

Aperçu du contrôle

Vous pouvez contrôler la visibilité du contenu spécial à l’aide des assistants intégrés (expressions spéciales dans le langage de modèle Handlebars qui effectuent certaines actions). Par exemple, vous pouvez ajouter une instruction conditionnelle qui ajoute des paramètres de suivi aux liens dans le modèle exporté tout en prévisualisant les liens propres.

La valeur _genStudio.browser est définie lors du rendu d’un modèle et la valeur genStudio.export est définie lors de l’exportation d’un modèle. Vous pouvez décider d’inclure certains contenus en haut d’un email à l’aide d’un wrapper conditionnel, par exemple, lorsque le modèle est utilisé pour l’exportation :

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

Un autre exemple peut être d’empêcher l’utilisation des codes de suivi lors de la prévisualisation d’un modèle dans GenStudio for Performance Marketing. L’exemple suivant montre comment ajouter des paramètres de suivi aux liens dans le modèle exporté, tout en conservant les liens d’aperçu propres :

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

Contenu statique

Les modèles de courrier électronique et de métadonnées sont souvent liés à des images et à des fichiers CSS hébergés en dehors de GenStudio for Performance Marketing. Lorsque GenStudio for Performance Marketing génère des miniatures pour ces modèles ou les expériences qui en découlent, il se peut qu’il ignore ces ressources externes si elles ne comportent pas les en-têtes CORS (Cross-Origin Resource Sharing) corrects.

Pour vous assurer que ces ressources sont disponibles pendant le processus de génération de miniatures, envisagez deux options :

Exemples de modèles

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