Ajoutez Zenovay à n'importe quel site Framer via Site Settings → Custom Code. Le snippet ne s'exécute que sur le site publié — c'est le comportement attendu.
Custom Code prend effet uniquement sur le site Framer publié. La prévisualisation ignore toujours Custom Code. Testez toujours l'URL en ligne, pas la prévisualisation dans l'éditeur.
Démarrage rapide
- Copiez votre snippet de suivi depuis le tableau de bord Zenovay.
- Dans Framer, ouvrez Site Settings → General → Custom Code.
- Collez-le dans Start of
<head>tag. - Cliquez sur Publish en haut à droite.
Installation
Custom Code pour tout le site (recommandée)
- Ouvrez votre projet dans Framer.
- Cliquez sur Site Settings (icône d'engrenage en haut du panneau gauche).
- Ouvrez l'onglet General.
- Faites défiler jusqu'à Custom Code.
- Collez ce snippet dans Start of
<head>tag :
<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>
- Cliquez en dehors du champ pour sauvegarder automatiquement.
- Cliquez sur Publish en haut à droite.
Custom Code par page
Pour ne suivre que des pages spécifiques :
- Sélectionnez la page dans le panneau Pages.
- Ouvrez les paramètres de droite de la page.
- Faites défiler jusqu'à Custom Code → Start of
<head>tag. - Collez le snippet.
- Publiez.
Ne combinez pas les snippets à l'échelle du site et par page — vous double-compterez.
Vérifier votre installation
- Ouvrez l'URL Framer publiée (
*.framer.appou votre domaine personnalisé) en navigation privée. - Consultez le code source et recherchez
<script defer data-tracking-code=...>dans le<head>. - Vérifiez la vue en temps réel Zenovay — votre visite apparaît en ~30 secondes.
La navigation SPA est gérée automatiquement
Framer affiche les pages comme une React SPA. Le tracker Zenovay (v2+) écoute history.pushState, history.replaceState et popstate et déclenche une page vue à chaque changement de route automatiquement. Vous n'avez pas besoin d'appeler window.zenovay('page') manuellement.
Suivi des événements personnalisés via Code Overrides
Créez un Code Override qui encapsule n'importe quel composant 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,
});
}}
/>
);
}
Appliquez via Frame → Code Overrides → withCtaTracking.
Suivi des soumissions de formulaires
Attachez un écouteur délégué sur document pour capturer chaque soumission de formulaire native :
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;
}
Dépannage
La prévisualisation ne montre pas de données. Custom Code s'exécute uniquement sur le site publié. Testez toujours l'URL en ligne.
Pas de données sur le plan Free. Custom Code nécessite un plan Framer payant (Mini et supérieur).
Trafic de l'éditeur qui pollue les analytics. La prévisualisation CMS de Framer se charge avec ?framer-publish=true. Filtrez ce paramètre de requête en utilisant les segments sauvegardés dans votre tableau de bord.
Les événements se déclenchent mais pas les pages vues lors d'un changement de route. Vous êtes sur une version du tracker plus ancienne. Re-copiez le snippet depuis votre tableau de bord Zenovay pour obtenir le tracker v2 qui gère la navigation SPA automatiquement.
Exigences du plan
| Plan | Custom Code |
|---|---|
| Free | ❌ |
| Mini | ✅ |
| Basic / Pro / Business | ✅ |
Confidentialité
Pour un suivi sans cookies, ajoutez data-cookieless="true" :
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
data-cookieless="true"
src="https://api.zenovay.com/z.js"></script>
Prochaines étapes
- Lisez le guide complet d'intégration Framer sur docs.zenovay.com pour des motifs avancés de Code Override.
- Configurez des objectifs de conversion.
- Besoin d'aide ? Contactez [email protected].