Creating a no-code Webflow Popular Post Collection List Section

On ne va pas se mentir, cela n'a pas été facile, il a fallu beaucoup d'essais et d'erreurs, mais on y est finalement arrivés. Il existe probablement des moyens beaucoup plus simples de le faire en interrogeant simplement l'API Webflow et l'API Google Analytics, puis en utilisant l'API Webflow pour renvoyer les pages vues vers Webflow, mais nous avons choisi Webflow comme plateforme de choix car nous ne sommes pas des codeurs, nous sommes un Webflow Studio, et bien, nous voulions ne pas coder. Nous vous promettons qu'il s'agit d'une solution sans code, il suffit de copier-coller et de maîtriser les feuilles de calcul. Cela fait un moment que nous réfléchissons à la manière de procéder et nous avons eu la moitié de la solution pendant quelques mois, mais nous avons abandonné (voir le fil de discussion sur le forum Webflow ici). Quoi qu'il en soit, aujourd'hui, nous étions assis à attendre les commentaires d'un client dans Figma et nous avons décidé de le faire fonctionner, et bizarrement, nous l'avons compris cette fois-ci. Il ne fonctionne que depuis quelques heures, mais nous avons ajouté un nouvel article au blog, publié et cliqué dessus un moment plus tard, Zapier a également mis à jour les pages vues dans Webflow pour le nouvel article. Alors allons-y.

Commençons donc par le début. Nous partons du principe que vous n'avez défini aucun champ obligatoire dans votre CMS, car cela signifie que vous devez les remplir lorsque vous mettez à jour un élément actif via Zapier. Dans cette hypothèse, les choses sont donc plus simples (si vous en avez, vous devrez remplir ces champs dans Zapier avec les données de la feuille de post-exportation Webflow que nous créerons plus tard).

Notre idée initiale était la suivante : si nous pouvions extraire les pages vues de nos articles de blog de Google Analytics dans une feuille de calcul Google, nous pourrions mettre à jour la liste des collections avec un champ de page dans Webflow, puis simplement trier la liste de collection en fonction des pages vues pour ce champ de page. Cela s'est avéré plus compliqué, et nous aimerions commencer par vous dire que si vous avez une meilleure solution, ou si vous pouvez simplifier même l'étape ci-dessous, veuillez commenter et nous le faire savoir. Nous avons interrogé un certain nombre d'experts Webflow et jusqu'à présent, il n'y a pas eu de solution facile. Nous voulons que cela soit aussi simple que possible, et c'est facile à mettre en œuvre, mais pas très simple pour le moment. En tant que concepteurs de Webflow, nous échouons sur ce point pour le moment.

Quoi qu'il en soit, comme nous l'avons dit, notre supposition était fausse, nous n'avions pas seulement besoin de pages vues, pour mettre à jour un article via Zapier, nous avions besoin de 3 choses :

• The Post (numéro d'article de la liste de collection)
• Le nom du message (nom de l'article de la liste de collection)
• Les pages vues pour la publication correspondante de Google Analytics

Malheureusement, il n'existe pas de moyen facile d'obtenir le nom et l'identifiant de Webflow avec Zapier ou à peu près n'importe quoi d'autre sans utiliser l'API, et nous ne voulions rien de tout cela. Nous avons donc trouvé une solution qui ferait tout cela dans une feuille de calcul Google, puis utiliserait Zapier pour transférer les pages vues vers Webflow.

Commençons par énumérer ce dont vous aurez besoin et pourquoi :

• Google Analytics - Vous en aurez besoin pour suivre votre PageView et vous devrez utiliser Google Universal Analytics et non GA4 car le module complémentaire Google Analytics pour Google Sheets utilise UA et non GA4. Pour obtenir de l'aide sur la configuration de Google Analytics dans Webflow, suivez ce lien poste et puis ça poste.
• Une feuille Google pour faire tout cela. C'est gratuit, il suffit de s'inscrire. Votre Google Sheet inclura une importation planifiée depuis Google Analytics, une importation planifiée de la liste de votre collection de blogs depuis Webflow et des feuilles supplémentaires pour effectuer certains calculs et nettoyer. Vous pourriez probablement le faire avec beaucoup moins d'efforts que ce que nous avons fait auparavant, mais nos compétences en matière de tableur sont également nulles, donc si vous pouvez faciliter les choses, criez-le dans les commentaires.
• Le module complémentaire Google Analytics Google Sheets. Allez-y et installez-le ici. Cela vous permet d'importer les dernières pages vues pour vos articles de blog depuis Google Analytics directement dans Google Sheets et de planifier et d'importer sur une base quotidienne ou horaire.
• Le module complémentaire Mixed Analytics API Connector pour Google Sheets. Obtenez-le ici. Cela vous permet d'importer les articles du CMS de votre blog Webflow directement dans Google Sheets sans aucun code, en vous donnant l'identifiant de la liste de collection pour chaque élément et le nom de l'élément dont vous aurez besoin lorsque vous mettrez à jour les éléments actifs via Zapier. Nous avons payé pour ne pas avoir de limites quant à la quantité ou à la fréquence d'utilisation de l'outil.
• Zapier pour vérifier la présence de nouvelles pages vues dans la feuille et mettre à jour instantanément le champ Pages vues dans la liste de collection de votre blog Webflow une fois que de nouvelles pages vues ont été importées depuis GA. Nous avons déjà un compte payant pour cela car nous l'utilisons pour bien d'autres choses, mais vous pouvez probablement vous en tirer avec un compte gratuit.
• Vous pouvez prévisualiser notre Google Sheet ici si tu perds la trace de ce que nous faisons. (Ne jugez pas nos pages vues, personne n'est très intéressé par nos publications sur Webflow Analytics, etc.)

Étape 1 - Configurez Google Analytics si vous ne l'avez pas encore fait.

Vous pouvez suivre ces deux articles sur la façon de procéder via Gestionnaire de balises Google puis ajoutez Google Analytics, comme nous le ferions à chaque fois et nous les avons écrits spécifiquement pour Webflow, mais si cela ne vous convient pas, créez simplement un compte Google Analytics Universal Analytics (GA3) et ajoutez le code UA aux paramètres de votre projet Webflow. Si vous ne l'avez pas encore configuré, vous devrez attendre un jour pour que certaines données arrivent, sinon vous n'aurez aucune idée de ce que vous faites car toutes vos mesures seront vides.

Étape 2 - Importez vos pages vues Google Analytics dans Google Sheets.

Créez une feuille Google, ce sera la feuille dans laquelle nous ferons tout, alors classez-la bien et ne la perdez pas.

Une fois que vous avez terminé, ajoutez le module complémentaire Google Analytics.

• Accédez à Modules complémentaires, puis accédez aux modules complémentaires et recherchez Google Analytics ou obtenez-le ici.
• Créer un nouveau rapport (Modules complémentaires -> Google Analytics -> Créer un nouveau rapport)

Vous allez avoir besoin de ce qui suit :

• Votre identifiant de vue de Google Analytics, ils vous aident à le configurer.
• Une date de début et une date de fin, donc entre le moment où vous voulez le rapport, nous avons choisi le début de l'année jusqu'à aujourd'hui (ajoutez simplement aujourd'hui ou hier dans le champ de la date de fin si vous voulez le programmer pour qu'il soit diffusé tous les jours ou aujourd'hui pour toutes les heures).
• Quelles statistiques vous souhaitez voir, nous avons choisi les utilisateurs et les pages vues, mais vous n'avez besoin que de pages vues.
• Quelles dimensions vous devez extraire, nous avons choisi le titre de la page et le chemin de page, mais vous avez juste besoin du chemin.
• Et nous avons ajouté un filtre afin de n'obtenir que les pages vues de nos articles de blog. Notre liste de collections ne contient que des articles intitulés, ce qui signifie que le chemin de page de tous nos articles de blog commence par /post/. Notre filtre est donc configuré pour contenir /post/.

Voilà, cela devrait ressembler à ceci dans la feuille de calcul une fois que vous avez terminé :

Testez maintenant en exécutant le rapport. Modules complémentaires -> Google Analytics - Exécuter des rapports.

Vous allez vous retrouver avec une nouvelle feuille contenant le rapport qui ressemble à ceci :

Si vous êtes content que tout ait fonctionné, vous pouvez aller de l'avant et le planifier. Le nôtre fonctionne toutes les heures car notre date de fin est fixée à aujourd'hui, mais vous pouvez simplement le faire une fois par jour si cela vous convient.

Étape 3 - Importez vos publications depuis Webflow

Vous devez le faire pour obtenir l'ID de publication et le titre dont vous aurez besoin lorsque vous transférez les pages vues vers Webflow via Zapier. Allez-y et installez le connecteur API pour Google Sheets. Faites-le jusqu'au bout Modules complémentaires comme avant ou téléchargez-les ici.

Suivez maintenant ces étapes pour importer vos publications :

• Obtenez votre clé d'API Webflow et enregistrez-la quelque part. Accédez au tableau de bord de votre site et ouvrez Réglages et allez dans la section Intégrations, suivi par Accès à l'API.

• Obtenez l'identifiant de votre site. Accédez à Modules complémentaires dans Google Sheets, puis à API Connector, puis à Ouvrir, puis à Créer ou à ajouter.
• Pour cette étape, le chemin de l'URL de l'API est le suivant : 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 demande d'API. Vous vous retrouverez avec une nouvelle feuille contenant l'identifiant du site. Cela devrait ressembler à ceci :

Ensuite, vous souhaitez importer toutes vos collections afin d'obtenir l'identifiant de la liste de collections de vos articles de blog.

• Même processus que précédemment, juste une URL différente pour la demande : https://api.webflow.com/sites/:site\\_id/collections
• Copiez l'URL de l'API ci-dessus dans la barre latérale du connecteur API, en veillant à saisir:site \ _id avec le site \ _id correspondant à l'étape précédente dans la nouvelle feuille appelée \ _id dans la première colonne, ainsi que la clé : paires de valeurs comme en-têtes, comme à l'étape précédente.

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

Nous voulons maintenant extraire le schéma de la liste de collections.

• Même processus, juste une URL différente et vous allez utiliser le nouvel identifiant de liste de collections de blogs. L'URL de votre nouvelle demande d'API est la suivante : https://api.webflow.com/collections/:collection\\_id

La configuration devrait ressembler à ceci :

Et voici le schéma de mon article de blog :

Dernière étape, extrayez les articles de blog réels et vous avez terminé, comme précédemment, voici votre nouvelle URL :

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

et la capture d'écran de la configuration :

Et le résultat :

Vous avez maintenant tout le contenu de votre blog dans Google Sheet et les deux colonnes dont vous aurez besoin pour Zapier, items.name et item.id. C'est la partie la plus difficile. Il ne reste plus qu'à nettoyer, formater et transférer les pages vues vers Webflow via Zapier. Si tout cela a fonctionné, programmez le dernier extrait des articles de blog pour qu'il s'exécute dans l'addon API afin qu'il soit mis à jour lorsque vous créerez de nouveaux articles.

À partir de maintenant, 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 de détails, la feuille est ici. Si j'avais connu une expression régulière, cela aurait été beaucoup plus simple, mais j'ai dû faire les choses sur le long terme. Je vais vous donner les grandes lignes et vous pouvez faire un meilleur travail que moi.

Pour revenir en arrière, vous devez vous retrouver avec une feuille contenant 3 colonnes. Le nom de la publication, l'identifiant de la publication et les pages vues de la publication. J'ai utilisé un tableau croisé dynamique pour cela, mais avant cela, j'ai dû tout nettoyer et faire correspondre les pages vues de Google Analytics à l'identifiant et au nom de l'API après l'exportation.

J'ai créé une feuille intitulée Blog Views et j'ai comparé les deux ensembles de données différents en utilisant le slug d'URL de l'exportation de la page Webflow pour le faire correspondre à un slug nettoyé du chemin de page dans l'export Google Analytics.

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

J'ai obtenu les slugs pour les statistiques de Google Analytics à l'aide d'un tableau et du peu d'expression régulière que je connais pour supprimer le /post/ : =ArrayFormula (REGEXREPLACE (B2:B, » /post/ », "»))

Certaines publicités que nous avons diffusées à un moment donné sur Facebook contenaient toutes sortes de saloperies, mais comme je ne suis pas douée pour les regex, j'ai juste utilisé split pour supprimer le Facebook ? chaîne fbclid : =ArrayFormula (SPLIT (E2:E, « ? »))

Ensuite, j'ai utilisé un tableau VLOOKUP pour faire correspondre les identifiants Webflow aux statistiques de Google : =( arrayformula (IFERROR (vlookup (F2:F, Webflow \ _blog \ _post \ _export ! G2:Z,16, FAUX))))

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

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

Ensuite, le tableau croisé dynamique pour additionner toutes les pages vues des slugs supprimés et pour obtenir la vue de la page, le nom et l'identifiant sur une seule feuille de tableau croisé dynamique.

À partir de là, c'est facile.

Rendez-vous sur Zapier, configurez un Zap qui vérifiera la feuille Google pour détecter les modifications apportées à la colonne des pages vues sur la feuille de navigation dynamique comme déclencheur, puis ajoutez Webflow au mix en sélectionnant Mettre à jour les éléments actifs dans le CMS et utilisez les colonnes Pages vues, ID et Nom pour mettre à jour Webflow.

Il ne vous reste plus qu'à attendre que les données soient filtrées dans Webflow et trier la liste des collections par Pageview.

Comme nous l'avons déjà dit, si vous avez des conseils pour simplifier les choses, veuillez les publier dans les commentaires et nous espérons vraiment que cela fonctionnera pour vous.

METTRE À JOUR

Il fonctionne donc depuis environ 12 heures et tout semble être mis à jour et fonctionner. Une chose qui est apparue, c'est que lors de la rédaction de cet article, l'enregistrer en tant que brouillon cassait l'une des formules du tableau jusqu'à ce qu'elle soit publiée à mesure que le nombre de colonnes de la feuille changeait. Vous devrez donc garder à l'esprit que si vous n'avez pas de brouillon au début, c'est qu'une nouvelle colonne sera ajoutée, ce qui signifie que vos formules seront déplacées vers la droite.

Pour en savoir plus sur la marche à suivre, consultez le section explicative sur le blog.