7 min de lecture

Intégration Webflow

Ajoutez Zenovay à n'importe quel site Webflow en moins de trois minutes. La prise en charge first-class du Custom Code par Webflow fait de cette intégration l'une des plus propres de tous les CMS — collez, publiez, c'est fait.

Webflow Custom Code nécessite un Site Plan payant (Basic, CMS, Business ou Ecommerce) sur le site lui-même. Les plans Workspace seuls ne sont pas suffisants.

Démarrage rapide

Étape	Où	Ce que vous faites
1	Tableau de bord Zenovay	Copiez votre snippet de suivi
2	Webflow Designer → Site settings → Custom code	Collez-le dans Head code
3	Publiez sur votre domaine `*.webflow.io` ou personnalisé	Cliquez sur Publish
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)

Webflow vous permet d'injecter du HTML dans le <head> de chaque page de votre site via Site Settings. C'est l'approche prise en charge pour tout pixel d'analytics ou de marketing.

Étape par étape

Ouvrez votre projet dans le Webflow Designer.
Cliquez sur l'icône d'engrenage dans la barre latérale gauche pour ouvrir Site Settings.
Allez dans l'onglet Custom Code.
Dans le champ Head code, collez :

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

Faites défiler vers le bas et cliquez sur Save Changes.
Revenez au Designer et cliquez sur Publish (en haut à droite) → sélectionnez vos domaines → Publish to Selected Domains.

Vérifier

Ouvrez votre site publié 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

Si vous souhaitez ne suivre qu'un sous-ensemble de pages (par exemple des landing pages, pas le sous-répertoire docs), Webflow prend en charge le code Head par page :

Dans le Designer, sélectionnez la page dans le panneau Pages à gauche.
Cliquez sur l'icône d'engrenage à côté du nom de la page → Page Settings.
Faites défiler jusqu'à Custom Code → Inside <head> tag.
Collez le même snippet.
Sauvegardez et publiez.

Le Custom Code au niveau de la page est ajouté après le code à l'échelle du site — si vous collez dans les deux endroits, vous double-compterez. Choisissez une portée.

Suivi des événements personnalisés

Une fois le script chargé (il est différé, attendez donc DOMContentLoaded), vous pouvez appeler window.zenovay() depuis n'importe quel script inline ou code personnalisé d'interactions Webflow :

Suivre un clic sur un CTA

Insérez un élément HTML Embed à côté de votre bouton 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>

Ajoutez ensuite data-zv-cta="hero-primary" à votre bouton dans le Designer (via la section Custom attributes dans les paramètres de l'élément).

Suivre les soumissions de formulaires

Les formulaires natifs Webflow émettent un événement submit que vous pouvez écouter :

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

Identifier les utilisateurs connectés (Memberstack, Outseta, Memberspace)

Si vous utilisez un add-on d'adhésion Webflow, identifiez le visiteur dès que sa session est connue. Avec 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>

Suivi des achats Webflow Ecommerce

Si vous vendez via Webflow Ecommerce, déclenchez un événement purchase sur la page de confirmation de commande (/order-confirmation/[order-id]) :

Ajoutez un HTML Embed à votre template de page de confirmation de commande.
Collez :

<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', // adjust if your store uses another currency
      });
    }
  });
</script>

Pour une attribution de revenus précise (remboursements, taxes, abonnements), utilisez plutôt des webhooks côté serveur depuis votre compte Stripe ou Webflow Ecommerce — le suivi côté client peut manquer des commandes si l'acheteur ferme l'onglet.

Exigences du plan

Webflow Starter (gratuit) : Custom Code est désactivé. Passez à un Site Plan payant.
Webflow Basic / CMS / Business / Ecommerce : Custom Code est entièrement activé.
Plan Workspace uniquement : insuffisant en soi — vous avez besoin d'un Site Plan sur le site lui-même.

Pièges courants

Site Settings vs Page Settings. Le code Head à l'échelle du site s'applique à toutes les pages, y compris les pages 404, de recherche et protégées par mot de passe. Le code Head spécifique à une page ne s'applique qu'à cette page. Si vous voulez un seul tracker pour tout le site, utilisez Site Settings — ne mélangez pas les portées.

Webflow supprime les balises <script> dans les prévisualisations .webflow.io si votre plan n'inclut pas Custom Code. Assurez-vous d'être sur un Site Plan payant avant de tester.

Le snippet s'exécute après les interactions Webflow. Zenovay est différé, donc il se charge après le rendu initial. C'est intentionnel — cela signifie que nous ne bloquons pas l'affichage. Si vous souhaitez déclencher un événement avant que Zenovay soit chargé, mettez-le en file d'attente : window.zenovay = window.zenovay || function(){ (window.zenovay.q = window.zenovay.q || []).push(arguments); };

<script> dans les éléments HTML Embed est exécuté. Webflow le permet, mais sachez que cela signifie que vous pouvez accidentellement double-installer si vous collez le snippet dans un Embed au lieu de Site Settings → Custom Code. Utilisez Site Settings pour le tracker ; n'utilisez les Embeds que pour le suivi d'événements spécifiques à une page.

Le HTML publié de Webflow est fortement mis en cache en périphérie. Attendez 1 à 2 minutes après Publish avant de tester. Forcez le rechargement avec Cmd/Ctrl+Shift+R.

Dépannage

Symptôme	Cause probable	Solution
Pas de données	Custom Code désactivé sur le plan	Passez à un Site Plan payant
Pas de données	Site non publié depuis l'ajout du snippet	Cliquez sur Publish dans le Designer
La moitié des pages suivies	Code Head au niveau de la page remplace le niveau du site	Déplacez le snippet vers Site Settings uniquement
Pages vues en double	Snippet collé dans Site Settings et HTML Embed	Supprimez-en un
Événements ne se déclenchent pas	Le script d'événement personnalisé s'est exécuté avant le chargement de Zenovay	Encapsulez dans `DOMContentLoaded`

Confidentialité et conformité

Ajoutez data-cookieless="true" au snippet pour fonctionner en mode entièrement sans cookies (pas de cookies, pas de stockage local) — requis pour de nombreux déploiements UE/RU avant qu'un consentement soit enregistré :

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