Creating a global visitor counter for Shopify store

Other Questions Shopify
1

I want to build a visitor tracking system on my Shopify store that displays the same count to all users. Right now I have a basic JavaScript solution but it only works locally on each browser.

var categories = []; // collection names array
var click_counts = []; // tracking clicks per category

// Extract collection names from navigation
categories[0] = {{linklists[page.handle].links[0].title| json}};
categories[1] = {{linklists[page.handle].links[1].title| json}};
categories[2] = {{linklists[page.handle].links[2].title| json}};
categories[3] = {{linklists[page.handle].links[3].title| json}};
categories[4] = {{linklists[page.handle].links[4].title| json}};
categories[5] = {{linklists[page.handle].links[5].title| json}};
categories[6] = {{linklists[page.handle].links[6].title| json}};
categories[7] = {{linklists[page.handle].links[7].title| json}};
categories[8] = {{linklists[page.handle].links[8].title| json}};

// Initialize counter values
for(var j=0; j<9; j++){
  click_counts[categories[j]] = 0;
}

// Handle click events
function trackClick(selected_item){
  var threshold; // maximum clicks allowed
  var display_element; // where to show the count
  if(click_counts[selected_item] < max_clicks-1){
    click_counts[selected_item] += 1;
    document.getElementById(display_element).innerHTML = click_counts[selected_item]+" / " + threshold;
  } else{
    click_counts[selected_item] += 1;
    document.getElementById(display_element).innerHTML = click_counts[selected_item] +" / " + threshold;
    document.getElementById(selected_item).href = "NEW DESTINATION";
    return true;
  }
}

The problem is this only works for individual browsers. I need all visitors to see the same numbers updated in real time. I think this requires server side coding but I’m not sure how to save and load the counter data from the server. Any ideas on how to make this work across all users?

2

You’re right - this definitely needs server-side storage. I faced the same issue when building analytics for my store. I created a simple Node.js backend with a database for the global counters. I set up a REST API with endpoints to increment and fetch counts, and then used AJAX calls from Shopify’s frontend. MongoDB worked well since it’s straightforward for counters like this. The tricky part was handling concurrent updates, so you’ll need to ensure atomic operations to avoid race conditions when multiple clicks occur. Alternatively, Firebase Realtime Database is another option; it offers a quick setup and automatically manages real-time syncing. Although it’s pricier in the long run, it can be cost-effective for lower traffic volumes.