Where can I find code or a solution to add a 'view' counter for each person clicking on the tiles on my Webflow website?

Published on
September 22, 2023

To add a 'view' counter for each person clicking on the tiles on your Webflow website, you can follow these steps:

  1. Create a new field in your Webflow CMS collection: Start by adding a new number field to your CMS collection. This field will be used to store the 'view' count for each tile.

  2. Add the CMS field to your tile design: In the Webflow Designer, go to the tile element that you want to track the views for. Add a Text element inside the tile and connect it to the new number field you created in your CMS collection. This will display the 'view' count for each tile.

  3. Write custom code to update the 'view' count: To update the 'view' count when someone clicks on a tile, you'll need to write custom code. There are a few different ways to achieve this, but one method is using Webflow's custom code embed feature.

  4. Add custom code to increment the 'view' count: Inside the custom code embed, you can write JavaScript code that increments the 'view' count for the clicked tile. Here's an example of how you can implement this:

<script>document.addEventListener("DOMContentLoaded", function() {  // Get all the tiles  var tiles = document.getElementsByClassName("tile-class");  // Loop through the tiles  for (var i = 0; i < tiles.length; i++) {    // Add a click event listener to each tile    tiles[i].addEventListener("click", function() {      // Get the current view count from the CMS field      var currentCount = parseInt(this.dataset.viewCount);      // Increment the view count      var newCount = currentCount + 1;      // Update the CMS field with the new view count      this.dataset.viewCount = newCount;      // Display the new view count in the tile      this.querySelector(".view-count").textContent = newCount;    });  }});</script>
  1. Update the class names and structure: In the code above, make sure you replace "tile-class" with the correct class name for your tile element, and "view-count" with the correct class name for the element that displays the view count inside the tile.

  2. Embed the custom code: Go back to the Webflow Designer and find the custom code embed element where you want to add the code. Paste the code inside the embed element.

  3. Publish and test: Publish your website and test the 'view' counter by clicking on the tiles. Each click should increment the view count and update the display accordingly.

By following these steps, you can add a 'view' counter for each person clicking on the tiles on your Webflow website.