Especialista web

Tu guía paso a pasopara construir el funnel web.

Todo lo que tienes que hacer, en orden, con instrucciones claras.

Tu rol en el funnel: Eres el responsable de que el tráfico que llega a la web se convierta en leads. Instalas el tracking, construyes las landing pages y haces que el chatbot, los formularios y el widget de reserva funcionen. Sin ti, los anuncios llevan a páginas que no convierten.

Fase 0 — Tracking y base técnica

Esta semana · Prioridad máxima · Sin esto no hay datos

Objetivo: Antes de lanzar cualquier anuncio, el tracking tiene que estar funcionando. Sin GA4 y Meta Pixel bien configurados, el dinero en ads no se optimiza y no sabes qué funciona.

0.1

Instalar Google Tag Manager en toda la web

Crítico

Cómo hacerlo:
1. Ir a tagmanager.google.com → Crear cuenta → Crear contenedor "Dental Basté Web"
2. Copiar el snippet de instalación: pegar el <script> en <head> y el <noscript> en <body> de todas las páginas
3. Si la web usa WordPress: instalar plugin "GTM4WP" y pegar el ID del contenedor
4. Publicar el contenedor vacío (para verificar que carga)
5. Verificar con la extensión Tag Assistant (Chrome) que GTM aparece en la web

Qué necesitas:
— Cuenta Google del proyecto (no usar cuenta personal)
— Acceso al código fuente o panel de administración de la web
— Extensión Tag Assistant Legacy en Chrome para verificar
— ID del contenedor GTM (formato: GTM-XXXXXXX)

0.2

Configurar GA4 y conectarlo a GTM

Crítico

Cómo hacerlo:
1. En analytics.google.com → Crear propiedad "Dental Basté" → obtener Measurement ID (G-XXXXXXXXXX)
2. En GTM: New Tag → Google Analytics: GA4 Configuration → pegar el Measurement ID
3. Trigger: All Pages → Publicar
4. Configurar conversiones en GA4: form_submit y booking_completed como eventos de conversión
5. Conectar GA4 con Google Search Console (Search Console → Settings → Associations)

Eventos clave a configurar en GTM:
form_submit → Conversión (lead)
booking_completed → Conversión (cita)
click_cta → Click en botones principales
chatbot_open → Apertura del widget
qr_scan_landing → Visita desde QR de la TV
scroll_depth → 25/50/75/90% de scroll

JavaScript — dataLayer push para eventos clave

// Al abrir el chatbot (añadir al widget flotante)
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: 'chatbot_open', page_path: window.location.pathname });

// Al enviar formulario con éxito
function onFormSuccess(tratamiento) {
  window.dataLayer.push({ event: 'form_submit', tratamiento_interes: tratamiento });
}

// Cita confirmada en Calendly
window.addEventListener('message', function(e) {
  if (e.data.event === 'calendly.event_scheduled')
    window.dataLayer.push({ event: 'booking_completed' });
});

0.3

Instalar Meta Pixel vía GTM

Crítico

Cómo hacerlo:
1. En Meta Business Manager → Events Manager → Crear pixel → copiar el Pixel ID
2. En GTM: New Tag → Custom HTML → pegar el código base del Pixel con el ID
3. Trigger: All Pages
4. Crear tag adicional para el evento Lead: activar cuando dataLayer lanza form_submit
5. Crear tag para CompleteRegistration: activar con booking_completed
6. Verificar con Meta Pixel Helper (extensión Chrome) que los eventos llegan

Qué necesitas:
— Acceso a Meta Business Manager de Dental Basté
— Pixel ID (formato numérico de 15–16 dígitos)
— Extensión Meta Pixel Helper en Chrome para verificar
— Coordinar con el Especialista IA para activar CAPI (Conversions API) después

0.4

Integrar el widget del chatbot en la web

Crítico

Cómo hacerlo:
1. Coordinar con el Especialista IA la URL del webhook o el embed del chatbot
2. Insertar el widget flotante (bottom-right) en todas las páginas
3. Configurar aparición: tras 8 segundos en la página O al intentar salir (exit intent)
4. Asegurar que es responsive (mobile first) y tiene ARIA labels para accesibilidad
5. Disparar evento chatbot_open al dataLayer al hacer click

Qué necesitas:
— Snippet de embed del chatbot (lo proporciona el Especialista IA)
— Posición CSS: position: fixed; bottom: 24px; right: 24px;
— Probar en móvil (iOS + Android) antes de publicar
— Verificar que no afecta al CLS (Cumulative Layout Shift)

Fase 1 — Landing principal y reservas

Semanas 1–3 · La primera página que ven los leads de los anuncios

1.1

Crear la landing de captación principal

Crítico

Estructura obligatoria (en este orden):
1. Hero: Headline + subheadline + CTA visible sin scroll + foto real de la clínica
2. Beneficios: 3 iconos con beneficio cada uno (no texto largo)
3. Proceso: "Consulta → Diagnóstico → Tratamiento" en 3 pasos
4. Testimonios: 2–3 reales con foto y nombre (con permiso)
5. FAQ: 5–7 preguntas en acordeón
6. CTA final: Calendly embebido o formulario corto

Regla crítica: Sin menú de navegación. Sin links externos. Solo una acción posible: reservar.

Qué necesitas:
— Fotos reales de la clínica (pedirlas al Especialista Vídeo)
— 2–3 testimonios con foto y permiso firmado
— URL: dentalbaste.com/primera-visita-gratis
— Tiempo de carga objetivo: < 2 seg en móvil
— Calendly embed URL con utm_source=google_ads y utm_source=meta_ads para saber de dónde vienen las citas
— Vincular a esta landing todos los anuncios desde el día 1

1.2

Crear landing QR del escaparate

Crítico

Cómo hacerlo:
1. URL: dentalbaste.com/escaparate (corta, fácil de escribir también)
2. Diseño minimalista: logo + mensaje "Has escaneado desde nuestra clínica" + botón reserva
3. Calendly embebido directamente, sin más pasos
4. Disparar evento qr_scan_landing al cargar la página con utm_source=qr_escaparate
5. Carga < 1.5 seg en móvil (el transeúnte no espera)

Por qué es crítica esta página:
El transeúnte que escanea el QR viene con intención alta — acaba de ver el escaparate de la clínica. Si la página tarda o confunde, se pierde. Esta landing debe tener la tasa de conversión más alta de todo el sitio.

Coordinar la URL con el Especialista Marketing para que el QR del spot apunte aquí.

HTML — Estructura landing /escaparate (mobile first)

<!-- Sin menú, sin footer, carga ultrarrápida -->
<section class="qr-hero">
  <img src="/logo.svg" alt="Dental Basté" width="160" />
  <h1>¡Bienvenido a Dental Basté!</h1>
  <p>Primera visita gratuita — sin compromiso</p>
  <a href="#booking" class="cta-button">Reservar cita gratis →</a>
</section>

<section id="booking">
  <div class="calendly-inline-widget"
    data-url="https://calendly.com/dentalbaste/primera-visita?utm_source=qr_escaparate">
  </div>
</section>

<script>dataLayer.push({event:'qr_scan_landing', source:'tv_escaparate'});</script>

1.3

Embeber Calendly en la web y conectarlo al sistema

Crítico

Cómo hacerlo:
1. Copiar el snippet de embed de Calendly (tipo inline widget)
2. Añadir parámetros UTM según la página donde se embebe: utm_source=web, utm_source=landing_ortodoncia, etc.
3. Escuchar el evento calendly.event_scheduled para disparar el tracking
4. Coordinar con el Especialista IA que el webhook de Calendly apunta al escenario de Make correcto

Páginas donde embeber Calendly:
— Landing principal (/primera-visita-gratis)
— Landing QR (/escaparate)
— Página de contacto principal
— Al final de cada landing de tratamiento (después del FAQ)

Usar el mismo tipo de evento Calendly en todas para centralizar el webhook.

1.4

Conectar formularios web con Gesden

Alta

Cómo hacerlo:
1. Crear un formulario corto (nombre, email, teléfono, tratamiento) en la landing principal
2. Al hacer submit: llamar a la API de Gesden para crear el contacto
3. Disparar el evento form_submit al dataLayer con el tratamiento
4. Mostrar mensaje de confirmación y redirigir a Calendly o a página de "gracias"
5. Coordinar con Especialista IA que Make recibe el webhook y activa el nurturing

Campos mínimos del formulario:
nombre — requerido
email — requerido
telefono — requerido (para WhatsApp nurturing)
tratamiento — select (ortodoncia/implantes/blanqueamiento/otra)

Añadir checkbox RGPD obligatorio con link a política de privacidad.

Fase 2 — Landings por tratamiento y SEO

Semanas 4–8 · 4 páginas · SEO local · Schema markup

2.1

Crear landing por cada tratamiento principal

Alta

4 páginas a crear (en este orden de prioridad):
1. /implantes-dentales — ticket más alto, ROI mayor
2. /ortodoncia — alta demanda búsquedas locales
3. /blanqueamiento-dental — volumen alto, buen para Meta Ads
4. /periodoncia — SEO long tail

Misma estructura que la landing principal pero con contenido específico del tratamiento. Usar GPT-4o para generar el copy base (coordinar con Especialista IA), luego revisar.

SEO on-page obligatorio en cada página:
— Meta title: "Ortodoncia en [Ciudad] | Dental Basté" (55–60 car.)
— Meta description con CTA implícito (150–160 car.)
— H1 único con keyword + ciudad
— URL limpia: /ortodoncia sin parámetros
— Imágenes en WebP, <100 KB, con alt text
— Schema markup Dentist (ver acción 2.2)
— Link interno a la página de reserva en cada sección

2.2

Instalar Schema markup y optimizar Google Business Profile

Alta

Schema markup — insertar en <head> de todas las páginas:
Tipo: Dentist + LocalBusiness
Incluir: nombre, URL, teléfono, dirección, horario, especialidades, enlace a Google Maps

Google Business Profile:
— Verificar y completar el perfil al 100%
— Categoría: "Dentista" + secundarias: ortodoncia, implantes
— Mínimo 10 fotos reales de la clínica y el equipo
— Publicaciones semanales (coordinar con Marketing)

Qué necesitas:
— Acceso admin a Google Business Profile de Dental Basté
— Dirección, teléfono y horario exactos de la clínica
— Fotos de calidad (pedirlas al Especialista Vídeo)
— Herramienta para validar el schema: search.google.com/test/rich-results

JSON-LD — Schema markup Dentist para Dental Basté

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": ["Dentist", "LocalBusiness"],
  "name": "Dental Basté",
  "url": "https://dentalbaste.com",
  "telephone": "+34 9XX XXX XXX",
  "address": { "@type": "PostalAddress", "streetAddress": "Calle ...", "addressLocality": "[Ciudad]", "addressCountry": "ES" },
  "openingHoursSpecification": [{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Friday"], "opens": "09:00", "closes": "20:00" }],
  "medicalSpecialty": ["Dentistry", "Orthodontics"],
  "priceRange": "€€"
}
</script>

2.3

Instalar Microsoft Clarity para análisis de comportamiento

Media

Cómo hacerlo:
1. Ir a clarity.microsoft.com → Crear proyecto → copiar el ID
2. En GTM: New Tag → Custom HTML → pegar el snippet de Clarity
3. Trigger: All Pages → Publicar
4. En Clarity, crear un funnel: Landing → Formulario → Calendly → Confirmación
5. Revisar grabaciones de sesión cada 2 semanas para detectar dónde abandonan

Qué mirar en Clarity:
— ¿Hasta dónde hace scroll la mayoría? (si no llegan al CTA, mover el CTA arriba)
— ¿Dónde hacen click sin que haya ningún link? (elementos confusos)
— ¿Cuántos usuarios intentan salir antes de rellenar el formulario?
— Gratuito y sin límite de sesiones — no hay razón para no instalarlo

Fase 3 — CRO y optimización técnica

Semanas 9–12 · A/B testing · Core Web Vitals · Velocidad

3.1

Optimizar Core Web Vitals (velocidad)

Media

Objetivos y cómo conseguirlos:
LCP < 2.5 seg: Imagen hero en WebP con preload, CDN para estáticos
CLS < 0.1: Dimensiones fijas en imágenes y el widget de Calendly (min-height: 700px)
INP < 200ms: Diferir scripts de terceros con defer o async
TTFB < 600ms: Hosting con caché del servidor, evitar redirects

Medir con: pagespeed.web.dev antes y después de cada cambio

Scripts que deben cargarse en diferido:
— Google Tag Manager (usar async)
— Meta Pixel (cargar después del evento DOMContentLoaded)
— Microsoft Clarity (no es crítico para la carga inicial)
— Widget de Calendly (cargar solo cuando el usuario llega a la sección de booking)

Prioridad: primero el contenido visible, luego el tracking.

3.2

A/B testing de headlines y CTAs

Baja

Cómo hacerlo:
1. Usar Google Optimize (gratuito) o probar con 2 versiones de la URL
2. Empezar por lo que más impacto tiene: el headline del hero
3. Variante A: "Primera visita gratuita en Dental Basté"
4. Variante B: "Tu sonrisa perfecta empieza aquí — sin compromiso"
5. Mínimo 200 visitas por variante antes de decidir
6. Metric de éxito: tasa de click en el CTA principal

Elementos a testar (en orden de prioridad):
1. Headline del hero (mayor impacto)
2. Texto del botón CTA ("Reserva gratis" vs "Primera visita sin coste")
3. Formulario vs Calendly directo (¿qué convierte más?)
4. Posición del formulario (hero vs después de testimonios)

Testar uno a la vez, nunca varios cambios simultáneos.

Mapa de Conexiones Web

Qué envía cada elemento de la web y adónde

Elemento web	Destino	Qué envía	Fase
Formulario de captación	Gesden + Make	Nombre, email, teléfono, tratamiento → activa nurturing	F1
Widget Calendly	Gesden + Make + GA4	Cita confirmada → recordatorios automáticos + conversión	F1
Widget chatbot	Backend IA (Make/n8n)	Conversación → lead cualificado → Gesden	F0
GTM form_submit	GA4 + Meta Pixel	Evento Lead con tratamiento de interés	F0
GTM booking_completed	GA4 + Meta CAPI	Conversión de cita (para optimizar ads)	F0
Landing /escaparate	GA4 + Calendly	qr_scan_landing con utm_source=qr_escaparate	F1