A/B Testing — Visasyst

Total landings

—

Visitas

—

Conversiones

—

Valor total

—

Coste campaña

—

ROAS total

—

Suma % tráfico

—

Rendimiento por landing —

Landing ID	URL	Estado	% Tráfico	Visitas	Conversiones	Conv %	Valor total	Ticket medio	Coste landing	ROAS
Cargando datos...

⚠ Los porcentajes de tráfico de las landings ACTIVAS no suman 100%
El sistema funcionará igualmente distribuyendo el tráfico de forma proporcional a la suma total actual. Para mayor control ajusta los pesos para que sumen exactamente 100%.

Coste de campaña

Coste total invertido (€)

Landings —

Landing ID	URL	% Tráfico	Estado	Acciones
Cargando...

Añadir nueva landing

URL completa

Landing ID (auto)

% de tráfico

ℹ Importante — Nuevo producto
Cada nuevo producto a testear debe tener su propio proyecto en Supabase. Crea un proyecto nuevo, ejecuta el SQL completo y sustituye en cada script la URL del proyecto y la API Key anon por los valores del nuevo proyecto.

01 Script Distribuidor distribuidor.html

Qué hace: Página HTML independiente que actúa como punto de entrada del tráfico. Lee las landings activas de Supabase, elige una aleatoriamente según los porcentajes configurados, registra la visita y redirige al usuario añadiendo ?lp=landing_id a la URL.

Dónde pegarlo: Es un fichero HTML completo. Súbelo a Vercel, Grav o cualquier hosting estático como página independiente. La URL de esta página es la que se usa en los anuncios y campañas.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Redirigiendo...</title>
  <style>
    body { font-family: sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #f9f9f9; color: #555; }
  </style>
</head>
<body>
  <p>Redirigiendo...</p>
  <script>
  (function () {
    const CONFIG = {
      supabase_url: 'PON TU SUPABASE URL AQUÍ/rest/v1',
      supabase_key: 'PON TU SUPABASE ANON KEY AQUÍ',
      fallback_url: 'PON TU URL DE FALLBACK AQUÍ'
    };
    function headers() {
      return { 'apikey': CONFIG.supabase_key, 'Authorization': 'Bearer ' + CONFIG.supabase_key, 'Content-Type': 'application/json' };
    }
    async function getLandings() {
      const url = \`\${CONFIG.supabase_url}/ab_landings?activa=eq.true&select=landing_id,url,porcentaje\`;
      const res = await fetch(url, { method: 'GET', headers: headers(), credentials: 'omit' });
      return await res.json();
    }
    function elegirLanding(landings) {
      const total = landings.reduce((acc, l) => acc + parseFloat(l.porcentaje), 0);
      let rand = Math.random() * total;
      for (const landing of landings) { rand -= parseFloat(landing.porcentaje); if (rand <= 0) return landing; }
      return landings[landings.length - 1];
    }
    function registrarVisita(landing_id, url_landing) {
      const endpoint = \`\${CONFIG.supabase_url}/rpc/registrar_visita_distribuidor\`;
      fetch(endpoint, { method: 'POST', headers: headers(), body: JSON.stringify({ p_landing_id: landing_id, p_url_landing: url_landing }), keepalive: true, credentials: 'omit' })
        .catch(err => console.warn('[AB Distribuidor] Error registrando visita:', err));
    }
    async function init() {
      try {
        const landings = await getLandings();
        if (!landings || landings.length === 0) { window.location.replace(CONFIG.fallback_url); return; }
        const landing = elegirLanding(landings);
        registrarVisita(landing.landing_id, landing.url);
        const separator = landing.url.includes('?') ? '&' : '?';
        window.location.replace(\`\${landing.url}\${separator}lp=\${encodeURIComponent(landing.landing_id)}\`);
      } catch (err) { window.location.replace(CONFIG.fallback_url); }
    }
    init();
  })();
  <\/script>
</body>
</html>

02 Script Landing y Pasos Intermedios script_landing.html

Qué hace: Captura el parámetro ?lp=xxx de la URL y lo guarda en sessionStorage como respaldo. Lo propaga automáticamente en todos los enlaces internos y formularios para que llegue hasta la thank you page.

Dónde pegarlo: Justo antes del </body> en cada landing a testear y en cada página intermedia del funnel (formularios, pasos intermedios). No es necesario en el distribuidor ni en la thank you page.

Configura dominios_permitidos con los dominios a los que apuntan tus CTAs.

<!-- ABTESTING -->
<script>
(function () {
  const CONFIG = {
    param: 'lp',
    dominios_permitidos: [
      'PON AQUI TU DOMINIO DESTINO',   // dominio destino de los CTAs
      'DOMINIO-DE-PRUEBAS.vercel.app'  // eliminar en producción
    ]
  };
  function capturarLp() {
    const params = new URLSearchParams(window.location.search);
    const lp = params.get(CONFIG.param);
    if (lp) { sessionStorage.setItem('ab_lp', lp); }
  }
  function getLp() {
    const params = new URLSearchParams(window.location.search);
    return params.get(CONFIG.param) || sessionStorage.getItem('ab_lp') || null;
  }
  function dominioPermitido(hostname) {
    return CONFIG.dominios_permitidos.some(d => hostname === d || hostname.endsWith('.' + d));
  }
  function inyectarLp(href, lp) {
    if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) return href;
    try {
      const url = new URL(href, window.location.origin);
      if (!dominioPermitido(url.hostname)) return href;
      if (url.searchParams.has(CONFIG.param)) return href;
      url.searchParams.set(CONFIG.param, lp);
      return url.toString();
    } catch (e) { return href; }
  }
  function propagarEnDOM(lp) {
    document.querySelectorAll('a[href]').forEach(el => {
      const nuevo = inyectarLp(el.getAttribute('href'), lp);
      if (nuevo !== el.getAttribute('href')) el.href = nuevo;
    });
  }
  function propagarEnClicks(lp) {
    document.addEventListener('click', function (e) {
      const el = e.target.closest('a[href]');
      if (!el) return;
      const nuevo = inyectarLp(el.getAttribute('href'), lp);
      if (nuevo !== el.getAttribute('href')) el.href = nuevo;
    }, true);
  }
  function propagarEnForms(lp) {
    document.querySelectorAll('form').forEach(form => {
      if (!form.querySelector(\`input[name="\${CONFIG.param}"]\`)) {
        const input = document.createElement('input');
        input.type = 'hidden'; input.name = CONFIG.param; input.value = lp;
        form.appendChild(input);
      }
    });
  }
  function init() {
    capturarLp();
    const lp = getLp();
    if (!lp) { console.warn('[AB Landing] No se encontró parámetro lp.'); return; }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', function () { propagarEnDOM(lp); propagarEnForms(lp); });
    } else { propagarEnDOM(lp); propagarEnForms(lp); }
    propagarEnClicks(lp);
  }
  init();
})();
<\/script>
<!-- /ABTESTING -->

03 Script Thank You Page script_thankyou.html

Qué hace: Lee el parámetro ?lp=xxx (desde la URL o desde sessionStorage como fallback) y registra en Supabase la conversión con su valor económico, asociándola a la landing de origen.

Dónde pegarlo: Justo antes del </body> en la thank you page únicamente.

Configura valor_fijo con el importe de cada conversión (ej: 29.99).

<script>
(function () {
  const CONFIG = {
    supabase_url: 'PON TU SUPABASE URL AQUÍ/rest/v1',
    supabase_key: 'PON TU SUPABASE ANON KEY AQUÍ',
    param:        'lp',
    valor_fijo:   0  // valor económico fijo por conversión (ej: 29.99)
  };
  function getLp() {
    const params = new URLSearchParams(window.location.search);
    return params.get(CONFIG.param) || sessionStorage.getItem('ab_lp') || null;
  }
  function registrarConversion(lp) {
    const endpoint = \`\${CONFIG.supabase_url}/rpc/registrar_conversion_distribuidor\`;
    fetch(endpoint, {
      method: 'POST',
      headers: { 'apikey': CONFIG.supabase_key, 'Authorization': 'Bearer ' + CONFIG.supabase_key, 'Content-Type': 'application/json' },
      body: JSON.stringify({ p_landing_id: lp, p_valor: CONFIG.valor_fijo }),
      keepalive: true, credentials: 'omit'
    })
    .then(res => { if (res.ok) console.log('[AB TYP] Conversión registrada.'); else res.text().then(t => console.warn('[AB TYP] Error:', t)); })
    .catch(err => console.warn('[AB TYP] Error de red:', err));
  }
  function init() {
    const lp = getLp();
    if (!lp) { console.warn('[AB TYP] No se encontró parámetro lp.'); return; }
    registrarConversion(lp);
  }
  init();
})();
<\/script>