Quand on construit un site sur Webflow, tout est optimisé pour créer une expérience fluide : design léché, interactions millimétrées, animations propres…
Mais une fois le site en ligne, une question revient systématiquement :
👉 “Qu’est-ce que les visiteurs font vraiment sur mon site ?”
Et là, soyons honnêtes :
– GA4 donne des chiffres dans tous les sens
– Webflow donne.. rien
– mais rien ne montre ce qui bloque réellement la conversion.
C’est exactement le problème que PostHog résout.
Dans ce guide, on va voir :
1️⃣ Ce qu’est PostHog (et ce que ça change par rapport à GA4)
2️⃣ Pourquoi c’est un combo redoutable avec Webflow
3️⃣ Comment l’installer proprement (Custom Code + GTM)
4️⃣ Ce que PostHog track automatiquement
5️⃣ Les limites à connaître
1. C’est quoi PostHog ? (la version claire et utile)
Si GA4 vous dit “ce qui se passe”, PostHog explique “pourquoi ça se passe”.
PostHog est une plateforme d’analytics produit centrée sur l’utilisateur : au lieu de se limiter aux sessions et pages vues, il analyse les actions réelles dans votre interface.
Voici ce que PostHog apporte (avec exemples concrets)
Session recordings
Vous regardez littéralement des enregistrements réels :
- un utilisateur rage-click sur un CTA qui n’est pas cliquable
- quelqu’un scrolle 6 fois sans comprendre où aller
- un formulaire bug et personne ne vous le dit
C’est l’outil qui révèle ce qui n’apparaît dans aucun tableau GA4.
Analytics d’événements
Vous trackez :
- clics sur CTA
- interactions avec un carrousel
- abandon d’un formulaire
- ouverture d’un menu
Idéal pour comprendre vos tunnels de conversion.
Heatmaps
Pour visualiser :
- où les gens cliquent
- où l’attention chute
- quelles sections sont complètement ignorées
Feature Flags & A/B Tests
Pour afficher des versions différentes selon l’utilisateur ou lancer des tests simples sans coder avec une granularité assez forte
2. Pourquoi utiliser PostHog avec Webflow ?
Webflow est puissant pour créer — mais pas pour analyser finement.
Voici ce que PostHog change réellement.
1. Sortir des vanity metrics
1000 visiteurs, c’est bien.
Savoir que 95% ignorent votre section “valeurs” mais 62% vont voir la pricing page, c’est mieux.
2. Débuguer votre UX (en vrai)
Vous avez passé 5h à concevoir une interaction dans Webflow…
Et PostHog vous montre que la moitié des utilisateurs ne la comprend pas.
C’est brutal, mais précieux.
3. Comprendre vos conversions
Pour un site Webflow orienté lead :
- funnel “page d’accueil → formulaire”
- étapes exactes où les gens décrochent
- taux de succès par appareil
4. RGPD & confidentialité
Contrairement à GA4, PostHog offre :
- un cloud hébergé en Europe
- ou une version auto-hébergée
C'estidéal pour des entreprises sensibles à la conformité.
5. Avoir un outil tout-en-un
Pour avoir les heatmaps, les analytics, les intégrations externes il faudrait peut-être 3 outils.
Là Posthog fait tout, ça évite de switcher entre différents outils (et impacter
3. Installation sur Webflow (2 méthodes)
Méthode 1 : via le Custom Code Webflow (la plus simple)
Nécessite un plan de site Webflow (Basic, CMS, Business ou Ecommerce).
Étape 1 : Récupérer le snippet
Dans PostHog → Project → General → “Web snippet” → copiez le code contenant votre clé API.
Étape 2 : Ajouter dans Webflow
Webflow → Project Settings → Custom Code → onglet Head Code → collez le snippet.
Étape 3 : Publier et vérifier
Publiez → naviguez sur votre site → retournez sur PostHog → les premiers événements doivent apparaître.
Méthode 2 : Installer PostHog via Google Tag Manager (GTM)
Beaucoup d’équipes marketing préfèrent GTM car :
- plus simple pour mettre à jour
- pas besoin de republier Webflow
- meilleure gouvernance (les marketers font le tracking, pas les devs)
Étapes rapides
- Dans GTM → “New Tag”
- Type : Custom HTML
- Collez le snippet PostHog
- Trigger : All Pages
- Publish
Et c’est tout.
4. Ce que PostHog track automatiquement (et ce qui nécessite des events)
Auto-track (sans rien faire)
PostHog capture automatiquement :
- pages vues
- clics
- scroll
- sessions
- enregistrements
- heatmaps
Idéal pour commencer en 5 min.
À configurer manuellement pour aller plus loin
Pour un usage “pro”, il est conseillé d’ajouter des events personnalisés Webflow :
- clic sur CTA clé
- abandon de formulaire
- conversion sur étape du funnel
- clic sur élément important du menu
- interactions avec des tabs / sliders
Exemple simple à placer dans un embed Webflow pour un click sur un élément qui a l'ID "cta-hero"
<script>
document.getElementById("cta-hero").addEventListener("click", () => { posthog.capture("cta_hero_clicked");});
</script>
Ou alors à mettre dans un Tag GTM avec un trigger spécifique à ce même élément :
5. Les limites à connaître
Même si PostHog est excellent, autant être transparent :
> Les recordings peuvent consommer plus de bande passante
Il faut configurer un échantillonnage (ex : 20% des sessions).
> La prise en main demande un minimum de temps
Ce n’est pas un “outil magique”, c’est un vrai outil d’analyse produit.
> Si votre site Webflow est extrêmement animé, les heatmaps peuvent être moins fiables
C'est pas spécifique à Posthog pour le coup mais à tous les outils de ce type (Hotjar, Clarity etc..).
Conclusion
Installer PostHog sur Webflow, c’est passer d’une vision floue de votre trafic à une compréhension très précise du comportement réel de vos utilisateurs.
C’est aussi un moyen :
- d’améliorer votre UX
- d’augmenter votre conversion
- d’identifier des bugs invisibles
- et de prendre de meilleures décisions produit / marketing.
.svg)
