Creare un modello di pagina di destinazione guidata create-a-guided-landing-page-template
I modelli di pagina di destinazione guidata hanno una sintassi speciale. Utilizza questa sintassi per specificare cosa è personalizzabile e dove il contenuto finirà su ogni pagina di destinazione creata dal modello. Solo le aree geografiche o le variabili specificate come modificabili saranno disponibili per la personalizzazione nell’editor di pagine di destinazione "Guidate".
Esistono due modi per dichiarare che un elemento nella pagina deve essere modificabile:
- Dichiarare un oggetto come "elemento". Il creatore della pagina di destinazione sarà in grado di aggiungere immagini, testo o risorse Marketo nelle aree specificate.
- Dichiara una stringa come "variabile". Il creatore della pagina di destinazione sarà in grado di sostituire tale variabile con una stringa, un colore o uno stato booleano da una leva true/false.
Elementi modificabili editable-elements
Gli elementi vengono dichiarati aggiungendo un normale elemento DOM al modello, quindi decorando l’elemento con un nome di classe specifico per Marketo.
Testo text
Se si definisce un'area come Rich Text, gli utenti potranno modificarne il contenuto utilizzando l'Editor Rich Text di Marketo.
Attributi richiesti:
classe: "mktoText"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Facoltativo:
Il contenuto di un elemento con la classe mktoText (se fornita) verrà utilizzato come valore predefinito per l’area modificabile.
Esempio:
<div class="mktoText" id="exampleText" mktoName="Main Body Text"> Optionally add default text for the editable text area.</div>
Immagine image
Sono disponibili due opzioni per definire gli elementi immagine modificabili. È possibile utilizzare un tag <div>, che specifica un contenitore in cui verrà inserita l'immagine, oppure un tag <img>.
Opzione 1 - Utilizzare <div> option-use-a-div
Attributi richiesti:
class: "mktoImg"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName : Stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Facoltativo:
mktoImgClass: Stringa. Il valore verrà aggiunto all'attributo class dell'elemento <img> all'interno del div.
Esempio:
<div class="mktoImg" id="exampleImg" mktoName="Example Image"></div>
Opzione 2 - Utilizzare un <img> option-use-a-img
Attributi richiesti:
class: "mktoImg"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName : Stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Facoltativo:
src: URL stringa. Verrà utilizzato come valore predefinito per l'immagine.
Esempio:
<img class="mktoImg" id="exampleImg" mktoName="Example Image">
<img>, il HTML sottoposto a rendering conterrà un wrapper div generato intorno al tag <img>. Sarà impostato su class ."mktoImg.mktoGen," e sarà visualizzato:inline-block.Modulo form
Esempio:Attributi obbligatori:
classe: "mktoForm"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
<div class="mktoForm" id="exampleForm" mktoName="Example Form"></div>
Frammento snippet
Attributi richiesti:
class: "mktoSnippet"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Esempio:
<div class="mktoSnippet" id="exampleSnippet" mktoName="Example Snippet"></div>
Pulsante Condividi share-button
Attributi richiesti:
classe: "mktoShareButton"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Esempio:
<div class="mktoShareButton" id="exampleShareButton" mktoName="Example Share Button"></div>
Video video
Attributi richiesti:
classe: "mktoVideo"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Esempio:
<div class="mktoVideo" id="exampleVideo" mktoName="Example Video"></div>
Sondaggio poll
Attributi richiesti:
classe: "mktoPoll"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Esempio:
<div class="mktoPoll" id="examplePoll" mktoName="Example Poll"></div>
Referral referral
Attributi richiesti:
class: "mktoReferral"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Esempio:
<div class="mktoReferral" id="exampleReferral" mktoName="Example Referral"></div>
Lotterie sweepstakes
Attributi richiesti:
classe: "mktoSweepstakes"
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Esempio:
<div class="mktoSweepstakes" id="exampleSweepstakes" mktoName="Example Sweepstakes"></div>
Variabili Modificabili editable-variables
Tutti i tipi di variabili vengono utilizzati facendo riferimento al valore del loro attributo id racchiuso all'interno di una sequenza di caratteri ${ }. Possono essere utilizzati in qualsiasi punto del documento, ad eccezione delle dichiarazioni di altre variabili.
Esempio:
${var1}
Dichiarazione:
Le variabili sono dichiarate come metatag nell'elemento <head> del modello. Sono disponibili tre tipi di variabili: String, Color e Boolean.
Stringa string
Attributi obbligatori:
classe: "mktoString",
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Facoltativo:
default: valore stringa per l'attributo. Vuoto se non specificato.
allowHtml: "true" o "false". Controlla se il valore verrà stampato senza escape HTML. Se non viene impostato, il valore predefinito è "false".
Esempio di base:
<meta class="mktoString" id="var1" mktoName="My Variable">
Esempio con tutti gli attributi:
<meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">
Colore color
Attributi obbligatori:
classe: "mktoColor",
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Facoltativo:
default: codice di colore del carattere HEX a 7 cifre. Esempio: "#336699"
Esempio di base:
<meta class="mktoColor" id="color1" mktoName="My Color Variable">
Esempio con tutti gli attributi:
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
Booleano boolean
Attributi obbligatori:
class : "mktoBoolean",
id: stringa ID. Contiene solo lettere, numeri, trattini "-" e trattini bassi "_". Non sono consentiti spazi. Deve essere univoco.
mktoName: stringa. Questo è il nome visualizzato che verrà visualizzato nell’editor pagina di destinazione. Si consiglia di utilizzare un nome descrittivo.
Facoltativo:
default: stringa booleana. "true" o "false" controlla se il valore inizia in posizione ON o OFF. "false" se non specificato.
false_value: stringa. Il valore da inserire per la variabile quando è in posizione OFF. "false" se non specificato.
true_value: stringa. Valore da inserire per la variabile quando è in posizione ON. "true" se non specificato.
false_value_name: stringa. Il nome visualizzato da visualizzare nell’editor pagina di destinazione quando il valore è in posizione OFF. "OFF" se non specificato.
true_value_name: stringa. Il nome visualizzato da visualizzare nell’editor pagina di destinazione quando il valore è nella posizione ON. "ON" se non specificato.
Esempio di base:
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable">
Esempio con tutti gli attributi:
Questo esempio mostra un caso d’uso comune in cui una variabile booleana controlla la visibilità di un elemento css impostando il valore della proprietà di visualizzazione css su "block" o "none" per mostrare/nascondere un elemento per id con gli stili CSS. L’editor della pagina di destinazione utilizza il nome visualizzato Mostra/Nascondi invece di 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>