7 min de lectura

Integración con Webflow

Añada Zenovay a cualquier sitio Webflow en menos de tres minutos. El soporte de primera clase para Custom Code de Webflow hace que esta sea una de las integraciones más limpias de cualquier CMS — pegue, publique, listo.

Webflow Custom Code requiere un Site Plan de pago (Basic, CMS, Business o Ecommerce) para el propio sitio. Los planes de Workspace por sí solos no son suficientes.

Inicio rápido

Paso	Dónde	Qué hacer
1	Panel de Zenovay	Copie su fragmento de seguimiento
2	Webflow Designer → Site settings → Custom code	Péguelo en Head code
3	Publique en su dominio `*.webflow.io` o personalizado	Haga clic en Publish
4	Panel de Zenovay	Los visitantes en tiempo real aparecen en ~30 segundos

Método 1: Custom Code en todo el sitio (Recomendado)

Webflow le permite insertar HTML en el <head> de cada página de su sitio a través de Site Settings. Este es el enfoque recomendado para cualquier analítica o píxel de marketing.

Paso a paso

Abra su proyecto en el Webflow Designer.
Haga clic en el icono de engranaje en la barra lateral izquierda para abrir Site Settings.
Vaya a la pestaña Custom Code.
En el campo Head code, pegue:

<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>

Desplácese hacia abajo y haga clic en Save Changes.
Vuelva al Designer y haga clic en Publish (arriba a la derecha) → seleccione sus dominios → Publish to Selected Domains.

Verificar

Abra su sitio publicado en incógnito y vea el código fuente — debería ver <script defer data-tracking-code=...> cerca de la parte superior de <head>. Su visita debería aparecer en la vista en tiempo real de Zenovay en 30 segundos.

Método 2: Custom Code por página

Si solo desea rastrear un subconjunto de páginas (p. ej., páginas de destino, no el subdirectorio de documentación), Webflow admite código Head por página:

En el Designer, seleccione la página en el panel Pages de la izquierda.
Haga clic en el icono de engranaje junto al nombre de la página → Page Settings.
Desplácese hasta Custom Code → Inside <head> tag.
Pegue el mismo fragmento.
Guarde y publique.

El Custom Code a nivel de página se añade después del código de todo el sitio, por lo que si lo pega en ambos lugares contará doble. Elija un solo ámbito.

Seguimiento de eventos personalizados

Después de que el script se carga (está diferido, así que espere a DOMContentLoaded), puede llamar a window.zenovay() desde cualquier script en línea o código personalizado de interacciones de Webflow:

Rastrear un clic en CTA

Añada un elemento HTML Embed junto a su botón CTA:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const cta = document.querySelector('[data-zv-cta]');
    if (!cta) return;
    cta.addEventListener('click', () => {
      if (window.zenovay) {
        window.zenovay('track', 'cta_clicked', {
          location: cta.dataset.zvCta,
          page: window.location.pathname,
        });
      }
    });
  });
</script>

Luego añada data-zv-cta="hero-primary" a su botón en el Designer (mediante la sección Custom attributes en la configuración del elemento).

Rastrear envíos de formularios

Los formularios nativos de Webflow emiten un evento submit al que puede suscribirse:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('form[data-name]').forEach(form => {
      form.addEventListener('submit', () => {
        if (window.zenovay) {
          window.zenovay('track', 'form_submitted', {
            form_name: form.getAttribute('data-name'),
            page: window.location.pathname,
          });
        }
      });
    });
  });
</script>

Identificar usuarios con sesión iniciada (Memberstack, Outseta, Memberspace)

Si usa un complemento de membresía para Webflow, identifique al visitante tan pronto como se conozca su sesión. Con Memberstack:

<script>
  window.$memberstackDom?.getCurrentMember().then(({ data: member }) => {
    if (member && window.zenovay) {
      window.zenovay('identify', {
        userId: member.id,
        email: member.auth?.email,
        plan: member.planConnections?.[0]?.planName,
      });
    }
  });
</script>

Seguimiento de Webflow Ecommerce

Si vende a través de Webflow Ecommerce, dispare un evento purchase en la página de confirmación de pedido (/order-confirmation/[order-id]):

Añada un elemento HTML Embed a la plantilla de su página de confirmación de pedido.
Pegue:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const total = document.querySelector('[data-wf-order-total]')?.textContent;
    const orderId = window.location.pathname.split('/').pop();
    if (window.zenovay && total) {
      window.zenovay('track', 'purchase', {
        transaction_id: orderId,
        revenue: parseFloat(total.replace(/[^0-9.]/g, '')),
        currency: 'USD', // ajuste si su tienda usa otra moneda
      });
    }
  });
</script>

Para una atribución de ingresos de alta precisión (reembolsos, impuestos, suscripciones), use webhooks del lado del servidor en Zenovay desde su cuenta de Stripe o Webflow Ecommerce — el seguimiento del lado del cliente puede perder pedidos si el comprador cierra la pestaña.

Requisitos del plan

Webflow Starter (gratuito): Custom Code está desactivado. Actualice a un Site Plan de pago.
Webflow Basic / CMS / Business / Ecommerce: Custom Code está completamente habilitado.
Solo plan de Workspace: no es suficiente por sí solo — necesita un Site Plan en el sitio real.

Problemas comunes

Site Settings vs Page Settings. El código Head de todo el sitio se aplica a todas las páginas, incluidas la 404, búsqueda y páginas con contraseña. El código Head específico de página solo se aplica a esa página. Si desea un solo rastreador para todo el sitio, use Site Settings — no mezcle ámbitos.

Webflow elimina las etiquetas <script> en las vistas previas de .webflow.io si su plan no incluye Custom Code. Asegúrese de estar en un Site Plan de pago antes de realizar pruebas.

El fragmento se ejecuta después de las interacciones de Webflow. Zenovay está diferido, por lo que se carga después del renderizado inicial. Esto es intencional — significa que no bloqueamos el paint. Si desea disparar un evento antes de que Zenovay se cargue, encóleo: window.zenovay = window.zenovay || function(){ (window.zenovay.q = window.zenovay.q || []).push(arguments); };

Las etiquetas <script> dentro de elementos HTML Embed se ejecutan. Webflow lo permite, pero tenga en cuenta que esto significa que puede instalar el script dos veces accidentalmente si pega el fragmento en un Embed en lugar de en Site Settings → Custom Code. Use Site Settings para el rastreador; use Embeds solo para el seguimiento de eventos específicos de página.

El HTML publicado de Webflow tiene mucho caché en el borde. Espere 1–2 minutos después de Publish antes de realizar pruebas. Fuerce la recarga con Cmd/Ctrl+Shift+R.

Resolución de problemas

Síntoma	Causa probable	Solución
Sin datos	Custom Code desactivado en el plan	Actualice a un Site Plan de pago
Sin datos	Sitio no publicado después de añadir el fragmento	Haga clic en Publish en el Designer
La mitad de las páginas rastreadas	Código Head a nivel de página anulando el de nivel de sitio	Mueva el fragmento solo a Site Settings
Vistas de página duplicadas	Fragmento pegado en Site Settings y en HTML Embed	Elimine uno
Los eventos no se disparan	El script de evento personalizado se ejecutó antes de que Zenovay se cargara	Envuelva en `DOMContentLoaded`

Privacidad y cumplimiento normativo

Añada data-cookieless="true" al fragmento para ejecutar en modo completamente sin cookies (sin cookies, sin almacenamiento local) — requerido para muchas implementaciones en la UE/RU antes de registrar cualquier consentimiento:

<script defer
        data-tracking-code="YOUR_TRACKING_CODE"
        data-cookieless="true"
        src="https://api.zenovay.com/z.js"></script>

Consulte Cumplimiento de Privacidad para un análisis completo.

Recursos relacionados

¿Necesita ayuda? Contacte a [email protected] o visite nuestro Centro de ayuda.