DokumentationMarketo EngageMarketo-Handbuch

Erstellen einer Vorlage für eine geführte Landingpage create-a-guided-landing-page-template

Last update: Wed Jul 26 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Geführte Landingpage-Vorlagen haben eine spezielle Syntax. Verwenden Sie diese Syntax, um festzulegen, was angepasst werden kann und wo der Inhalt auf jeder aus Ihrer Vorlage erstellten Landingpage landet. Nur die Regionen oder Variablen, die Sie als bearbeitbar angeben, stehen im Landingpage-Editor "Geführt"zur Anpassung zur Verfügung.

TIP
Verwenden Sie gute Namenskonventionen, und Ihr Marketing-Team wird sich in Sie verlieben.

Es gibt zwei Möglichkeiten, zu deklarieren, dass etwas auf Ihrer Seite bearbeitbar sein sollte:

  • Deklarieren Sie ein Objekt als "Element". Der Ersteller der Landingpage kann Bilder, Texte oder Marketo-Assets zu den angegebenen Bereichen hinzufügen.
  • Deklarieren Sie eine Zeichenfolge als "Variable". Der Ersteller der Landingpage kann diese Variable durch einen String-, Farb- oder booleschen Status aus einem true/false-Hebel ersetzen.

Bearbeitbare Elemente editable-elements

Elemente werden deklariert, indem ein normales DOM-Element zur Vorlage hinzugefügt und das Element dann mit einem Marketo-spezifischen Klassennamen dekoriert wird.

Text text

Wenn Sie eine Region als Rich-Text definieren, können Benutzer den Inhalt bearbeiten Verwenden des Rich-Text-Editors von Marketo.

Erforderliche Attribute:
class: "mktoText"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Optional:
Der Inhalt eines Elements mit der Klasse mktoText (sofern verfügbar) wird als Standardwert für den bearbeitbaren Bereich verwendet.

Beispiel:

<div class="mktoText" id="exampleText" mktoName="Main Body Text"> Optionally add default text for the editable text area.</div>

Bild image

Sie haben zwei Optionen zum Definieren bearbeitbarer Bildelemente. Sie können entweder eine <div>, der einen Container angibt, in den das Bild eingefügt wird, oder einen <img> -Tag.

Option 1: Verwenden eines <div> option-use-a-div

Erforderliche Attribute:

class: "mktoImg"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : String. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Optional:
mktoImgClass: String. Der Wert hier wird dem class -Attribut der <img> -Element innerhalb des div.

Beispiel:

<div class="mktoImg" id="exampleImg" mktoName="Example Image"></div>

Option 2: Verwenden Sie eine <img> option-use-a-img

Erforderliche Attribute:
class: "mktoImg"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : String. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Optional:
src: String-URL. Dies wird als Standardwert für das Bild verwendet.

Beispiel:

<img class="mktoImg" id="exampleImg" mktoName="Example Image">

NOTE
Bei Verwendung von <img> -Version enthält die gerenderte HTML einen generierten Div-Wrapper um die <img> -Tag. Sie wird auf class festgelegt."mktoImg.mktoGen" und werden angezeigt:inline-block.

Formular form

Beispiel: Erforderliche Attribute:
class: "mktoForm"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

<div class="mktoForm" id="exampleForm" mktoName="Example Form"></div>

Ausschnitt snippet

Erforderliche Attribute:
class: "mktoSnippet"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Beispiel:

<div class="mktoSnippet" id="exampleSnippet" mktoName="Example Snippet"></div>

Schaltfläche "Freigeben" share-button

Erforderliche Attribute:
class: "mktoShareButton"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Beispiel:

<div class="mktoShareButton" id="exampleShareButton" mktoName="Example Share Button"></div>

Video video

NOTE
Bei Verwendung des Videoelements in einer Landingpage unterstützt Marketo nur Videos aus YouTube. Wenn Sie einen anderen Dienst verwenden, empfehlen wir, ein Rich-Text-Feld zu verwenden und den Einbettungscode des Videos einzufügen.

Erforderliche Attribute:
class: "mktoVideo"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Beispiel:

<div class="mktoVideo" id="exampleVideo" mktoName="Example Video"></div>

Umfrage poll

Erforderliche Attribute:
class: "mktoPoll"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Beispiel:

<div class="mktoPoll" id="examplePoll" mktoName="Example Poll"></div>

Empfehlung referral

Erforderliche Attribute:
class: "mktoReferral"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Beispiel:

<div class="mktoReferral" id="exampleReferral" mktoName="Example Referral"></div>

Gewinnspiele sweepstakes

Erforderliche Attribute:
class: "mktoSweepstakes"
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Beispiel:

<div class="mktoSweepstakes" id="exampleSweepstakes" mktoName="Example Sweepstakes"></div>

Bearbeitbare Variablen editable-variables

Alle Variablentypen werden verwendet, indem auf den Wert ihres id-Attributs verwiesen wird, das in eine ${ } -Zeichensequenz eingeschlossen ist. Sie können überall im Dokument verwendet werden, außer in anderen Variablendeklarationen.

Beispiel:

${var1}

Erklärung:

Variablen werden als Meta-Tags innerhalb der <head> -Element der Vorlage. Es stehen drei Variablentypen zur Verfügung: Zeichenfolge, Farbe und Boolesch.

Zeichenfolge string

Erforderliche Attribute:
class : "mktoString",
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Optional:
default: Zeichenfolgenwert für das Attribut. Leer, wenn keine angegeben ist.
allowHtml: "true"oder "false". Steuert, ob der Wert gedruckt wird, ohne dass HTML maskiert wird. Die Standardeinstellung ist "false", wenn nicht festgelegt.

Grundlegendes Beispiel:

<meta class="mktoString" id="var1" mktoName="My Variable">

Beispiel mit allen Attributen:

<meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">

Farbe color

Erforderliche Attribute:
class : "mktoColor",
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Optional:
default: Ein 7-stelliger HEX-Zeichenfarbcode. Beispiel: "#336699"

Grundlegendes Beispiel:

<meta class="mktoColor" id="color1" mktoName="My Color Variable">

Beispiel mit allen Attributen:

<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">

Boolesch boolean

Erforderliche Attribute:
class : "mktoBoolean",
id: ID-Zeichenfolge. Enthält nur Buchstaben, Zahlen, Bindestriche "-"und Unterstriche "_". Leerzeichen sind nicht zulässig. Muss eindeutig sein.
mktoName : Zeichenfolge. Dies ist der Anzeigename, der im Landingpage-Editor angezeigt wird. Es empfiehlt sich, einen beschreibenden Namen zu verwenden.

Optional:
default: Boolesche Zeichenfolge. "true"oder "false"steuert, ob der Wert in der EIN- oder AUS-Position beginnt. "false", wenn nicht angegeben.
false_value: Zeichenfolge. Der Wert, der für die Variable eingefügt werden soll, wenn sie sich in der Stellung "AUS"befindet. "false", wenn nicht angegeben.
true_value: Zeichenfolge. Der Wert, der für die Variable eingefügt werden soll, wenn sie sich an der Position "ON"befindet. "true", wenn nicht angegeben.
false_value_name: Zeichenfolge. Der Anzeigename, der im Landingpage-Editor angezeigt wird, wenn sich der Wert in der Stellung "AUS"befindet. "AUS", falls nicht angegeben.
true_value_name: Zeichenfolge. Der Anzeigename, der im Landingpage-Editor angezeigt wird, wenn sich der Wert an der Position "EIN"befindet. "ON", falls nicht angegeben.

Grundlegendes Beispiel:

<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">

<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable">

Beispiel mit allen Attributen:

Dieses Beispiel zeigt einen häufigen Anwendungsfall, bei dem eine boolesche Variable die Sichtbarkeit eines CSS-Elements steuert, indem sie den Wert der CSS-Anzeigeeigenschaft auf "block"oder "none"setzt, um ein Element anhand der ID mit CSS anzuzeigen/auszublenden. Der Landingpage-Editor verwendet den Anzeigenamen "Einblenden/Ausblenden"anstelle von "AUS/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>

NOTE
Programm-Token (my.token) können auch überall auf Landingpages mit Guided oder Free-Form verwendet werden.
recommendation-more-help
94ec3174-1d6c-4f51-822d-5424bedeecac