6 min de lecture

Intégration Framer

Ajoutez Zenovay à n'importe quel site Framer via Site Settings → Custom Code. Le snippet ne s'exécute que sur le site publié — la prévisualisation ignore Custom Code, ce qui est normal.

Custom Code est disponible sur tous les plans Framer payants (Mini et supérieur). Les sites Framer gratuits ne peuvent pas ajouter de scripts tiers.

Démarrage rapide

Étape	Où	Ce que vous faites
1	Tableau de bord Zenovay	Copiez votre snippet de suivi
2	Framer → Site Settings → General → Custom Code	Collez-le dans Start of `<head>` tag
3	Publiez	Cliquez sur Publish en haut à droite
4	Tableau de bord Zenovay	Les visiteurs en temps réel apparaissent en ~30 secondes

Méthode 1 : Custom Code pour tout le site (recommandée)

Le panneau Custom Code de Framer injecte du HTML directement dans chaque page publiée. C'est l'approche prise en charge pour tout tag d'analytics ou de marketing.

Étape par étape

Ouvrez votre projet dans Framer.
Cliquez sur Site Settings (icône d'engrenage en haut du panneau gauche).
Ouvrez l'onglet General si ce n'est pas déjà le cas.
Faites défiler jusqu'à Custom Code.
Dans Start of <head> tag, collez :

<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 de l'éditeur. Custom Code ne s'applique pas à l'URL de prévisualisation — uniquement au site publié en ligne.

Vérifier

Ouvrez l'URL Framer publiée (*.framer.app ou votre domaine personnalisé) en navigation privée et consultez le code source. Vous devriez voir <script defer data-tracking-code=...> près du début de <head>. Votre visite devrait apparaître dans la vue en temps réel Zenovay en ~30 secondes.

Méthode 2 : Custom Code par page

Pour un suivi spécifique à une page (par exemple, uniquement vos landing pages de campagne), Framer expose également Custom Code par page :

Sélectionnez la page dans le panneau Pages.
Ouvrez le panneau de droite de la page et faites défiler jusqu'à Custom Code.
Collez le snippet dans Start of <head> tag pour cette page.
Publiez.

Le Custom Code par page est ajouté après le code à l'échelle du site. Ne collez pas le tracker dans les deux — vous double-compterez.

Suivi des événements personnalisés

Framer affiche les pages comme une React SPA, mais le tracker gère la navigation SPA automatiquement (il écoute history.pushState). Pour les événements personnalisés, vous pouvez appeler window.zenovay() depuis n'importe quel Code Override ou Code Component Framer.

Suivre un clic sur un CTA avec un Code Override

Créez un nouveau Code Override dans 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 : '',
          });
        }}
      />
    );
  };
}

Appliquez l'override à votre frame CTA via Frame → Code Overrides → withCtaTracking.

Suivre les soumissions de formulaires

Les formulaires Framer soumettent via un iframe caché. Écoutez l'événement submit du formulaire dans un Code Override ou dans un override global attaché à la racine de la page :

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;
}

Identifier les utilisateurs connectés (si vous utilisez Framer Auth ou un tiers)

Si vous avez connecté Framer à un fournisseur d'authentification externe (Memberstack, Outseta, Clerk, etc.), appelez window.zenovay('identify', ...) depuis le callback onSignIn du fournisseur d'authentification. Il n'y a pas d'authentification native dans Framer à connecter directement.

Exigences du plan

Plan	Custom Code	Domaine personnalisé
Free	❌	❌
Mini	✅	✅
Basic	✅	✅
Pro	✅	✅
Business	✅	✅

Pièges courants

La prévisualisation ignore Custom Code. C'est la surprise n°1. La prévisualisation dans l'éditeur Framer (le bouton play) affiche la page sans votre Custom Code. Vous devez cliquer sur Publish et tester l'URL en ligne — tester la prévisualisation affichera toujours « aucun script Zenovay chargé ».

Localhost / domaines personnalisés. Si vous utilisez un domaine personnalisé via l'hébergement Framer, Custom Code fonctionne de la même manière que sur *.framer.app. Si vous exportez Framer pour l'héberger vous-même en HTML statique, vous devrez coller le snippet manuellement dans votre index.html exporté — l'export statique de Framer n'inclut pas actuellement Custom Code dans le bundle.

La navigation SPA est gérée. Framer est basé sur React. Le tracker Zenovay (≥v2) écoute history.pushState et déclenche une page vue à chaque changement de route, donc vous n'avez pas besoin d'appeler window.zenovay('trackPageView') manuellement.

Sections chargées en différé. Le motif « apparaît lors du défilement dans la vue » de Framer n'affecte pas le tracker — le script vit dans <head> et s'exécute dès le premier rendu, quelle que soit la visibilité des sections.

Bruit du mode test. La prévisualisation CMS de Framer charge les pages avec un paramètre de requête ?framer-publish=true. Si vous souhaitez exclure le trafic de l'éditeur, filtrez ce paramètre de requête au niveau du tableau de bord Zenovay via les segments sauvegardés.

Dépannage

Symptôme	Cause probable	Solution
La prévisualisation ne montre pas de données	Custom Code s'exécute uniquement sur le site publié	Cliquez sur Publish et testez l'URL en ligne
Pas de données sur le plan Free	Custom Code désactivé sur Free	Passez à Mini ou supérieur
Certaines pages suivies, d'autres non	Custom Code par page remplace le global	Déplacez vers Custom Code à l'échelle du site
Pages vues en double	Snippet dans l'emplacement global et par page	Choisissez une seule portée
Les événements se déclenchent mais pas les pages vues	Version du tracker antérieure à v2 (pas de support SPA)	Re-copiez le snippet depuis le tableau de bord

Confidentialité et conformité

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>

Consultez la Conformité à la confidentialité pour tous les détails.

Ressources associées

Besoin d'aide ? Contactez [email protected] ou visitez notre Centre d'aide.