Está viendo la ayuda para la versión:

La función de páginas de aterrizaje le permite importar fácil y rápidamente un diseño y contenido en una página de AEM. Un desarrollador de web puede preparar el HTML y los recursos adicionales que se pueden importar como página completa o solo parte de una página. Esta funcionalidad es útil para crear páginas de aterrizaje de marketing que solo estarán activas durante un periodo limitado y que deben crearse con rapidez.

En esta página se describe lo siguiente:

  • el aspecto de las páginas de aterrizaje en AEM y los componentes disponibles
  • cómo crear una página de aterrizaje y cómo importar un paquete de diseño
  • cómo trabajar con páginas de aterrizaje en AEM
  • cómo configurar páginas de aterrizaje móviles

El modo de preparar el paquete de diseño para su importación se explica en Ampliar y configurar el importador de diseños. La integración con Adobe Analytics se explica en las páginas de aterrizaje de la integración con Adobe Analytics.

¿Qué son las páginas de aterrizaje?

Las páginas de aterrizaje son sitios de una o varias páginas que constituyen el "punto de conexión" de un contacto de marketing; por ejemplo, mediante correo electrónico, adwords/titulares, redes sociales. Una página de aterrizaje puede tener varios propósitos, pero todas tienen una cosa en común: el visitante debería realizar una tarea, lo que define el éxito de una página de aterrizaje.

La función Páginas de aterrizaje en AEM permite a los expertos en marketing trabajar con diseñadores web en agencias o equipos creativos externos para crear diseños de páginas que se pueden importar fácilmente en AEM y que los expertos en marketing pueden editar y publicar en el mismo lugar que los sitios impulsados por AEM.

Para crear páginas de aterrizaje en AEM, siga los pasos siguientes:

  1. Cree una página en AEM que contenga el lienzo de las páginas de aterrizaje. AEM se envía con una muestra denominada Página importadora.
  2. Prepare el HTML y los recursos.
  3. Empaquete los recursos en un archivo comprimido (.zip) denominado Paquete de diseño.
  4. Importe el paquete de diseño en la página del importador.
  5. Modifique y publique la página.

Páginas de aterrizaje de escritorio

A continuación se muestra un ejemplo de una página de aterrizaje en AEM:

chlimage_1

Páginas de aterrizaje móviles

Una página de aterrizaje también puede tener una versión móvil. Para tener una versión móvil independiente de la página de aterrizaje, el diseño de importación debe tener dos archivos HTML: index.htm(l) y mobile.index.htm(l).

El procedimiento de importación de la página de aterrizaje es el mismo que el de una página de aterrizaje normal pero el diseño de página de aterrizaje tiene un archivo HTML adicional que corresponde a la página de aterrizaje móvil. Este archivo HTML también debe tener un lienzo div con id=cqcanvas, como el HTML de la página de aterrizaje de escritorio, y admitirá todos los componentes editables descritos para la página de aterrizaje de escritorio.  

La página de aterrizaje móvil se crea como una página secundaria de la página de aterrizaje de escritorio. Para abrirla, desplácese a la página de aterrizaje en Sitios web y abra la página secundaria.

chlimage_1

Nota:

La página de aterrizaje móvil se eliminará o desactivará junto con la de escritorio si se elimina o desactiva la página de aterrizaje de escritorio.

Componentes de la página de aterrizaje

Para que partes del HTML importado se puedan editar en AEM, puede asignar contenido en el HTML de las páginas de aterrizaje a componentes de AEM directamente. El importador de diseños entiende los componentes siguientes de forma predeterminada:

  • Texto, para cualquier texto
  • Título, para contenido en etiquetas H1-6
  • Imagen, para imágenes que debería poderse intercambiar
  • Llamadas a acción:
    • Vínculo de pulsaciones
    • Vínculo gráfico
  • Formulario CTA de posibles clientes, para capturar información sobre usuarios
  • Sistema de párrafos (Parsys), para que se pueda añadir cualquier componente o convertir el componente superior

Asimismo, es posible ampliarlo y admitir componentes personalizados. Esta sección describe los componentes detalladamente.

Texto

El componente Texto permite introducir un bloque de texto utilizando un editor WYSIWYG. Consulte Componente de texto para obtener más información.

A continuación se muestra un ejemplo de un componente de texto en una página de aterrizaje:

chlimage_1

Título

El componente de título le permite mostrar un título y configurar su tamaño (h1-6). Consulte Componente de título para obtener más información.

A continuación se muestra un ejemplo de un componente de título en una página de aterrizaje:

chlimage_1

Imagen

El componente de imagen muestra una imagen que puede arrastrar y soltar desde el Content Finder o en la que puede hacer clic para cargar. Consulte Componente de imagen para obtener más información.

A continuación se muestra un ejemplo de un componente de imagen en una página de aterrizaje:

chlimage_1

Llamada a acción (CTA)

El diseño de una página de aterrizaje puede tener varios vínculos; ciertos vínculos pueden considerarse “Llamadas a acción”.

La Llamada a acción (CTA) se utiliza para que el visitante realice una acción inmediata en la página de aterrizaje, como "Suscribirme ahora", "Ver este vídeo", "Por un periodo limitado", etc. 

  • Vínculo de pulsaciones: le permite añadir un vínculo de texto que dirigirá al visitante a la URL de destino cuando haga clic en él.
  • Vínculo gráfico: le permite añadir una imagen que dirigirá al visitante a una URL de destino cuando haga clic en ella.

Ambos componentes de llamada a acción tienen opciones similares. El vínculo de pulsaciones tiene opciones de texto enriquecido adicionales. Los componentes se describen detalladamente en los párrafos siguientes. 

Vínculo de pulsaciones

Este componente de llamada a acción puede utilizarse para añadir un vínculo de texto en la página de aterrizaje. Se puede hacer clic en el vínculo para dirigir al usuario a la URL de destino especificada en las propiedades del componente. Forma parte del grupo "Llamada a acción".

chlimage_1

Etiqueta

El texto que ven los usuarios. Puede modificar el formato con el editor de texto enriquecido.

URL de destino

Especifique el URI que desea que visiten los usuarios si hacen clic en el texto.

Opciones de procesamiento

Describe las opciones de procesamiento. Puede seleccionar entre las siguientes opciones:

  • Cargar página en una nueva ventana del navegador
  • Cargar página en la ventana actual
  • Cargar página en el marco principal
  • Cancelar todos los marcos y cargar la página en una ventana de navegador completa

CSS

En la ficha Estilo, especifique la ruta de acceso a la página de estilos de CSS.

ID

En la ficha Estilo, especifique un id. del componente para identificarlo de forma exclusiva.

A continuación se muestra un ejemplo de un vínculo de pulsaciones:

chlimage_1

Vínculo gráfico

Este componente de llamada a acción puede utilizarse para añadir imágenes gráficas con un vínculo en la página de aterrizaje. La imagen puede ser un botón simple o cualquier imagen gráfica como fondo. Cuando se hace clic en la imagen, se dirigirá al usuario a la URL de destino especificada en las propiedades del componente. Forma parte del grupo Llamada a acción.

chlimage_1

Imagen

Arrastre o añada una imagen en la que los usuarios podrán hacer clic para ir a la URL de destino.

Título

En la ficha Avanzado, escriba un título para la imagen.

Texto alternativo

En la ficha Avanzado, escriba el texto alternativo en caso de que se desactiven los gráficos.

Descripción

En la ficha Avanzado, escriba una descripción para la imagen.

Tamaño

En la ficha Avanzado, introduzca el ancho y la altura de la imagen

URL de destino

Especifique el URI que desea que visiten los usuarios si hacen clic en la imagen.

Opciones de procesamiento

Describe las opciones de procesamiento. Puede seleccionar entre las siguientes opciones:

  • Cargar página en una nueva ventana del navegador
  • Cargar página en la ventana actual
  • Cargar página en el marco principal
  • Cancelar todos los marcos y cargar la página en una ventana de navegador completa

CSS

En la ficha Estilo, especifique la ruta de acceso a la página de estilos de CSS.

ID

En la ficha Estilo, especifique un id. del componente para identificarlo de forma exclusiva.

A continuación se muestra un ejemplo de un vínculo gráfico:

chlimage_1

Llamada a acción: formulario de posibles clientes

Los formularios de posibles clientes se utilizan para recopilar información de perfil de un visitante o posible cliente. Dicha información puede guardarse y utilizarse posteriormente para realizar campañas de marketing eficaces basadas en la información. Este información suele incluir título, nombre, correo electrónico, fecha de nacimiento, dirección, intereses, etc. Forma parte del grupo Llamada a acción: formulario de posibles clientes.

A continuación se muestra un ejemplo de llamada a acción: formulario de posibles clientes:

chlimage_1

Los formularios de Llamada a acción: formularios de posibles clientes acción incluyen diferentes componentes:

  • Formulario de posibles clientes
    El componente de formularios de posibles clientes define el principio y el fin de un nuevo formulario de posibles clientes en una página. Otros componentes se pueden situar entre estos elementos, como el id. de correo electrónico, el nombre, etc. 
  • Campos y elementos de formulario
    Los campos y elementos de formulario pueden incluir cuadros de texto, botones de opción, imágenes, etc. El usuario suele finalizar una operación en un campo de formulario, como la introducción de texto. Consulte los elementos independientes de formulario para obtener más información.
  • Componentes de perfil
    Los componentes de perfil se refieren a perfiles de usuarios que se utilizan para colaboración social y otras áreas donde la personalización de los usuarios es obligatoria. 

El ejemplo anterior es un formulario compuesto por el componente Formulario de posibles clientes (inicio y fin), con los campos de entrada Nombre e id. del correo electrónico y un campo Enviar

Desde la barra de tareas, hay disponibles los componentes siguientes para Llamada a acción: formulario de posibles clientes:

chlimage_1

Configuración común de muchos componentes del formulario de posibles clientes

Aunque cada uno de los componentes del formulario de posibles clientes tiene un propósito diferente, muchos están compuestos de opciones y parámetros similares.

Al configurar cualquiera de los componentes de formulario, estarán disponibles las fichas siguientes en el cuadro de diálogo:

  • Título y texto
    Aquí debe especificar la información básica, como el título del componente y el texto que lo acompañe, si lo hay. Si es apropiado, también le permite definir otros tipos de información clave, como si se pueden realizar varias selecciones en el campo y si se pueden seleccionar elementos.
  • Valores iniciales
    Permite especificar un valor por defecto.
  • Restricciones
    Permite especificar si un campo es obligatorio y las restricciones de ese campo (por ejemplo, si debe ser numérico, etc.).
  • Estilo
    Indica el tamaño y el estilo de los campos.

Nota:

Los campos que se ven dependen del componente individual.

No están disponibles todas las opciones en todos los componentes del formulario de posibles clientes. Consulte Formularios para ver más información sobre esta configuración común.

Componentes del formulario de posibles clientes

En la sección siguiente se describen los componentes disponibles en Llamada a acción: formularios de posibles clientes.

Acerca de

Permite que los usuarios añadan información Acerca de.

chlimage_1

Campo de dirección

Permite que los usuarios especifiquen información de dirección. Al configurar este componente, debe especificar en Nombre de elemento en el cuadro de diálogo. El Nombre de elemento es el nombre del elemento del formulario. Indica en qué lugar del repositorio se almacenan los datos.

chlimage_1

Fecha de nacimiento

Los usuarios pueden indicar la información de la fecha de nacimiento.

chlimage_1

Id. de correo electrónico

Permite que los usuarios especifiquen una dirección de correo electrónico (identificación).

chlimage_1

Nombre

Proporciona un campo para que los usuarios especifiquen su nombre.

chlimage_1

Sexo

Los usuarios pueden seleccionar su sexo de una lista desplegable.

chlimage_1

Apellidos

Los usuarios pueden indicar sus apellidos.

chlimage_1

Formulario de posibles clientes

Añada este componente para añadir un formulario de posibles clientes a la página de aterrizaje. Un formulario de posibles clientes contiene los campos Inicio del formulario de posibles clientes y Fin del formulario de posibles clientes de forma predeterminada. Entre ellos, puede añadir los componentes de Formulario de posibles clientes descritos en esta sección.

chlimage_1

El componente Formulario de posibles clientes define el inicio y el final de un formulario mediante los elementos Inicio de formulario y Fin de formulario.  Estos siempre están emparejados para garantizar que el formulario se define correctamente.

Tras añadir el formulario de posibles clientes, puede configurar el inicio o el final del formulario y hacer clic en Editar en la barra correspondiente.

Inicio de formulario de posibles clientes

Se pueden configurar dos fichas Formulario y Avanzado:

chlimage_1

Página de agradecimientos

La página a la que se hace referencia para agradecer a los visitantes que hayan proporcionado información. Si se deja en blanco, el formulario se vuelve a mostrar tras el envío.

Iniciar flujo de trabajo

Determina qué flujo de trabajo se desencadena una vez que se envía un formulario de posibles clientes.

chlimage_1

Opciones de publicación

Las opciones de entrada disponibles son las siguientes:

  • Crear posible cliente
  • Servicio de correo electrónico: crear suscriptor y añadir a la lista. Se utiliza con un proveedor de servicios de correo electrónico como ExactTarget.
  • Servicio de correo electrónico: enviar correo electrónico de respuesta automática. Se utiliza con un proveedor de servicios de correo electrónico como ExactTarget.
  • Servicio de correo electrónico: cancelar la suscripción del usuario a la lista. Se utiliza con un proveedor de servicios de correo electrónico como ExactTarget.
  • Cancelar la suscripción del usuario

Formulario Identificador

El identificador del formulario identifica de forma exclusiva el formulario de posibles clientes. Utilice el identificador del formulario si tiene varios formularios en una misma página; asegúrese de que tienen identificadores distintos.

Ruta de acceso de carga

Es la ruta a las propiedades del nodo que se utiliza para cargar los valores predefinidos en los campos del formulario de posibles clientes.

Se trata de un campo opcional que especifica la ruta a un nodo en el repositorio. Cuando este nodo cuenta con propiedades que coinciden con los nombres de campo, los campos apropiados del formulario se cargan previamente con el valor de estas propiedades. Si no existe coincidencia, el campo contiene el valor predeterminado.

Validación del cliente

Indica si el formulario requiere validación de cliente (siempre se produce la validación de servidor). Esto se puede lograr junto con el componente Captcha de formulario.

Tipo de recurso de validación

Define el tipo de recurso de validación del formulario si desea validar todo el formulario de posibles clientes (en lugar de campos independientes).

Si va a validar el formulario completo, incluya también una de las siguientes operaciones:

  • Un script para validar el cliente:
    /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
  • Un script para validar el lado del servidor:
        /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

Configuración de la acción

Según la selección de Opciones de entrada, cambiará Configuración de la acción. Por ejemplo, cuando selecciona Crear posible cliente, puede configurar la lista a la que se añadirá el posible cliente.

chlimage_1
  • Mostrar el botón de Enviar
    Indica si se debería mostrar el botón de Enviar o no.
  • Enviar nombre
    Identificador por si utiliza múltiples botones de envío en un formulario.
  • Enviar título
    Nombre que aparece en el botón, como Enviar.
  • Mostrar el botón de Reiniciar
    Seleccione la casilla para hacer visible el botón de Reiniciar.
  • Reiniciar título
    Nombre que aparece en el botón de Reiniciar.
  • Descripción
    Información que aparece debajo del botón.

Crear una página de aterrizaje

Para crear una página de aterrizaje, debe seguir tres pasos:

  1. Cree una página de importador.
  2. Prepare el HTML para su importación.
  3. Importe el paquete de diseño.

Crear una página de importador

Antes de importar el diseño de la página de aterrizaje, debe crear una página de importador, por ejemplo, en una campaña. La plantilla de Página de importador le permite importar la página de aterrizaje completa en formato HTML. La página contiene un cuadro en el que se puede importar el paquete de diseño de la página de aterrizaje si lo arrastra y suelta.

Nota:

De forma predeterminada, las páginas de importador solo pueden crearse en campañas, pero también puede superponer la plantilla para crear una página de aterrizaje en /content/mysite.

Para crear una nueva página de aterrizaje:

  1. Desplácese a Sitios > Campañas y seleccione la campaña.

  2. Haga clic en CrearPágina.

  3. Seleccione la plantilla Página del importador y haga clic en Siguiente. Añada un título y, si lo desea, un nombre y etiquetas y haga clic en Crear.

    chlimage_1

    Se muestra la nueva página del importador.

Preparar el HTML para su importación

Antes de importar el paquete de diseño, el HTML debe prepararse. Consulte Ampliar y configurar el importador de diseños para obtener más información.

Importar el paquete de diseño

Tras crear una página importadora, puede importar un paquete de diseño en la misma. Los detalles acerca de cómo crear el paquete de diseño y su estructura recomendada se explican en Ampliar y configurar la importación de diseños.

Si el paquete de diseño está preparado, en los siguientes pasos se describe cómo importar el paquete de diseño en una página del importador.

Para importar el paquete de diseño:

  1. Abra la página de importador que creó anteriormente

    chlimage_1
  2. Arrastre el paquete de diseño y colóquelo en el buzón. Verá la página de aterrizaje en lugar de la página del importador. La página se importó correctamente.

    chlimage_1

Nota:

Si tiene problemas al importar el paquete de diseño, consulte Solución de problemas.

Uso de páginas de aterrizaje

Normalmente, un diseñador en una agencia crea el diseño y los recursos de una página de aterrizaje con herramientas como Adobe Photoshop o Adobe Dreamweaver. Cuando ha terminado el diseño, el diseñador envía un archivo comprimido con todos los recursos al equipo de marketing. La persona de contacto en marketing es responsable de transferir el archivo comprimido a AEM y publicar su contenido.

Asimismo, es posible que el diseñador tenga que modificar la página de aterrizaje tras la importación; para ello, deberá editar o eliminar contenido y configurar los componentes de llamada a acción. Por último, es posible que el experto en marketing desee previsualizar la página de aterrizaje y activar la campaña para comprobar que la página de aterrizaje se ha publicado.

Esta sección describe cómo hacer lo siguiente:

En la interfaz, las opciones Borrar diseño y Descargar archivo importado están disponibles en el menú de la configuración:

chlimage_1

Descarga del paquete de diseño importado

La descarga del archivo comprimido le permite registrar qué archivo comprimido se ha importado en una página de aterrizaje concreta. Tenga en cuenta que los cambios que se realicen en esta página no se añadirán al archivo comprimido.

Para descargar el paquete de diseño importado, seleccione Descargar el archivo comprimido importado del menú de configuración.

Visualizar información de importación

Puede ver información sobre la última importación en cualquier momento si hace clic en el signo de exclamación azul de la parte superior de la página de aterrizaje, en la interfaz de usuario clásica.

chlimage_1

Si el paquete de diseño importado tiene problemas (si, por ejemplo, hace referencia a imágenes o scripts que no existen en el paquete, etc.), el importador de diseños muestra los problemas en una lista. Para ver la lista de problemas, haga clic en el vínculo de problemas de la Página de aterrizaje que está en la barra de herramientas de la interfaz de usuario clásica. En la imagen siguiente, si se hace clic en el vínculo Problemas se abre la ventana Problemas de importación.

chlimage_1

Restaurar una página de aterrizaje

Si desea volver a importar el paquete de diseño de la página de aterrizaje tras realizar algunos cambios, puede hacer clic en Borrar en el menú de la configuración. Al hacer esto, se borrará la página de aterrizaje importada y se creará otra en blanco.

Al borrar la página de aterrizaje, puede eliminar los cambios de contenido. Si hace clic en No, se conservarán los cambios de contenido, es decir, se conserva la estructura de jcr:content/importer y solo se eliminan los recursos y el componente de la página del importador en etc/design. En cambio, si hace clic en , también se elimina el elemento jcr:content/canvas.

Nota:

Si decide eliminar los cambios de contenido, al hacer clic en Borrar se perderán todos los cambios realizados en la página de aterrizaje importada, así como las propiedades de página.  

Modificar y añadir componentes en una página de aterrizaje

Para modificar componentes en la página de aterrizaje, haga doble clic en ellos para abrirlos y editarlos como lo haría con cualquier otro componente.

Para añadir componentes en la página de aterrizaje, arrástrelos y suéltelos en la página de aterrizaje del panel Componentes y edítelos como desee.

Nota:

Si un componente de la página de aterrizaje no puede editarse, deberá volver a importar el archivo comprimido tras modificar el archivo HTML. Significa que, durante la importación, las partes no editables no se convirtieron en componentes de AEM.

Eliminar una página de aterrizaje

Eliminar una página de aterrizaje es como eliminar una página normal de AEM. 

La única excepción es que, cuando se elimina una página de aterrizaje de escritorio, también se eliminará la página de aterrizaje móvil correspondiente (si existe) pero no al revés.

Publicar una página de aterrizaje

Puede publicar la página de aterrizaje y todas sus dependencias como cuando se publica una página normal. 

Nota:

La publicación de una página de aterrizaje de escritorio también publica su versión móvil correspondiente (si existe). Sin embargo, la publicación de una página de aterrizaje móvil no publica la versión de escritorio. 

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea