Crear una plantilla de página de aterrizaje guiada create-a-guided-landing-page-template
Las plantillas de página de aterrizaje guiada tienen una sintaxis especial. Utilice esta sintaxis para especificar qué se puede personalizar y dónde terminará el contenido en cada página de aterrizaje creada a partir de la plantilla. Solo las regiones o variables que especifique como editables estarán disponibles para la personalización en el editor de páginas de aterrizaje "Guiado".
Existen dos maneras de declarar que algo en su página debe ser editable:
- Declare un objeto como un "elemento". El creador de la página de aterrizaje podrá agregar imágenes, texto o recursos de Marketo a esas regiones especificadas.
- Declare una cadena como "variable". El creador de la página de aterrizaje podrá reemplazar esa variable con una cadena, un color o un estado booleano desde una palanca true/false.
Elementos editables editable-elements
Los elementos se declaran agregando un elemento DOM normal a la plantilla y decorando el elemento con un nombre de clase específico de Marketo.
Texto text
Si define una región como Texto enriquecido, los usuarios podrán editar su contenido con el Editor de texto enriquecido de Marketo.
Atributos necesarios:
class: "mktoText"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Opcional:
El contenido de un elemento con clase mktoText (si se proporciona) se utilizará como valor predeterminado para el área editable.
Ejemplo:
<div class="mktoText" id="exampleText" mktoName="Main Body Text"> Optionally add default text for the editable text area.</div>
Imagen image
Tiene dos opciones para definir elementos de imagen editables. Puede usar un <div>, que especifica el contenedor en el que se insertará la imagen, o una etiqueta <img>.
Opción 1: usar <div> option-use-a-div
Atributos necesarios:
clase: "mktoImg"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Opcional:
mktoImgClass: String. El valor aquí se agregará al atributo class del elemento <img> dentro del div.
Ejemplo:
<div class="mktoImg" id="exampleImg" mktoName="Example Image"></div>
Opción 2 - Usar un <img> option-use-a-img
Atributos necesarios:
clase: "mktoImg"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Opcional:
src: URL de cadena. Se utilizará como valor predeterminado para la imagen.
Ejemplo:
<img class="mktoImg" id="exampleImg" mktoName="Example Image">
<img>, el HTML procesado contendrá un contenedor div generado alrededor de la etiqueta <img>. Se establecerá en clase ."mktoImg.mktoGen," y se mostrarán:inline-block.Formulario form
Ejemplo: Atributos requeridos:
class: "mktoForm"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
<div class="mktoForm" id="exampleForm" mktoName="Example Form"></div>
Fragmento snippet
Atributos necesarios:
class: "mktoSnippet"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Ejemplo:
<div class="mktoSnippet" id="exampleSnippet" mktoName="Example Snippet"></div>
Compartir botón share-button
Atributos necesarios:
class: "mktoShareButton"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Ejemplo:
<div class="mktoShareButton" id="exampleShareButton" mktoName="Example Share Button"></div>
Vídeo video
Atributos necesarios:
clase: "mktoVideo"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Ejemplo:
<div class="mktoVideo" id="exampleVideo" mktoName="Example Video"></div>
Sondeo poll
Atributos necesarios:
clase: "mktoPoll"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Ejemplo:
<div class="mktoPoll" id="examplePoll" mktoName="Example Poll"></div>
Referencia referral
Atributos necesarios:
clase: "mktoReferral"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Ejemplo:
<div class="mktoReferral" id="exampleReferral" mktoName="Example Referral"></div>
Sorteos sweepstakes
Atributos necesarios:
clase: "mktoSweepstakes"
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Ejemplo:
<div class="mktoSweepstakes" id="exampleSweepstakes" mktoName="Example Sweepstakes"></div>
Variables editables editable-variables
Todos los tipos de variables se utilizan haciendo referencia al valor de su atributo id dentro de una secuencia de caracteres ${ }. Se pueden utilizar en cualquier parte del documento, excepto en el interior de otras declaraciones de variables.
Ejemplo:
${var1}
Declaración:
Las variables se declaran como metaetiquetas dentro del elemento <head> de la plantilla. Existen tres tipos de variables disponibles para su uso: cadena, color y booleano.
Cadena string
Atributos necesarios:
clase : "mktoString",
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Opcional:
default: valor de cadena para el atributo. Vacío si no se proporciona ninguno.
allowHtml: "true" o "false". Controla si el valor se imprimirá sin que se escape el HTML. Si no se establece, el valor predeterminado es "false".
Ejemplo básico:
<meta class="mktoString" id="var1" mktoName="My Variable">
Ejemplo con todos los atributos:
<meta class="mktoString" id="var1" mktoName="My Variable" default="This is my default value" allowHtml="true">
Color color
Atributos necesarios:
clase : "mktoColor",
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Opcional:
default: código de color de carácter HEX de 7 dígitos. P. ej.: #336699
Ejemplo básico:
<meta class="mktoColor" id="color1" mktoName="My Color Variable">
Ejemplo con todos los atributos:
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
Booleano boolean
Atributos necesarios:
clase : "mktoBoolean",
id: cadena de ID. Solo contiene letras, números, guiones "-" y guiones bajos "_". No se permiten espacios. Debe ser único.
mktoName : cadena. Este es el nombre para mostrar que se mostrará en el editor de páginas de aterrizaje. Una práctica recomendada es utilizar un nombre descriptivo.
Opcional:
predeterminado: cadena booleana. Los controles "true" o "false" si el valor comienza en la posición ON u OFF. "false" si no se proporciona.
false_value: String. Valor que se va a insertar para la variable cuando está en la posición OFF. "false" si no se proporciona.
true_value: String. Valor que se va a insertar para la variable cuando está en la posición ON. "true" si no se proporciona.
false_value_name: String. Nombre para mostrar que se mostrará en el editor de páginas de aterrizaje cuando el valor esté en la posición OFF. "OFF" si no se proporciona.
true_value_name: String. Nombre para mostrar que se mostrará en el editor de páginas de aterrizaje cuando el valor esté en la posición ON. "ON" si no se proporciona.
Ejemplo básico:
<meta class="mktoColor" id="color" mktoName="My Color Variable" default="#336699">
<meta class="mktoBoolean" id="boolean1" mktoName="My Boolean Variable">
Ejemplo con todos los atributos:
Este ejemplo muestra un caso de uso común en el que una variable booleana controla la visibilidad de un elemento css estableciendo el valor de la propiedad de visualización css en "block" o "none" para mostrar/ocultar un elemento por ID con CSS. El editor de la página de aterrizaje utilizará el nombre para mostrar Mostrar/Ocultar en lugar 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>