Comment afficher un compteur de vues sur les articles Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher un compteur de vues sur vos articles Webflow avec CounterAPI

Exemple

Comprendre CounterAPI

CounterAPI est un service gratuit qui expose une API REST simple pour incrémenter et lire des compteurs. Chaque compteur est identifié par un namespace et une clé. L'appel /v1/namespace/key/up incrémente le compteur et retourne la valeur actuelle en une seule requête.

1. Ajoutez un Text Block pour afficher les vues

Dans Webflow, créez un Text Block avec l'ID view-count à l'endroit où vous voulez afficher le nombre de vues (header de l'article, near the date...).

2. Définissez une clé unique par article

Chaque article doit avoir une clé unique. Le script utilise automatiquement le slug de l'URL comme clé : /academy/mon-article devient academy-mon-article. Pas de configuration manuelle nécessaire.

3. Ajoutez le script dans Footer code

Remplacez gemeos par votre propre namespace dans le script. Le namespace permet d'isoler vos compteurs des autres utilisateurs de CounterAPI.

(function() {
  var el = document.getElementById('view-count');
  if (!el) return;

  var key = window.location.pathname.replace(/\/\//g, '-').replace(/^-|-$/g, '') || 'home';
  var namespace = 'gemeos'; // Remplacez par votre namespace

  fetch('https://api.counterapi.dev/v1/' + namespace + '/' + key + '/up')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      var count = data.count || 0;
      el.textContent = count.toLocaleString('fr-FR') + ' vue' + (count > 1 ? 's' : '');
    })
    .catch(function() {
      el.textContent = '';
    });
})();

4. Mode lecture seule (sans incrément)

Pour afficher le compteur sans l'incrémenter (en preview ou pour les admins), utilisez /get au lieu de /up :

fetch('https://api.counterapi.dev/v1/' + namespace + '/' + key + '/get')

Conclusion

CounterAPI est la solution la plus rapide pour afficher des vues sur Webflow sans backend. Cas d'usage :

• Compteur de vues sur les articles de blog
• Popularité des ressources dans une bibliothèque
• Social proof sur les pages de landing ("déjà vu 1 240 fois")