Communitygithub.com

Creador de Páginas de Aterrizaje — Patrón CAE

Crea una página de aterrizaje completa y de alta conversión desde cero utilizando el patrón CAE EEC. Recopila todo el contenido mediante preguntas estructuradas, genera HTML/CSS + un backend de Google Apps Script y luego lo despliega en Cloudflare Pages. Úsalo cuando alguien solicite crear una página de aterrizaje.

¿Qué es Creador de Páginas de Aterrizaje — Patrón CAE?

Este skill permite a un agente de IA construir páginas de aterrizaje profesionales y optimizadas para conversión, siguiendo el riguroso patrón EEC (Education-Engagement-Conversion) de CAE Vietnam. Es ideal para desarrolladores y equipos de marketing que necesitan lanzar landing pages rápidamente sin sacrificar calidad. El skill soporta Claude, Cursor, Codex y otras plataformas compatibles con agentes autónomos. El proceso se divide en fases claras: primero, recopila toda la información del usuario mediante preguntas secuenciales agrupadas (marca, hero, cursos, testimonios, FAQ, formulario y despliegue). Luego aplica un estricto control de calidad con el "Vision 10-Star" y la "Founder Challenge Rule" para asegurar titulares potentes y diseños memorables. Finalmente, genera el HTML/CSS completo (con inline styles, sin frameworks), un script de Google Apps Script para backend (que escribe en Google Sheets y envía correos) y proporciona instrucciones paso a paso para desplegar en Cloudflare Pages. Entre sus características destacadas: utiliza el patrón de UI optimista con retry automático en caso de fallo del backend, backup en localStorage, y verificación visual en navegador antes del despliegue. También cuenta con memoria progresiva (Mem0) para recordar preferencias de color, fuente y dominio del usuario en proyectos futuros.

Compatible con~Claude Code~Codex CLI~Cursor✓Antigravity
npx skills add buithelong-all/landing-page-skill

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Creador de Páginas de Aterrizaje — Patrón CAE?

Descripción general

Este skill te ayuda a crear una página de aterrizaje de alta calidad (siguiendo el patrón EEC de CAE Vietnam) a partir de la información proporcionada por el usuario. Todo el proceso lo realiza Antigravity: el usuario solo necesita responder preguntas.

Resultado final:

  • index.html + styles.css — página de aterrizaje completa, responsive, con animaciones
  • google-apps-script.js — backend que recibe datos del formulario → escribe en Google Sheets → envía correo de notificación
  • Instrucciones paso a paso para desplegar en Cloudflare Pages

Arquitectura de la página EEC (plano estándar)

1. NAV — sticky, difuminado al hacer scroll, logo + enlaces + botón CTA
2. HERO — pantalla completa, degradado rojo, partículas, titular + subtítulo + 2 botones
3. BARRA DE ESTADÍSTICAS — 4 cifras destacadas, contador animado
4. POR QUÉ NOSOTROS — 6 tarjetas de características con efectos hover (3 columnas)
5. INSTRUCTOR (opcional) — inserción de YouTube Short + credenciales
6. CURSOS — 3 cursos, tarjeta destacada en el centro, recuadro de precio
7. CRONOGRAMA — ruta de N semanas en formato cuadrícula
8. TESTIMONIOS — 3 tarjetas de reseñas con estrellas
9. FAQ — acordeón expandir/colapsar
10. CTA + FORMULARIO — sección con degradado, formulario de registro → Google Sheets + correo
11. PIE DE PÁGINA — 3 columnas: marca, cursos, contacto

PROCESO (DEBE EJECUTARSE EN ORDEN)

FASE 0: Escaneo y Contexto (SIEMPRE SE EJECUTA PRIMERO)

Antes de preguntar cualquier cosa, verifica el entorno y busca contexto anterior:

  1. Verifica si Mem0 está disponible:

    • Intenta llamar a search_memory con la consulta: "landing page preference color fuente dominio"
    • Si la herramienta NO existe / da error → ignóralo por completo, pasa a la Fase 1 inmediatamente, no informes del error al usuario
    • Si la herramienta existe y encuentra datos → informa: "Recuerdo que la última vez usaste [color X / fuente Y / dominio Z]. ¿Esta vez lo mantenemos o lo cambiamos?"
    • Si la herramienta existe pero no encuentra datos → continúa con la Fase 1 con normalidad
  2. Guarda el nuevo contexto (si Mem0 está disponible) — después de que el usuario confirme los 7 grupos, llama a add_memory:

    Página de aterrizaje [nombre de la campaña]: color=[hex], fuente=Be Vietnam Pro, dominio=[dominio], correo=[correo], hoja=[enlace de la hoja]
    
    • Si Mem0 no está disponible → omite este paso, no afecta al resultado

Principio de diseño: Mem0 es una funcionalidad adicional (mejora progresiva), no una dependencia obligatoria. El skill debe funcionar completamente normal en máquinas sin Mem0.


FASE 1: Recopilación de información (Preguntar grupo por grupo, esperar respuesta)

⚠️ IMPORTANTE: Pregunta UN GRUPO a la vez. No preguntes todo de una vez. Después de que el usuario responda un grupo, pregunta el siguiente.


Grupo A — Marca y colores

Pregunta:

Para crear la página de aterrizaje, necesito saber algunos datos básicos primero.

**Grupo 1: Marca**
1. ¿Cuál es el nombre de la marca/centro? (Ej.: CAE Vietnam, Centro ABC...)
2. URL del logo PNG (o di "no tengo" para usar texto en su lugar)
3. ¿Color principal que quieres usar?
   - 🔴 Rojo CAE (como la página EEC) — #8F1A1A + dorado #FEC46F
   - 🔵 Azul marino profesional — #1A3A5C + cian #00C9FF
   - 🟢 Verde fresco — #0D6E3F + dorado #FFD700
   - ✏️ Quiero ingresar otro color (proporciona el código hex)
4. ¿Nombre de dominio previsto? (Ej.: uudai.tentruongtoi.com o "aún no tengo")

Grupo B — Contenido del Hero

Después de recibir el Grupo A, pregunta:

**Grupo 2: Sección de encabezado (Hero Section)**
1. ¿Título principal que quieres mostrar? (Ej.: "Beca 100% de Chino Académico")
2. ¿Eslogan pequeño sobre el título? (Ej.: "Programa de prueba — Cantidad limitada")
3. ¿Descripción breve (1-2 frases) debajo del título?
4. ¿Texto del botón CTA principal? (Ej.: "📝 Registrarse ahora", "🎓 Obtener beca")
5. ¿Tienes 4 cifras estadísticas que quieras mostrar? (Ej.: 3 clases, 100% gratis, 8 semanas, 15 alumnos/clase)

Grupo C — Puntos fuertes y Cursos

Después de recibir el Grupo B, pregunta:

**Grupo 3: Puntos fuertes y Productos**
1. Enumera 3-6 puntos fuertes de tu oferta (cada uno con: icono emoji, título breve, descripción de 1-2 frases)
   Ej.: 🎓 Programa con licencia | Licencia comprada a socios internacionales...

2. Enumera 1-3 cursos/paquetes de servicios (cada paquete incluye):
   - Nombre del curso
   - Insignia pequeña (Ej.: "Online · 8 semanas", "Presencial · Hanoi")
   - 3-4 características destacadas
   - Precio original (para tacharlo)
   - Precio promocional / "100% GRATIS" / porcentaje de descuento
   - Nota (Ej.: "Solo 15 plazas")
   - ¿Cuál curso es el "más destacado"?

Grupo D — Cronograma e Instructor

Después de recibir el Grupo C, pregunta:

**Grupo 4: Contenido adicional**
1. ¿Tienes un cronograma de estudio por semanas? (Si es así, enumera N semanas con el nombre del tema)
2. ¿Tienes algún instructor/experto que quieras presentar?
   - Nombre, cargo
   - Enlace de video de YouTube (opcional)
   - 3 certificados/logros destacados
3. ¿Tienes 3 testimonios de clientes?
   (Nombre abreviado, nombre completo, rol, contenido de la cita)

Grupo E — FAQ y Contacto

Después de recibir el Grupo D, pregunta:

**Grupo 5: FAQ y Contacto**
1. Enumera 5-7 preguntas frecuentes y sus respuestas.
2. Información de contacto:
   - Dirección de la oficina
   - Teléfono/Zalo
   - Correo electrónico
   - URL de la página de Facebook
3. Pie de página de derechos de autor: "© 2025 [Nombre de la organización]"

Grupo F — Formulario y Backend

Después de recibir el Grupo E, pregunta:

**Grupo 6: Formulario de registro y conexión de datos**
1. ¿Qué campos debe recopilar el formulario?
   - [x] Nombre completo (obligatorio)
   - [x] Teléfono (obligatorio)
   - [ ] Correo electrónico
   - [ ] Dirección / Provincia
   - [ ] Casilla de verificación para seleccionar curso
   - [ ] Área de texto para notas
   - [ ] ¿Otro campo?

2. ¿Qué correo recibirá la notificación cuando alguien se registre?
   (Ej.: [email protected])

3. ¿Asunto del correo de notificación que quieres usar?
   (Ej.: "🔔 ¡Nuevo registro desde la página de aterrizaje!")

4. Por favor, envíame el enlace de la Hoja de Google donde quieres guardar los datos de registro.
   (Crearé el script según los campos del formulario anterior y te guiaré para ejecutarlo en esa Hoja)

⚠️ Después de que el usuario envíe el enlace de la Hoja → DETENTE y ejecuta la FASE 2 inmediatamente.


Grupo G — Despliegue en Cloudflare

Después de recibir el Grupo F, pregunta:

**Grupo 7: Información de despliegue (último paso)**
1. ¿Tu ID de cuenta de Cloudflare?
   (Ve a dash.cloudflare.com → selecciona tu cuenta → mira la URL: cloudflare.com/ID_CUENTA)
2. ¿Token de API de Cloudflare?
   (Ve a Mi Perfil → Tokens de API → Crear Token → usa la plantilla "Editar páginas de Cloudflare")
3. ¿Nombre del proyecto en Cloudflare Pages? (minúsculas, guiones, Ej.: mi-landing-2025)
4. ¿Dominio personalizado que quieres asignar? (Ej.: uudai.dominio.com o "no es necesario")

FASE 1.5 — VISIÓN 10 ESTRELLAS ⭐ (OBLIGATORIO antes de generar)

"No diseñes para millones de personas. Diseña para que UNA PERSONA tenga la experiencia más asombrosa que haya tenido." — Garry Tan

Detente y responde estas 4 preguntas ANTES de escribir una sola línea de código:

  1. ¿El titular "clava" el objetivo?

    • Lee el titular en 3 segundos: ¿el cliente sabe inmediatamente que esto es para él?
    • Si no es lo suficientemente fuerte → aplica la fórmula de Copywriting de este skill para reescribirlo
  2. ¿Esta página tiene ALGO INOLVIDABLE?

    • ¿Una cifra impresionante? ¿Una promesa audaz? ¿Un beneficio inesperado?
    • Ej.: "Estudia 100% gratis — Solo 15 plazas" → claro, escaso, acción inmediata
  3. ¿Qué punto débil mortal podría tener esta página de aterrizaje?

    • ¿Demasiados campos en el formulario? ¿Hero sin prueba social? ¿CTA soso?
    • Identifícalo y arréglalo en el diseño
  4. Si Steve Jobs revisara esta página, ¿qué eliminaría?

    • Elimina todo lo que no sirva al único objetivo: registrarse

Resultado: Escribe la nota de Visión en la respuesta antes de continuar:

🎯 VISIÓN 10 ESTRELLAS:
- Punto fuerte único: [..]
- Titular definitivo: [..]
- Algo inolvidable: [..]
- Se ha eliminado: [..]

REGLA DEL DESAFÍO DEL FUNDADOR (Aplica en la Puerta de la Visión)

"Actúa como CEO — tu misión es desafiar la mediocridad, no reconocerla."

Si el usuario proporciona un titular débil (genérico, sin público objetivo claro, sin beneficio específico), NO lo aceptes de inmediato. En su lugar:

⚡ Modo Fundador:
El titular "[titular del usuario]" sigue siendo genérico. Te propongo 3 alternativas más potentes:

[A] [Beneficio específico] — [cifra/tiempo] — [público claro]
    Ej.: "Estudia chino académico 100% gratis — Solo 15 plazas"

[B] [Gancho de pregunta] + [resultado sorprendente]
    Ej.: "¿Tu hijo estudia chino 8 semanas y se siente más seguro que los estudiantes internacionales?"

[C] [Promesa audaz] + [prueba]
    Ej.: "Sin progreso después de 4 sesiones — reembolso 100%, sin preguntas"

¿Qué opción prefieres, o quieres que lo reescriba de otra manera?

Cuándo desafiar: El titular no tiene al menos 2 de 3 elementos: (1) público claro, (2) beneficio específico, (3) cifra/compromiso.


FASE 2: Crear Google Apps Script (Backend)

Desencadenante: El usuario ha enviado el enlace de la Hoja de Google (Grupo F.4).

Paso 1 — Generar script personalizado:

Basado en la plantilla en templates/google-apps-script.js, crear un script personalizado según el formulario de la página de aterrizaje:

  • Rellena NOTIFICATION_EMAIL = correo del Grupo F.2
  • Rellena EMAIL_SUBJECT = asunto del Grupo F.3
  • Rellena CAMPAIGN_NAME = nombre de la campaña del Grupo A.1
  • Actualiza la función writeToSheet() para que tenga el número correcto de columnas que coincidan con los campos del formulario del Grupo F.1
  • Actualiza la función doPost() para que analice correctamente los e.parameter según los campos seleccionados

Paso 2 — Bloque de código de salida para que el usuario copie:

Después de generar, muestra TODO el código en un solo bloque:

✅ ¡He creado el script para tu Hoja de Google!

Este es el código que debes copiar y pegar en la Hoja:
[BLOQUE DE CÓDIGO]

📋 INSTRUCCIONES PARA EJECUTAR EN TU HOJA DE GOOGLE (5 pasos):

① Abre la Hoja de Google cuyo enlace enviaste → Ve al menú Extensiones → Apps Script
   (O haz clic en el enlace de esa Hoja y busca el menú Extensiones en la barra superior)

② Elimina todo el código predeterminado del editor (Ctrl+A → Suprimir)

③ Pega todo el código que he creado arriba (Ctrl+V)

④ Presiona Ctrl+S para guardar → Nombra el proyecto como "Manejador de Página de Aterrizaje" → Aceptar

⑤ Despliega el script:
   • Haz clic en el botón "Implementar" (esquina superior derecha) → "Nueva implementación"
   • En "Tipo": selecciona "Aplicación web"
   • En "Ejecutar como": selecciona "Yo (tu correo)"
   • En "Quién tiene acceso": selecciona "Cualquier persona"
   • Haz clic en "Implementar" → Google pedirá permisos → Haz clic en "Autorizar acceso" → Selecciona tu cuenta de Google
   • Copia la URL larga que aparece (formato: https://script.google.com/macros/s/.../exec)

📌 Después de obtener esa URL, pégala aquí para que la inserte en la página de aterrizaje.

Paso 3 — Espera a que el usuario confirme la URL de SHEETS_ENDPOINT antes de continuar con la FASE 3.


FASE 3: Generar el HTML de la Página de Aterrizaje

Basado en toda la información recopilada, crea el archivo index.html completo:

Estructura del archivo a crear:

  • Un solo archivo index.html (CSS inline dentro de la etiqueta <style>, NO archivos separados)
  • JavaScript para el envío del formulario inline dentro de la etiqueta <script>
  • Sin dependencias de frameworks, solo vanilla HTML/CSS/JS
  • Completamente responsive (mobile-first)
  • Usa Be Vietnam Pro (cargado desde Google Fonts CDN) — soporte completo para tildes en vietnamita, reemplaza a Inter/Montserrat

Diseño según el patrón EEC:

  • Esquema de colores del Grupo A.3
  • Todas las secciones del plano
  • Si el usuario no proporciona instructor → omite esa sección
  • Si no hay testimonios → omite esa sección
  • Si no hay cronograma → omite esa sección

Patrón de envío del formulario (DEBE usar un iframe oculto — para evitar CORS):

const SHEETS_ENDPOINT = 'URL_GAS_DEL_USUARIO'; // Rellena con la URL del Paso 2

const hiddenFrame = document.createElement('iframe');
hiddenFrame.name = 'hidden_iframe';
hiddenFrame.style.display = 'none';
document.body.appendChild(hiddenFrame);

// Al enviar: crear formulario oculto, POST al endpoint de GAS, destino al iframe oculto
// No usar fetch() — el POST nativo del formulario no es bloqueado por CORS

Copia de seguridad en localStorage:

// Siempre hacer copia de seguridad en localStorage antes de enviar
const regs = JSON.parse(localStorage.getItem('lp_registrations') || '[]');
regs.push(data);
localStorage.setItem('lp_registrations', JSON.stringify(regs));

UI optimista + Resiliencia de GAS (OBLIGATORIO):

// 1. Mostrar éxito INMEDIATAMENTE — sin esperar la respuesta de GAS
function submitForm(data) {
  // Copia de seguridad en localStorage primero
  backupToLocal(data);

  // Mostrar mensaje de éxito inmediatamente (optimista)
  showSuccessMessage();

  // Enviar a GAS en segundo plano — no bloquear la UI
  submitToGAS(data).catch(() => {
    // GAS falló pero localStorage tiene los datos → reintento silencioso
    scheduleRetry(data);
  });
}

// 2. Reintento automático si GAS falla
function scheduleRetry(data, attempt = 1) {
  if (attempt > 3) return; // Abandonar después de 3 intentos
  setTimeout(() => {
    submitToGAS(data).catch(() => scheduleRetry(data, attempt + 1));
  }, attempt * 3000); // 3s, 6s, 9s
}

// 3. Tiempo de espera de GAS de 10s (no hacer esperar al usuario indefinidamente)
async function submitToGAS(data) {
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 10000);
  try {
    // Usar fetch con modo no-cors (GAS no devuelve cuerpo de respuesta)
    await fetch(SHEETS_ENDPOINT, {
      method: 'POST', mode: 'no-cors',
      body: new URLSearchParams(data),
      signal: controller.signal
    });
  } finally {
    clearTimeout(timeout);
  }
}

Nota: El modo no-cors con fetch + URLSearchParams es una alternativa al iframe oculto, no es bloqueado por CORS. Usa uno u otro según el contexto.


FASE 3.5 — VERIFICACIÓN EN NAVEGADOR (Antes de desplegar)

Desencadenante: El archivo index.html ya se ha creado.

Usa la herramienta del navegador para verificar antes de informar al usuario:

  1. Abrir el archivo en el navegador (o servidor local)
  2. Comprobación responsive:
    • Móvil 375px: menú no se rompe, formulario cabe en pantalla, texto no se corta
    • Escritorio 1440px: no demasiado ancho, diseño equilibrado
  3. Comprobación de UX:
    • Botón CTA visible en la parte superior sin necesidad de desplazarse
    • Envío del formulario: rellenar datos de prueba → comprobar que la consola no tenga errores
    • Acordeón FAQ abrir/cerrar funciona
    • Desplazamiento suave, sin tirones
  4. Comprobación visual:
    • Colores correctos según la paleta elegida
    • Fuente cargada correctamente (Be Vietnam Pro)
    • No queda ningún texto de marcador de posición
  5. Captura de pantalla e informe: Toma capturas de pantalla de escritorio + móvil, envíalas al usuario para previsualización

⚠️ DEBE superar toda esta lista de verificación antes de ejecutar la FASE 3.6 de Refinamiento y la FASE 4 de Despliegue.


FASE 3.6 — PASADA DE REFINAMIENTO (Pulido)

Después de que el usuario confirme que el contenido está bien, realiza una ronda de pulido:

  • Microanimaciones: Agrega fade-in al hacer scroll a cada sección (IntersectionObserver)
  • Efectos hover: Escala ligera del botón al pasar el ratón (transform: scale(1.03))
  • Pulso del CTA: El botón de registro principal tiene una sutil animación de pulso para atraer la atención
  • Animación del contador: Las cifras estadísticas (3 clases, 500+ alumnos) cuentan hacia arriba al entrar en el viewport
  • Retroalimentación del formulario: Muestra estado de carga al enviar, mensaje de éxito después de enviar
  • Difuminado del nav: Al desplazarse hacia abajo, el nav tiene un efecto de desenfoque

FASE 4 — DESPLIEGUE EN CLOUDFLARE PAGES

Desencadenante: Archivo index.html FINAL confirmado + URL de GAS activa.

NO preguntar: "¿Quieres que lo despliegue?" — informar directamente:

✅ ¡Todo listo para desplegar tu página de aterrizaje en Cloudflare Pages!

Empezamos el despliegue ahora con Wrangler CLI.

⏳ Progreso:
1. Iniciando sesión en Cloudflare... [ ]
2. Creando proyecto "NOMBRE_PROYECTO"... [ ]
3. Subiendo index.html... [ ]
4. Asignando dominio personalizado (si lo hay)... [ ]
5. ¡En vivo! → https://NOMBRE_PROYECTO.pages.dev

Comandos Wrangler (ejecutar en orden):

# 1. Verificar autenticación
npx wrangler whoami

# 2. Crear proyecto de Pages (con assets vacío)
npx wrangler pages project create NOMBRE_PROYECTO --production-branch main

# 3. Desplegar (subiendo un solo archivo HTML)
npx wrangler pages deploy . --project-name NOMBRE_PROYECTO --dry-run  # Primero probar sin subir
npx wrangler pages deploy . --project-name NOMBRE_PROYECTO            # Luego desplegar de verdad

Nota: Si el usuario no proporciona Cloudflare Account ID y API Token en el Grupo G → salta esta fase. En su lugar, proporciona instrucciones manuales:

📋 INSTRUCCIONES MANUALES DE DESPLIEGUE:

Como no tienes la información de Cloudflare lista, puedes desplegar manualmente:

1. **Ve a** https://dash.cloudflare.com → Páginas → Crear proyecto
2. **Carga directamente** el archivo index.html que he creado
3. **Configura el dominio** si lo deseas

O dime la información cuando estés listo y lo haré automáticamente.

FASE 5: Informe final

Después de desplegar, envía la lista de verificación final:

🎉 ¡PÁGINA DE ATERRIZAJE COMPLETADA!

✅ [NOMBRE DE LA CAMPAÑA] — Página de aterrizaje EEC

📄 Archivos generados:
  • index.html — página principal
  • google-apps-script.js — backend de Google Sheets

🔗 URL en vivo: https://NOMBRE_PROYECTO.pages.dev
📊 Formulario conectado a Google Sheets: [ENLACE]
📧 Notificaciones por correo: [CORREO]

📌 PRÓXIMOS PASOS:
  1. Revisa la página en el enlace de arriba
  2. Prueba el formulario de registro
  3. Revisa la bandeja de entrada del correo de notificación
  4. ¡Comparte con tu equipo!

¿Hay algo más que quieras ajustar o mejorar?

PLANTILLAS Y RECURSOS

Plantilla de Google Apps Script

El script de backend sigue este patrón:

// === CONFIGURACIÓN ===
const SHEET_NAME = 'Registros';
const NOTIFICATION_EMAIL = '[email protected]';
const EMAIL_SUBJECT = '🔔 ¡Nuevo registro desde la página de aterrizaje!';
const CAMPAIGN_NAME = 'Nombre de la Campaña';

// === CREAR CABECERAS DE HOJA (ejecutar una vez) ===
function setupSheet() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  let sheet = ss.getSheetByName(SHEET_NAME);
  if (!sheet) {
    sheet = ss.insertSheet(SHEET_NAME);
  }
  // Cabeceras: ajustar según campos del formulario
  sheet.appendRow([
    'Marca de tiempo', 'Nombre', 'Teléfono', 'Correo', 'Curso', 'Notas',
    'URL de la página', 'ID de campaña'
  ]);
}

// === MANEJAR POST ===
function doPost(e) {
  try {
    const data = e.parameter;
    writeToSheet(data);
    sendNotification(data);
    return ContentService
      .createTextOutput(JSON.stringify({ status: 'success' }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService
      .createTextOutput(JSON.stringify({ status: 'error', message: error.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

// === ESCRIBIR EN HOJA ===
function writeToSheet(data) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  let sheet = ss.getSheetByName(SHEET_NAME);
  if (!sheet) {
    sheet = ss.insertSheet(SHEET_NAME);
    setupSheet();
  }
  sheet.appendRow([
    new Date(),
    data.nombre || '',
    data.telefono || '',
    data.correo || '',
    data.curso || '',
    data.notas || '',
    data.pagina_url || '',
    CAMPAIGN_NAME
  ]);
}

// === ENVIAR CORREO ===
function sendNotification(data) {
  const htmlBody = `
    <h2>🔔 Nuevo registro: ${CAMPAIGN_NAME}</h2>
    <table style="border-collapse: collapse; width: 100%;">
      <tr><td style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">Nombre</td>
          <td style="padding: 8px; border: 1px solid #ddd;">${data.nombre}</td></tr>
      <tr><td style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">Teléfono</td>
          <td style="padding: 8px; border: 1px solid #ddd;">${data.telefono}</td></tr>
      <tr><td style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">Correo</td>
          <td style="padding: 8px; border: 1px solid #ddd;">${data.correo}</td></tr>
      <tr><td style="padding: 8px; border: 1px solid #ddd; font-weight: bold;">Curso</td>
          <td style="padding: 8px; border: 1px solid #ddd;">${data.curso}</td></tr>
    </table>
    <p>📊 <a href="${SpreadsheetApp.getActiveSpreadsheet().getUrl()}">Ver en Google Sheets</a></p>
  `;
  
  MailApp.sendEmail({
    to: NOTIFICATION_EMAIL,
    subject: EMAIL_SUBJECT,
    htmlBody: htmlBody
  });
}

Patrón de Copywriting para esta Página

ElementoFórmulaEjemplo
Titular[Beneficio] + [Plazo] + [Público]"Beca 100% de Chino Académico — Solo 15 plazas"
Subtítulo[Problema] → [Solución]"¿Preocupado por las tasas de matrícula? Estudia completamente gratis..."
CTA[Verbo de acción] + [Valor]"📝 Obtener beca ahora"
Prueba social[Cifra] + [Logro]"500+ estudiantes se han beneficiado"

Principios de Diseño para Páginas de Aterrizaje de Alta Conversión

  1. Una idea por página — Cada página de aterrizaje sirve a un solo objetivo de conversión
  2. Lo digital es juzgado, no leído — Los visitantes deciden en 3 segundos si se quedan o se van
  3. Patrón F de lectura — La información importante se coloca en la parte superior izquierda y el centro
  4. Ley de Jakob — Los usuarios prefieren que la página funcione como otras que ya conocen
  5. Efecto Von Restorff — El botón CTA debe ser visualmente diferente de todo lo demás en la página

Skills relacionados