7 min de lectura

Integración con Framer

Añada Zenovay a cualquier sitio Framer a través de Site Settings → Custom Code. El fragmento solo se ejecuta en el sitio publicado — la vista previa ignora Custom Code, lo cual es normal.

Custom Code está disponible en todos los planes de pago de Framer (Mini y superiores). Los sitios Framer gratuitos no pueden añadir scripts de terceros.

Inicio rápido

Paso	Dónde	Qué hacer
1	Panel de Zenovay	Copie su fragmento de seguimiento
2	Framer → Site Settings → General → Custom Code	Péguelo en Start of `<head>` tag
3	Publicar	Haga clic en Publish en la esquina superior derecha
4	Panel de Zenovay	Los visitantes en tiempo real aparecen en ~30 segundos

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

El panel Custom Code de Framer inyecta HTML directamente en cada página publicada. Es el enfoque recomendado para cualquier etiqueta de analítica o marketing.

Paso a paso

Abra su proyecto en Framer.
Haga clic en Site Settings (icono de engranaje en la parte superior del panel izquierdo).
Abra la pestaña General si no está ya activa.
Desplácese hasta Custom Code.
En Start of <head> tag, pegue:

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

Haga clic fuera del campo para guardar automáticamente.
Haga clic en Publish en la parte superior derecha del editor. Custom Code no se aplica a la URL de vista previa — solo al sitio publicado en vivo.

Verificar

Abra la URL publicada de Framer (*.framer.app o su dominio personalizado) 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

Para el seguimiento específico de páginas (p. ej., solo sus páginas de destino de campaña), Framer también expone Custom Code por página:

Seleccione la página en el panel Pages.
Abra el panel lateral derecho de la página y desplácese hasta Custom Code.
Pegue el fragmento en Start of <head> tag para esa página.
Publique.

El Custom Code por página se añade después del código de todo el sitio. No pegue el rastreador en ambos — contará doble.

Seguimiento de eventos personalizados

Framer renderiza las páginas como una React SPA, pero el rastreador gestiona la navegación SPA automáticamente (escucha history.pushState). Para eventos personalizados puede llamar a window.zenovay() desde cualquier Code Override o Code Component de Framer.

Rastrear un clic en CTA con un Code Override

Cree un nuevo Code Override en Framer:

import type { ComponentType } from 'react';

export function withCtaTracking(Component): ComponentType {
  return (props) => {
    return (
      <Component
        {...props}
        onClick={(e) => {
          props.onClick?.(e);
          // @ts-ignore – global injected by tracker
          window.zenovay?.('track', 'cta_clicked', {
            location: props.id || 'unknown',
            page: typeof window !== 'undefined' ? window.location.pathname : '',
          });
        }}
      />
    );
  };
}

Aplique el override a su frame CTA mediante Frame → Code Overrides → withCtaTracking.

Rastrear envíos de formularios

Los formularios de Framer se envían a través de un iframe oculto. Escuche el evento submit del formulario en un Code Override o en un override global adjunto a la raíz de la página:

import { useEffect } from 'react';

export function useTrackFormSubmits() {
  useEffect(() => {
    const handler = (e: Event) => {
      const form = e.target as HTMLFormElement;
      if (!form?.matches('form')) return;
      // @ts-ignore
      window.zenovay?.('track', 'form_submitted', {
        form_id: form.id || form.getAttribute('name') || 'unnamed',
        page: window.location.pathname,
      });
    };
    document.addEventListener('submit', handler, true);
    return () => document.removeEventListener('submit', handler, true);
  }, []);
  return null;
}

Identificar usuarios con sesión iniciada (si usa Framer Auth o un proveedor de terceros)

Si ha conectado Framer a un proveedor de autenticación externo (Memberstack, Outseta, Clerk, etc.), llame a window.zenovay('identify', ...) desde el callback onSignIn del proveedor de autenticación. No hay autenticación nativa en Framer a la que conectarse directamente.

Requisitos del plan

Plan	Custom Code	Dominio personalizado
Free	❌	❌
Mini	✅	✅
Basic	✅	✅
Pro	✅	✅
Business	✅	✅

Problemas comunes

La vista previa ignora Custom Code. Esta es la sorpresa n.º 1. La vista previa del editor de Framer (el botón de reproducción) renderiza la página sin su Custom Code. Debe hacer clic en Publish y probar la URL en vivo — probar la vista previa siempre mostrará "script de Zenovay no cargado".

Localhost / dominios personalizados. Si usa un dominio personalizado a través del alojamiento de Framer, Custom Code funciona igual que en *.framer.app. Si está exportando Framer para autoalojar como HTML estático, tendrá que pegar el fragmento manualmente en su index.html exportado — la exportación estática de Framer no incluye actualmente Custom Code en el bundle.

La navegación SPA está gestionada. Framer usa React internamente. El rastreador de Zenovay (≥v2) escucha history.pushState y dispara una vista de página en cada cambio de ruta, por lo que no necesita llamar a window.zenovay('trackPageView') manualmente.

Secciones de carga diferida. El patrón "appear when scrolled into view" de Framer no afecta al rastreador — el script vive en <head> y se ejecuta en el primer paint independientemente de la visibilidad de las secciones.

Ruido del modo de prueba. La vista previa del CMS de Framer carga las páginas con un parámetro de consulta ?framer-publish=true. Si desea excluir el tráfico del editor, filtre ese parámetro de consulta en el panel de Zenovay mediante segmentos guardados.

Resolución de problemas

Síntoma	Causa probable	Solución
La vista previa no muestra datos	Custom Code solo se ejecuta en el sitio publicado	Haga clic en Publish y pruebe la URL en vivo
Sin datos en el plan Free	Custom Code desactivado en Free	Actualice a Mini o superior
Algunas páginas rastreadas, otras no	Custom Code por página anulando	Mueva a Custom Code de todo el sitio
Vistas de página duplicadas	Fragmento en el slot de todo el sitio y por página	Elija un solo ámbito
Los eventos se disparan pero las vistas de página no	Versión del rastreador anterior a v2 (sin soporte SPA)	Vuelva a copiar el fragmento desde el panel

Privacidad y cumplimiento normativo

Para el seguimiento sin cookies, añada data-cookieless="true":

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

Consulte Cumplimiento de Privacidad para obtener todos los detalles.

Recursos relacionados

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