Créer une section d'articles populaires Webflow sans code avec une liste de collection CMS

Mise à jour, octobre 2026 : il s'agit d'un contournement de 2021, et deux de ses briques ont disparu depuis. Universal Analytics a cessé de traiter les données le 1er juillet 2023, ce qui a cassé le module complémentaire Google Analytics pour Google Sheets utilisé ci-dessous, et Webflow a déprécié le 31 mars 2025 l'API v1 que nous appelons depuis Google Sheets. L'approche reste valable comme trace de notre méthode à l'époque. Pour la reproduire aujourd'hui, il vous faut GA4 (le module API Connector utilisé à l'étape 3 propose un connecteur Google Analytics (GA4) intégré ; vérifiez sa tarification actuelle, car ses connecteurs OAuth ont nécessité un forfait payant au-delà de l'essai gratuit) et l'API v2 de Webflow.

On ne va pas se mentir : ça n'a pas été simple. Il a fallu beaucoup d'essais et d'erreurs, mais on y est arrivés. Il existe sans doute des solutions bien plus simples, qui interrogent directement l'API Webflow et l'API Google Analytics, puis utilisent l'API Webflow pour renvoyer les pages vues dans Webflow. Mais nous avons choisi Webflow comme plateforme parce que nous ne sommes pas développeurs, nous sommes un studio Webflow, et nous voulions du no-code. Promis, c'est une solution no-code : du copier-coller et quelques compétences de tableur. Nous réfléchissions à cette question depuis un moment et avions la moitié d'une solution depuis quelques mois, mais nous avions laissé tomber (nous en avions parlé sur le forum Webflow à l'époque, mais ce fil n'est plus disponible). Bref, aujourd'hui, en attendant le retour d'un client sur Figma, nous avons décidé de la faire fonctionner, et étonnamment, cette fois, nous avons trouvé. Elle ne tourne que depuis quelques heures, mais nous avons ajouté un nouvel article au blog, nous l'avons publié, nous avons cliqué dessus, et un peu plus tard Zapier a mis à jour les pages vues dans Webflow pour ce nouvel article aussi. Alors c'est parti.

Commençons par le début. Nous partons du principe que vous n'avez défini aucun champ obligatoire dans votre CMS, car sinon il faut les renseigner pour mettre à jour un élément publié via Zapier ; avec cette hypothèse, tout est plus simple. (Si vous avez des champs obligatoires, il faudra les remplir dans Zapier avec les données de la feuille d'export des articles Webflow que nous créerons plus loin.)

Notre idée de départ était la suivante : si nous pouvions sortir les pages vues de nos articles de blog de Google Analytics vers un tableur Google, nous pourrions alimenter la liste de collection avec un champ de pages vues dans Webflow, puis simplement trier la liste de collection selon ce champ. C'est devenu plus compliqué, et précisons d'emblée que si vous avez une meilleure solution, ou pouvez simplifier ne serait-ce qu'une étape ci-dessous, n'hésitez pas à commenter pour nous le dire. Nous avons demandé à plusieurs experts Webflow et, jusqu'ici, il n'existe pas de méthode facile. Nous voulons que ce soit le plus simple possible, et c'est facile à mettre en place, mais pas ultra simple pour l'instant ; en tant que designers Webflow, c'est un échec de notre part pour le moment.

Quoi qu'il en soit, comme nous le disions, notre hypothèse était fausse. Il ne nous fallait pas seulement les pages vues ; pour mettre à jour un article via Zapier, il nous fallait trois choses :

• L'article (l'ID de l'élément de la liste de collection)
• Le nom de l'article (le nom de l'élément de la liste de collection)
• Les pages vues de l'article correspondant dans Google Analytics

Malheureusement, il n'existe pas de moyen simple d'extraire simplement le nom et l'ID depuis Webflow avec Zapier ou presque n'importe quel autre outil sans passer par l'API, et nous ne voulions rien de tout ça. Nous avons donc imaginé une solution qui fait tooouuut cela dans un tableur Google, puis utilise Zapier pour pousser les pages vues vers Webflow.

Commençons par lister ce dont vous aurez besoin, et pourquoi :

• Google Analytics : il vous servira à suivre vos pages vues, et il faut utiliser Google Universal Analytics et non GA4, car le module complémentaire Google Analytics pour Google Sheets fonctionne avec UA et non GA4 (en 2021, en tout cas ; voir la note de mise à jour en haut). Pour configurer Google Analytics dans Webflow, suivez cet article sur l'installation de Google Tag Manager puis cet article sur l'ajout de Google Analytics avec Tag Manager.
• Un Google Sheet pour tout faire. C'est gratuit, il suffit de s'inscrire. Votre Google Sheet comprendra un import planifié depuis Google Analytics, un import planifié de votre liste de collection de blog depuis Webflow et quelques feuilles supplémentaires pour les calculs et le nettoyage. Vous pourriez probablement le faire avec bien moins d'efforts que nous, mais nos compétences en tableur sont nulles aussi ; si vous pouvez simplifier quoi que ce soit, dites-le-nous dans les commentaires.
• Le module complémentaire Google Analytics pour Google Sheets (n'est plus disponible, voir la note de mise à jour). Nous l'avons installé depuis le Workspace Marketplace. Il permet d'importer directement dans Google Sheets les dernières pages vues de vos articles depuis Google Analytics, et de planifier l'import chaque jour ou chaque heure.
• Le module complémentaire Mixed Analytics API Connector pour Google Sheets. Il est ici. Il permet d'importer vos articles de blog du CMS Webflow directement dans Google Sheets, sans code, en vous donnant l'ID de la liste de collection pour chaque élément et le nom de l'élément dont vous aurez besoin pour mettre à jour les éléments publiés via Zapier. Nous avons pris l'offre payante, donc aucune limite sur la quantité ou la fréquence d'utilisation de l'outil.
• Zapier pour détecter les nouvelles pages vues dans la feuille et mettre aussitôt à jour le champ de pages vues de la liste de collection de votre blog dans Webflow dès que de nouvelles pages vues sont importées depuis GA. Nous avons déjà un compte payant, car nous l'utilisons pour beaucoup d'autres choses, mais vous pouvez probablement vous contenter d'un compte gratuit.
• Nous partagions ici notre Google Sheet pour que vous puissiez suivre pas à pas, mais il n'est plus disponible ; les formules ci-dessous servent donc de référence. (Ne jugez pas nos pages vues, personne ne s'intéresse vraiment à nos articles sur Webflow Analytics et compagnie.)

Étape 1 : configurer Google Analytics si ce n'est pas déjà fait

Vous pouvez suivre ces deux articles pour le faire via Google Tag Manager puis ajouter Google Analytics. C'est la voie que nous choisirions à chaque fois, et nous les avons écrits spécialement pour Webflow, mais si cela ne vous met pas à l'aise, créez simplement un compte Google Analytics Universal Analytics (GA3) et ajoutez le code UA dans les paramètres de votre projet Webflow. Si vous n'avez pas encore configuré cela, attendez un jour que des données arrivent, sinon vous ne comprendrez rien à ce que vous faites, car toutes vos métriques seront vides. (Aujourd'hui, cela signifie GA4 ; notre article sur l'ajout de Google Analytics 4 à Webflow avec Cloudflare Zaraz montre une façon de le faire.)

Étape 2 : importer vos pages vues Google Analytics dans Google Sheets

Créez un Google Sheet. C'est la feuille dans laquelle nous ferons tout, alors rangez-la bien et ne la perdez pas.

Une fois fait, ajoutez le module complémentaire Google Analytics.

• Allez dans Modules complémentaires, puis Installer des modules complémentaires, et cherchez Google Analytics.
• Créez un nouveau rapport (Modules complémentaires -> Google Analytics -> Create new report).

Il vous faudra :

• Votre View ID de Google Analytics. Le module vous aide à le trouver pendant la configuration.
• Une date de début et une date de fin, c'est-à-dire la période couverte par le rapport. Nous avons choisi du début de l'année jusqu'à aujourd'hui (indiquez simplement hier comme date de fin si vous planifiez une exécution quotidienne, ou aujourd'hui pour une exécution horaire).
• Les métriques que vous voulez voir. Nous avons pris les utilisateurs et les pages vues, mais seules les pages vues sont nécessaires.
• Les dimensions à extraire. Nous avons pris le titre de la page et le chemin de la page, mais seul le chemin est nécessaire.
• Et nous avons ajouté un filtre pour ne récupérer que les pages vues de nos articles de blog. Notre liste de collection s'appelle simplement posts, ce qui veut dire que le chemin de tous nos articles commence par /post/ ; notre filtre est donc réglé sur « contient /post/ ».

Voilà. Dans le tableur, le résultat devrait ressembler à ceci une fois terminé :

Testez maintenant en exécutant le rapport : Modules complémentaires -> Google Analytics -> Run reports.

Vous obtiendrez une nouvelle feuille contenant le rapport, qui ressemble à ceci :

Si tout fonctionne, vous pouvez le planifier. Le nôtre s'exécute toutes les heures puisque notre date de fin est réglée sur aujourd'hui, mais vous pouvez aussi l'exécuter une fois par jour si cela vous convient.

Étape 3 : importer vos articles depuis Webflow

(Précision 2026 : les requêtes ci-dessous utilisent l'API v1 de Webflow, dépréciée le 31 mars 2025 et qui ne bénéficie plus d'aucune assistance. Webflow a cessé de créer des jetons de site v1 ; il faut donc aujourd'hui utiliser un jeton de site v2 et les points de terminaison v2 sous https://api.webflow.com/v2/, comme dans le guide de migration de Webflow. Les étapes dans le tableur restent les mêmes.)

Il faut faire cela pour obtenir l'ID et le titre des articles dont vous aurez besoin pour pousser les pages vues vers Webflow via Zapier. Installez l'API Connector pour Google Sheets, par les Modules complémentaires comme tout à l'heure ou en le récupérant ici.

Suivez maintenant ces étapes pour importer vos articles :

• Récupérez votre clé d'API Webflow et gardez-la quelque part. Rendez-vous dans le tableau de bord de votre site, ouvrez les Paramètres puis la section Intégrations, suivie de Accès API.

• Récupérez l'ID de votre site. Dans Google Sheets, allez dans Modules complémentaires, puis API Connector, puis Open, puis Create or Add New.
• Pour cette étape, le chemin de l'URL de l'API est : https://api.webflow.com/sites
• Les paires de valeurs sont Authorization: Bearer {API_TOKEN_HERE} et Accept-Version: 1.0.0

Cela devrait ressembler à ceci :

Donnez un nom au champ de la feuille de destination, puis nommez, enregistrez et exécutez la requête API. Vous obtiendrez une nouvelle feuille contenant l'ID du site. Elle devrait ressembler à ceci :

Ensuite, importez toutes vos collections pour récupérer l'ID de la liste de collection de vos articles de blog.

• Même procédure qu'avant, seule l'URL de la requête change : https://api.webflow.com/sites/:site\\_id/collections
• Copiez l'URL d'API ci-dessus dans la barre latérale d'API Connector en remplaçant :site\_id par l'ID de votre site obtenu à l'étape précédente (dans la nouvelle feuille, il se trouve dans la première colonne, appelée \_id), avec les paires clé : valeur comme en-têtes, exactement comme à l'étape précédente.

La feuille nouvellement générée ressemblera à ceci :

Nous voulons maintenant récupérer le schéma de la liste de collection.

• Même procédure, avec une autre URL, et vous allez utiliser l'ID de la nouvelle liste de collection du blog. L'URL de votre nouvelle requête API est : https://api.webflow.com/collections/:collection\\_id

La configuration devrait ressembler à ceci :

Et voici le schéma de nos articles de blog :

Dernière étape : récupérer les articles eux-mêmes, et c'est terminé. Comme avant, voici votre nouvelle URL :

https://api.webflow.com/collections/:collection\\_id/items

Et la capture de la configuration :

Et le résultat :

Vous avez maintenant tout le contenu de votre blog dans le Google Sheet, avec les deux colonnes dont vous aurez besoin pour Zapier, items.name et item.id. La partie difficile est faite. Il ne reste plus qu'à nettoyer, mettre en forme et pousser les pages vues vers Webflow via Zapier. Si tout a fonctionné, planifiez cette dernière récupération des articles dans le module d'API pour qu'elle se mette à jour quand vous créez de nouveaux articles.

À partir de là, je ne vais pas entrer dans les détails, car, pour être honnête, nous sommes nuls en tableurs et ce n'est pas la meilleure implémentation. Si vous avez besoin des détails, les formules ci-dessous suffisent. Si je connaissais un peu les regex, ce serait bien plus simple, mais j'ai dû faire les choses à la dure. Je vous donne les grandes lignes et vous ferez mieux que moi.

Pour remonter le fil, vous voulez obtenir une feuille de trois colonnes : le nom de l'article, l'ID de l'article et les pages vues de l'article. J'ai utilisé un tableau croisé dynamique pour cela, mais avant, j'ai dû tout nettoyer et faire correspondre les pages vues Google Analytics à l'ID et au nom issus de l'export API des articles.

J'ai créé une feuille appelée Blog Views et fait correspondre les deux jeux de données grâce au slug d'URL de l'export des pages Webflow, rapproché d'un slug nettoyé à partir du chemin de page de l'export Google Analytics.

Dans la feuille Blog Views, j'ai interrogé la feuille contenant les statistiques de Google Analytics : =QUERY('Milk Moon Studio GA Blog Posts'!A15:D)

J'ai obtenu les slugs des statistiques Google Analytics avec une matrice et le peu de regex que je connais pour supprimer /post/ : =ArrayFormula(REGEXREPLACE(B2:B,"/post/",""))

Il y avait toutes sortes de déchets venant de publicités diffusées à un moment sur Facebook, mais comme je ne suis pas très bon en regex, j'ai simplement utilisé SPLIT pour retirer la chaîne ?fbclid de Facebook : =ArrayFormula(SPLIT(E2:E, "?"))

Ensuite, j'ai utilisé une matrice VLOOKUP pour faire correspondre les ID Webflow aux statistiques Google : =(arrayformula(IFERROR(vlookup(F2:F,Webflow\_blog\_post\_export!G2:Z,16,FALSE))))

Puis une autre pour obtenir les titres : =(arrayformula(IFERROR(vlookup(H2:H,J2:K,2,FALSE))))

Puis une autre pour les éléments et les noms sur cette feuille : =QUERY(Webflow\_blog\_post\_export!V1:V) et =QUERY(Webflow\_blog\_post\_export!F1:F)

Ensuite, le tableau croisé dynamique pour additionner les pages vues de tous les slugs nettoyés et obtenir les pages vues, le nom et l'ID dans une seule feuille de tableau croisé.

À partir de là, c'est facile.

Rendez-vous dans Zapier et créez un Zap qui utilise les modifications de la colonne des pages vues de la feuille du tableau croisé comme déclencheur. Ajoutez ensuite Webflow, sélectionnez l'action Update Live Item et utilisez les colonnes des pages vues, de l'ID et du nom pour mettre à jour Webflow.

Il ne vous reste plus qu'à attendre que les données arrivent dans Webflow et à trier la liste de collection par pages vues. (C'est le même tri de liste de collection que celui de notre astuce du résumé d'article, et vous pouvez l'associer à notre astuce de pagination fluide si la liste s'allonge.)

Comme dit plus haut, si vous avez des conseils pour simplifier tout cela, n'hésitez pas à les poster dans les commentaires. Nous espérons vraiment que cela fonctionnera pour vous.

Mise à jour

Cela tourne depuis environ 12 heures et tout semble se mettre à jour et fonctionner. Un point est apparu : pendant la rédaction de cet article, l'enregistrer en brouillon a cassé l'une des formules matricielles jusqu'à sa publication, car le nombre de colonnes de la feuille avait changé. Gardez donc en tête, si vous n'avez aucun brouillon au départ, qu'une nouvelle colonne sera ajoutée, ce qui décalera vos formules vers la droite.

Pour d'autres tutoriels, consultez la section how-to du blog, ou notre article sur la création de spans de texte dans les éléments de texte CMS dynamiques dans Webflow.