Création d’un modèle de page d’entrée guidée create-a-guided-landing-page-template
Les modèles de landing page guidés ont une syntaxe spéciale. Utilisez cette syntaxe pour spécifier ce qui est personnalisable et où le contenu finira sur chaque landing page créée à partir de votre modèle. Seules les régions ou variables que vous spécifiez comme modifiables pourront être personnalisées dans l’éditeur de page d’entrée "guidée".
Il existe deux manières de déclarer qu’un élément de votre page doit être modifiable :
- Déclarez un objet comme "élément". Le créateur de la landing page pourra ajouter des images, du texte ou des ressources Marketo dans ces régions spécifiées.
- Déclarez une chaîne comme "variable". Le créateur de la page d’entrée pourra remplacer cette variable par un état de chaîne, de couleur ou de booléen à partir d’un levier vrai/faux.
Éléments modifiables editable-elements
Les éléments sont déclarés en ajoutant un élément DOM normal au modèle, puis en décorant l’élément avec un nom de classe spécifique à Marketo.
Texte text
Si vous définissez une région comme Texte enrichi, les utilisateurs pourront modifier son contenu. Utilisation de l’éditeur de texte enrichi Marketo.
Attributs requis :
class: "mktoText"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Facultatif:
Le contenu d’un élément avec la classe mktoText (s’il est fourni) sera utilisé comme valeur par défaut pour la région modifiable.
Exemple :
<div class="mktoText" id="exampleText" mktoName="Main Body Text"> Optionally add default text for the editable text area.</div>
Image image
Vous disposez de deux options pour définir les éléments d’image modifiables. Vous pouvez utiliser une <div>, qui spécifie un conteneur dans lequel l’image sera insérée, ou un <img> balise .
Option 1 - Utilisez une <div> option-use-a-div
Attributs requis :
Classe : "mktoImg"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Facultatif:
mktoImgClass: Chaîne. La valeur ici sera ajoutée à l’attribut de classe de la propriété <img> élément dans la balise div.
Exemple :
<div class="mktoImg" id="exampleImg" mktoName="Example Image"></div>
Option 2 - Utilisez une <img> option-use-a-img
Attributs requis :
Classe : "mktoImg"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Facultatif:
src : URL de chaîne. Cette valeur sera utilisée comme valeur par défaut de l’image.
Exemple :
<img class="mktoImg" id="exampleImg" mktoName="Example Image">
<img> version, le HTML rendu contient un wrapper div généré autour de la balise <img> balise . Il sera défini sur class ."mktoImg.mktoGen" et sera display:inline-block.Formulaire form
Exemple : attributs obligatoires :
class: "mktoForm"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
<div class="mktoForm" id="exampleForm" mktoName="Example Form"></div>
Extrait snippet
Attributs requis :
class: "mktoSnippet"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Exemple :
<div class="mktoSnippet" id="exampleSnippet" mktoName="Example Snippet"></div>
Bouton de partage share-button
Attributs requis :
class: "mktoShareButton"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Exemple :
<div class="mktoShareButton" id="exampleShareButton" mktoName="Example Share Button"></div>
Vidéo video
Attributs requis :
class: "mktoVideo"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Exemple :
<div class="mktoVideo" id="exampleVideo" mktoName="Example Video"></div>
Sondage poll
Attributs requis :
class: "mktoPoll"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Exemple :
<div class="mktoPoll" id="examplePoll" mktoName="Example Poll"></div>
Référencement referral
Attributs requis :
class: "mktoReferral"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Exemple :
<div class="mktoReferral" id="exampleReferral" mktoName="Example Referral"></div>
Loteries sweepstakes
Attributs requis :
class: "mktoSweepstakes"
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Exemple :
<div class="mktoSweepstakes" id="exampleSweepstakes" mktoName="Example Sweepstakes"></div>
Variables modifiables editable-variables
Tous les types de variable sont utilisés en référençant la valeur de leur attribut id encapsulé dans une séquence de caractères ${ }. Ils peuvent être utilisés n’importe où dans le document, sauf dans d’autres déclarations de variable.
Exemple :
${var1}
Déclaration :
Les variables sont déclarées en tant que balises META dans la variable <head> du modèle. Trois types de variables sont disponibles : Chaîne, Couleur et Valeur booléenne.
Chaîne string
Attributs requis :
class : "mktoString",
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Facultatif:
default: Valeur de chaîne pour l’attribut . Vide si aucun n’est fourni.
allowHtml: "true" ou "false". Contrôle si la valeur est imprimée sans séquence d’échappement par HTML. La valeur par défaut est "false" si elle n’est pas définie.
Exemple de base :
<meta class="mktoString" id="var1" mktoName="My Variable">
Exemple avec tous les attributs :
<meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">
Couleur color
Attributs requis :
class : "mktoColor",
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Facultatif:
default: Code couleur de caractère HEX à 7 chiffres. Par exemple : "#336699"
Exemple de base :
<meta class="mktoColor" id="color1" mktoName="My Color Variable">
Exemple avec tous les attributs :
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
Booléen boolean
Attributs requis :
class : "mktoBoolean",
id: Chaîne d’ID. Contient uniquement des lettres, des chiffres, un tiret "-" et un trait de soulignement "_". Les espaces ne sont pas autorisés. Doit être unique.
mktoName : Chaîne. Il s’agit du nom d’affichage qui s’affichera dans l’éditeur de landing page. Il est recommandé d’utiliser un nom explicite.
Facultatif:
default: Chaîne booléenne. "true" ou "false" contrôle si la valeur commence à la position ON ou OFF. "false" s’il n’est pas fourni.
false_value: Chaîne. La valeur à insérer pour la variable lorsqu’elle est en position OFF. "false" s’il n’est pas fourni.
true_value: Chaîne. La valeur à insérer pour la variable lorsqu’elle est en position ON. "true" s’il n’est pas fourni.
false_value_name: Chaîne. Nom d’affichage à afficher dans l’éditeur de landing page lorsque la valeur est en position OFF. "OFF" s’il n’est pas fourni.
true_value_name: Chaîne. Nom d’affichage à afficher dans l’éditeur de landing page lorsque la valeur est en position ON. "ON" s’il n’est pas fourni.
Exemple de base :
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable">
Exemple avec tous les attributs :
Cet exemple illustre un cas d’utilisation courant où une variable booléenne contrôle la visibilité d’un élément CSS en définissant la valeur de la propriété d’affichage CSS sur "block" ou "none" pour afficher/masquer un élément par identifiant avec CSS. L’éditeur de page d’entrée utilise le nom d’affichage Afficher/Masquer au lieu de OFF/ON.
<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show"> <style> #myConditionalDisplayArea { display: ${boolean1}; } </style>