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 — esto es el comportamiento esperado.

Custom Code solo tiene efecto en el sitio Framer publicado. La vista previa siempre ignora Custom Code. Pruebe siempre la URL en vivo, no la vista previa del editor.

Inicio rápido

Copie su fragmento de seguimiento desde el panel de Zenovay.
En Framer, abra Site Settings → General → Custom Code.
Péguelo en Start of <head> tag.
Haga clic en Publish en la esquina superior derecha.

Instalación

Custom Code en todo el sitio (recomendado)

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.
Desplácese hasta Custom Code.
Pegue este fragmento en Start of <head> tag:

<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.

Custom Code por página

Para rastrear solo en páginas específicas:

Seleccione la página en el panel Pages.
Abra la configuración lateral derecha de la página.
Desplácese hasta Custom Code → Start of <head> tag.
Pegue el fragmento.
Publique.

No combine fragmentos de todo el sitio y por página — contará doble.

Verificar la instalación

Abra la URL Framer publicada (*.framer.app o su dominio personalizado) en incógnito.
Vea el código fuente y busque <script defer data-tracking-code=...> en el <head>.
Compruebe la vista en tiempo real de Zenovay — su visita aparece en ~30 segundos.

La navegación SPA se gestiona automáticamente

Framer renderiza las páginas como una React SPA. El rastreador de Zenovay (v2+) escucha history.pushState, history.replaceState y popstate y dispara una vista de página en cada cambio de ruta automáticamente. No necesita llamar a window.zenovay('page') manualmente.

Seguimiento de eventos personalizados mediante Code Overrides

Cree un Code Override que envuelva cualquier componente de Framer:

import type { ComponentType } from 'react';

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

Aplique mediante Frame → Code Overrides → withCtaTracking.

Seguimiento de envíos de formularios

Adjunte un listener delegado en document para capturar todos los envíos nativos de formularios:

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',
      });
    };
    document.addEventListener('submit', handler, true);
    return () => document.removeEventListener('submit', handler, true);
  }, []);
  return null;
}

Resolución de problemas

La vista previa no muestra datos. Custom Code solo se ejecuta en el sitio publicado. Pruebe siempre la URL en vivo.

Sin datos en el plan Free. Custom Code requiere un plan de pago de Framer (Mini y superiores).

El tráfico del editor contamina las analíticas. La vista previa del CMS de Framer se carga con ?framer-publish=true. Filtre ese parámetro de consulta usando segmentos guardados en su panel.

Los eventos se disparan pero las vistas de página no cambian en el cambio de ruta. Está usando una versión antigua del rastreador. Vuelva a copiar el fragmento desde su panel de Zenovay para obtener el rastreador v2 que gestiona la navegación SPA automáticamente.

Requisitos del plan

Plan	Custom Code
Free	❌
Mini	✅
Basic / Pro / Business	✅

Privacidad

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>

Siguientes pasos

Lea la guía completa de integración con Framer en docs.zenovay.com para patrones avanzados de Code Override.
Configure objetivos de conversión.
¿Necesita ayuda? Contacte a [email protected].