Tracking visitor clicks on Shopify store

Other Questions Shopify
1

Hey folks! I’m working on my Shopify store and want to add a feature that shows how many times visitors have clicked on different collections. Right now, I’ve got a JavaScript counter working, but it only tracks clicks on one device. I need help making this count visible to all customers, no matter what device they’re using.

Here’s a simplified version of what I’m trying to do:

let collectionClicks = {};

function updateClickCount(collectionName) {
  if (!collectionClicks[collectionName]) {
    collectionClicks[collectionName] = 0;
  }
  collectionClicks[collectionName]++;
  
  displayCount(collectionName);
}

function displayCount(collectionName) {
  let countElement = document.getElementById(collectionName + '-count');
  countElement.textContent = collectionClicks[collectionName];
}

I know I need to use some kind of server-side solution, but I’m not sure how to send the click data to the server and then show it to all users. Any ideas on how to make this work across the whole site? Thanks for any help you can give!

2

yo, have u considered using firebase? it’s pretty sick for real-time stuff. u can store click counts there and update em with javascript. then, use firebase’s realtime database to show the counts to all users. it’s way easier than building ur own server solution. just make sure to set up security rules right, ya know?

3

From my experience, implementing this functionality in Shopify can be achieved using a combination of Shopify’s Ajax API and Liquid templates. You’ll need to create a new endpoint in your theme’s server-side code to handle click updates. Then, modify your JavaScript to send POST requests to this endpoint whenever a collection is clicked. In your Liquid templates, you can fetch and display the current click counts from Shopify’s database. This approach ensures data consistency across all devices and provides a scalable solution. Remember to implement proper caching mechanisms to reduce database load and improve performance. Also, consider using Shopify’s built-in analytics tools alongside this custom tracking for a more comprehensive view of user engagement.

4

Having worked on several Shopify stores, I can say that tracking clicks across multiple devices is achievable by leveraging Shopify’s backend features. One approach is to use Shopify’s metafields to store click counts so that the data is maintained on the server. You could develop a lightweight app or use the ScriptTag API to send AJAX requests that update these metafields on each click. Additionally, modify your liquid templates to display the stored values and consider techniques like WebSockets or periodic AJAX polling for near-real-time updates. This method is more robust than a client-side only solution, but be cautious of potential API rate limits.