Las páginas landing o también llamadas páginas de aterrizaje, son páginas web en donde el visitante llega luego de hacer click en algún enlace (call to action o CTA).
Temario del articulo:
Selección de Plantilla predefinida.
Experimentos de Landing Pages.
Expiración y redireccionamiento de landing pages.
Creación del subdominio para las páginas landing.
Funcionalidades del editor de textos.
El principal uso de las páginas landing es convertir visitantes en leads.
Listado de páginas landing.
Dentro del listado se puede crear nuevas páginas landing y acceder a las ya creadas anteriormente, aplicando una serie de filtros para poder obtener únicamente el conjunto de páginas deseadas.
- Crear una nueva página landing, se creará un borrador de página llamado Nueva landing, el cual deberá ser.
- Configurado y publicado para que pueda ser utilizado como landing.
- Filtro de listados para obtener únicamente el conjunto de páginas deseadas.
- Presionando el nombre de una página ya existente se puede ingresar a la edición de la misma. En el caso de pertenecer a un experimento se mostrará una ventana con el detalle de las versiones asociadas.
- Acciones sobre formularios:
- Editar: Acceder a la edición de la página.
- Clonar: Crear un Nueva landing basada en una existente, se copiaran todas las configuraciones.
- Borrar estadísticas: Se eliminan todas las estadísticas de visitas asociadas a la landing, que generalmente se generan en las pruebas, al momento de ser publicada es recomendable que las estadísticas sean eliminadas.
- Borrar: Eliminar una landing completa.
Edición de páginas landing.
Al crear por primera vez una página landing se deberá elegir utilizar una plantilla predefinida de DataCrush o si se quiere subir un HTML propio.
Selección de Plantilla predefinida.
Al seleccionar plantillas predefinidas se nos presentará una ventana con una vista previa de las plantillas que ofrece DataCrush para utilizar en las landing pages.
También aparecerán en esta ventana los HTML que hemos subido en otras ocasiones.
Utilizando el buscador se puede filtrar según el nombre de la plantilla, también posicionando el mouse sobre una plantilla específica se puede obtener el nombre de la misma.
Subir HTML propio.
Un HTML propio puede ser cualquier página web diseñada fuera de DataCrush, ya sea por un diseñador o programador.
Este tipo de plantillas propias podrán luego ser accedidas como plantillas predefinidas para poder ser utilizados en la creación de nuevas páginas landing.
Luego de subir el HTML propio se accederá a la pantalla de diseño de la landing con nuestro HTML.
Recomendamos leer la sección Plantillas de usuario de nuestro Centro de Aprendizaje para conocer los elementos que permiten que un HTML propio pueda utilizar contenido dinámico.
Los requerimientos que debe cumplir el HTML a subir son:
Ser un archivo comprimido ZIP y contener:
- Archivo index.html, Archivo obligatorio que debe contener el contenido HTML.
- Directorio images: Directorio que contiene las imágenes utilizadas en el código HTML.
- Directorio css: Archivos de estilos utilizados en el código HTML.
- Directorio js: Archivos javascript utilizados en el código HTML (únicamente para páginas landing).
- Pueden crearse directorios personalizados que serán utilizado dentro del código HTML.
- Todas las referencias hacia los archivos externos deben realizarse dentro del código HTML en forma relativa, por ejemplo: <img src=“images/fondo.jpg”>
- El archivo zip debe contener todos estos archivos y directorios en su raíz, NO deben encontrarse los archivos dentro de otro directorio.
- Si se hacen referencias a archivos externos, de otro sitio web por ejemplo, debe soportar HTTPS, de lo contrario no funcionará correctamente.
Carga diferida de imágenes.
La carga diferida es una técnica que aplaza la carga de recursos no esenciales en el tiempo de carga de la página.
Estos recursos no esenciales se cargan en el momento en que son necesarios. En lo que se refiere a las imágenes, no esencial generalmente es sinónimo de fuera de pantalla.
DataCrush integra de forma nativa con la librería lazysizes para el manejo de la carga diferida de imágenes. Para poder utilizarla debe incluir lo siguiente dentro de su template que subió a Datacrush.
- Incluir la librería /lazysizes/lazysizes.min.js
- Utilizar en los elementos <img> la clase "lazyload" para identificar que ese elemento es utilizado como imagen diferida.
Luego DataCrush al momento de colocar la imagen seleccionada desde el Editor de Landing Page reemplazará el atributo data-src con la imagen seleccionada, para que esta sea cargada de forma diferida.
Ejemplo:
<script src="//assets2.datacrush.la/components/plugins/lazysizes/lazysizes.min.js"></script>
<img src="mi_imagen.jpg" class="lazyload" data-type="image" data-content="MiImagen1">
Diseño de landing page.
En la página de diseño podremos modificar cada una de las secciones de la landing y personalizarla a nuestra conveniencia.
- Área de diseño de la página landing, en donde se podrá observar el contenido editado.
- Barra deslizable para ajustar el ancho del diseño simulando diferentes tipos de resoluciones.
- Guardar el contenido editado y publicar la página.
- Guardar únicamente el contenido editado sin publicar.
- Acciones:
- Creación de un experimento, esto creará una nueva versión de la landing en la que podremos alterar algunos componentes y realizar Tests A/B (*).
- Previsualizar la página que se encuentra editando.
- Guardar un borrador y salir del modo edición, volviendo al listado de páginas landings.
- Visualización de la página landing simulando el ingreso de un contacto especificado, la misma se comportará dependiendo de las reglas de contenido ingresadas.
- Creación de un experimento, esto creará una nueva versión de la landing en la que podremos alterar algunos componentes y realizar Tests A/B (*).
- Visualización de la página landing simulando el ingreso de un contacto especificado, la misma se comportará dependiendo de las reglas de contenido ingresadas.
Experimentos de Landing Pages.
Atención: Esta función se encuentra solo en la versión Datacrush Black.
Utilizando la opcion del botón de Crear nuevo experimento puedes crear una nueva versión de la landing en la que podremos alterar algunos componentes y realizar Tests A/B (*)
¡IMPORTANTE!! Para tener en cuenta, la distribución entre versiones se realiza de forma aleatória, por lo que dependiendo de la cantidad de visitas puede existir alguna versión del experimentos que contenga más visitas que otra.
El Área de configuración (7) tiene tres solapas a las que accederemos para configurar la Landing Page:
Opciones generales: aquí encontraremos los datos generales de configuración de la landing:
- Nombre de la landing: Nombre de la página landing que será utilizado para poder identificarla posteriormente.
- Página URL: Formará la dirección web por la que se accederá a la Landing. Por defecto Datacrush asignará un dominio automáticamente. Es posible delegar un subdominio de tu pertenencia a Datacrush para ser utilizado en la landing.
- Campaña: Campaña a la cual pertenece la página landing, utilizado para agrupar las estadísticas.
- Día y horario de publicación de la página: La página puede ser publicada de forma inmediata o agendada para una fecha y hora en particular.
- Expiración de la página: Determina si la página deja de ser visible en una fecha y hora determinada, en ese caso se deberá ingresar a qué página landing o url externa son redireccionados los visitantes que ingresan a la landing expirada.
Contenido.
Las plantillas tienen definidas diferentes áreas de contenido editable, las cuales son seleccionables para edición haciendo click sobre la que se desea modificar, esta acción hará que DataCrush muestre en el Área de configuración (7) el módulo de diseño para ese sector.
Además de las áreas de contenido editable, encontraremos en esta solapa:
- Título de la página: Título de la Landing que será accedido por los motores de búsquedas para su indexación.
- Descarga de archivo: Se podrá subir un archivo para que el visitante pueda descargarlo al ingresar a la Landing. Este archivo será descargado automáticamente al ingresar a la landing, por lo que usualmente esta función se utiliza en una segunda Landing luego de llenar un formulario.
- Contenido editable: Según el tipo de contenido que se desea editar se solicitará diferente tipo de información. También podremos crear contenido dinámico basado en listas o ciclo de vida.
Personalización.
En esta sección se podrán personalizar estilos, agregar código javascript o píxeles de seguimiento como:
- Seleccionar el color de la plantilla: En el caso que la plantilla seleccionada posea diferentes tipos de colores, podrán ser seleccionados para cambiar el estilo de la plantilla.
- CSS personalizado: Realizar ajustes de estilos para adaptar la plantilla a las características de la página landing creada. Idealmente se recomienda que esta configuración sea realizada por un diseñador o programador ya que una incorrecta configuración puede romper el diseño de la Landing.
- Meta description: Son atributos HTML que proporcionan explicaciones concisas de los contenidos de las páginas web. Los Meta se utilizan comúnmente en las páginas de resultados de búsqueda del motor para mostrar fragmentos de vista previa de una página determinada.
- Sección cabecera del HTML: Añadir fragmentos de HTML, código embebido o javascripts de seguimiento, que se añadirán dentro de la etiqueta <head> en la página.
- Sección pie del HTML: Añadir fragmentos de HTML, código embebido o javascripts de seguimiento, que se añadirán a la derecha antes de la etiqueta </body> en la página.
Expiración y redireccionamiento de landing pages.
Si al momento de crear la Landing Page, necesitas que esta este atada a un periodo de tiempo, es decir que luego de tal fecha esta expire, entonces es posible que quieras redireccionar esta a otra landing en particular, para esto es necesario seguir los siguientes pasos:
- Dentro de la solapa Opciones, tienes que marcar la opción La página expira en una fecha determinada e ingresar una fecha y horario correspondiente.
- Luego debes selecciona la landing que quieres que redireccione o ingresar una URL manualmente.
- Para aplicar los cambios debes presionar el botón "Grabar y publicar"
Navegación Segura.
Al diseñar una Landing Page, es posible seleccionar la opción de obligar a la misma a qué se visualice bajo una navegación segura o mediante el protocolo SSL.
Esto nos da la posibilidad que estas no sean accesibles por robots para colocarla en los buscadores.
Creación del subdominio para las páginas landing.
Cuando es creado un portal en la plataforma, por defecto se utilizará un dominio propio de DataCrush para acceder a las landing pages publicadas.
Por ejemplo: tuportal.dc.mk o tuportal.datacrush.la
DataCrush permite que los portales utilicen un subdominio propio para acceder a las Landing pages publicadas, por ejemplo: landing.tuportal.com
Para poder utilizar esta importante funcionalidad, los pasos son:
Dentro del editor de landing, en la solapa Opciones, debajo de la función par crear la URL de la página, hay que hacer click en el botón Configurar mi dominio.
Desde allí, si sigues los pasos de esta guía, puedes configurar el sub dominio sin problemas, ya que desde ahí se activa un circuito que genera todo por detrás.
Incluso si a futuro, tienen que enviar esta guía al área técnica de la empresa, que se ocupa de la gestión de dominios, desde el botón del paso 1 (envía instrucciones a tu técnico) pueden enviar un email con los mismos pasos.
En el caso de que el subdominio que quieras utilizar ya se encuentre en el DNS, verifica que NO existe un registro de tipo A ya configurado para el mismo subdominio, si este existe debes primero eliminarlo, para luego configurar el nuevo registro de tipo CNAME.
Funcionalidades del editor de textos.
El editor de textos que se activa al seleccionar, por ejemplo, un módulo de bloque de texto, también nos permite entre otras funciones, la de poder editar de manera independiente un párrafo o renglón para que entre otras cosas puedes personalizar un color y no solo seleccionar uno fijo.
Comentarios
0 comentarios
Inicie sesión para dejar un comentario.