Saltar a contenido

Landings

Crea páginas de aterrizaje propias para tu organización — para captar socios, promocionar una campaña o lo que necesites — con un editor visual de arrastrar y soltar. No hace falta saber programar.


La lista de landings

En Landings, en el menú lateral, ves una grilla de tarjetas — una por cada landing creada. Cada tarjeta muestra el nombre, una estrella para marcarla como la landing por defecto de tu organización, su dirección pública (/l/tu-slug), la fecha de creación y su estado (Activa/Inactiva).

Puedes filtrar por estado, rango de fechas y nombre. Desde cada tarjeta: Ver, Editar, Activar/Desactivar y Eliminar (con confirmación si sigue activa). Arriba están Nueva landing, para armar una desde cero, e Importar landing, para subir una hecha fuera de Asóciate (ver Importar una landing). Listado de landings


Crear una landing

  1. Presiona Nueva landing.
  2. Completa los datos de la landing:
    • Nombre (obligatorio).
    • Slug (URL) (opcional) — si lo dejas vacío, se genera automáticamente a partir del nombre. Tu landing queda disponible en /l/tu-slug.
    • Landing por defecto — marca esta casilla si quieres que sea la que se muestra en la dirección genérica de tu organización (sin slug propio).
    • Pixel, CSS y JS propios (avanzado) — un apartado colapsado, para quien lo necesite. Adentro hay tres editores de código:

      • HTML/JS de pixel específico de esta landing — un script de seguimiento solo para esta landing (por ejemplo, un pixel de conversión), distinto del pixel general de tu organización.
      • CSS de la landing y JS de la landing — estilos y scripts propios. Ver Código propio.

      Si ya tienen código (por ejemplo, después de importar), el apartado muestra la etiqueta con código. 3. Presiona Continuar al editor: se abre el editor visual en pantalla completa para armar el contenido. 4. Arma tu página y presiona Guardar borrador. Guardar no la hace pública: la landing sigue Inactiva. 5. Cuando esté lista, vuelve a su página de detalle y usa Más acciones → Activar. Desde ese momento es visible en su dirección pública; presiona Publicar cambios para registrarla como su versión 1.

Crear landing

Puedes usar estas variables en cualquier texto del contenido: {{ donate_url }} (la página de donación), {{ asociate_url }} (la página para hacerse socio), {{ company.name }} (el nombre de tu organización) y {{ landing_name }}. Las dos primeras llevan los UTM con que llegó el visitante.


Importar una landing

Si tu landing la hizo una agencia, un desarrollador o un asistente de IA, puedes subirla completa en vez de armarla en el editor. En Landings, presiona Importar landing y sube uno de estos:

  • Un .zip (recomendado) con index.html en la raíz y sus archivos en carpetas: css/, js/, img/, fonts/.
  • Un .html suelto, si todas sus imágenes son direcciones https://.
  • El HTML pegado (y, si quieres, el JavaScript aparte) en el mismo diálogo.

El nombre de la landing se toma del <title> del HTML, salvo que escribas otro.

Importar una landing

Qué hace la plataforma

La landing queda lista para funcionar, sin pasos manuales:

  • Imágenes: las del zip se suben a la galería de tu organización y se actualizan sus rutas, donde sea que aparezcan: en el HTML, en el CSS (fondos) y en el JavaScript (por ejemplo, un carrusel). Cada imagen se sube una sola vez. Las que la landing no usa también se suben, para que las tengas disponibles en el editor.
  • Fuentes propias (.woff2, .woff, .ttf, .otf, hasta 400 KB): se incrustan en el CSS.
  • CSS y JavaScript que vengan en el HTML o en archivos del zip: quedan en CSS de la landing y JS de la landing. Las librerías cargadas desde internet (un CDN) se dejan como están.
  • Pixels de Google, Meta, TikTok, LinkedIn, Hotjar, Clarity y otros: quedan en HTML/JS de pixel. Si alguno es propio, quien armó la landing puede marcarlo con data-asociate="pixel" para que vaya ahí también.
  • Variables: se respetan {{ donate_url }}, {{ asociate_url }}, {{ company.name }} y {{ landing_name }}. Cualquier otra expresión entre llaves dobles o {% %} se desactiva para que la página no falle.

Al terminar, la plataforma te muestra avisos en azul con lo que hizo (imágenes subidas, pixels importados) y advertencias con lo que no pudo resolver o conviene revisar: un archivo que falta en el zip, un PDF que hay que subir aparte, una sección sin tracking, un formulario propio en vez de uno de Asóciate.

Siempre como borrador

Importar nunca publica:

  • Una landing nueva queda inactiva. Revísala con Ver borrador y, cuando esté lista, usa Más acciones → Activar y Publicar cambios.
  • Para actualizar una landing que ya existe, entra a su detalle y usa Más acciones → Reemplazar contenido. Reemplaza el HTML, el CSS y el JS, y también el pixel si el archivo trae uno (si no trae, la landing conserva el suyo). El nombre y la dirección no cambian. Los cambios quedan sin publicar: tu público sigue viendo la versión anterior hasta que presiones Publicar cambios, y puedes deshacerlos con Descartar cambios.

Si vas a armar la landing con un asistente de IA, la skill de Desarrollo con IA le enseña a entregarla en este formato, con el tracking ya puesto.


La página de detalle

Al abrir una landing ves su contenido y sus analíticas en dos pestañas, y arriba las acciones:

  • Ver — abre la landing publicada (solo si está activa).
  • Editar — abre el editor visual en pantalla completa.
  • Ver borrador y Publicar cambios — aparecen cuando hay cambios guardados que todavía no se publican. Ver Borradores y publicación.
  • Más acciones:
    • Editar código — edita el HTML de la landing directamente, con resaltado de sintaxis. Ver Editar el código. Guardar desde aquí deja la landing activa (si estaba desactivada, vuelve a ser visible); si nunca se había publicado, además la publica como versión 1.
    • Edición avanzada — vuelve a los datos de la landing: nombre, slug y, en el apartado colapsado Pixel, CSS y JS propios (avanzado), su pixel, CSS y JS.
    • Reemplazar contenido — reemplaza el contenido con un .zip, un .html o HTML pegado. Ver Importar una landing.
    • Activar/Desactivar — la oculta del público sin borrarla.
    • Descartar cambios — vuelve a la última versión publicada.

Detalle de una landing con cambios sin publicar

La pestaña Contenido muestra una vista previa del contenido en edición, con su CSS y con las variables ya reemplazadas por los valores de tu organización. El JavaScript no corre ahí: para verla exactamente como la verá tu público, usa Ver borrador.


Publicar, desactivar y eliminar

Los cambios que haces sobre una landing ya publicada quedan en borrador hasta que presionas Publicar cambios — mientras tanto, tus visitantes siguen viendo la versión anterior. El detalle de cómo funciona está en Borradores y publicación.

Puedes Desactivar una landing en cualquier momento para ocultarla del público sin borrarla, y Activar de nuevo cuando quieras. Eliminar una landing la quita de tus listados y de su dirección pública.

El número de landings activas a la vez depende de tu plan. Si llegas al límite, desactiva otra antes de activar una nueva.


Analíticas

Cada landing tiene su propia pestaña de Analíticas: visitantes, una curva de scroll (hasta dónde llegan viendo la página), principales fuentes de tráfico, desglose por UTM, y un ranking/mapa de calor de los elementos más clickeados. Los datos se separan por versión publicada, para que un cambio de diseño no mezcle resultados de antes y después.