How to track click events for collection records

Tips & Tricks ✨
1

One of the challenges in Noloco (especially compared to Glide) is that you can’t natively track record click events.

  • Want to track when a user clicks a record from a particular collection? Have to use an action button.
  • This means that if you want to track click events, the record-opening UX will be clunky, especially on mobile, as you’ll have to click the button rather than just the row.
  • However I just implemented a simple code-based solution to fix this (with help from Make)! It fires usually in less than a second, and carries over the page path containing the collection the user clicked into, the user’s email, and the ID for the record they clicked.
  • Example use-cases: track when users view document records. Track when a user opens an invoice. etc…

Script - add to footer code in app settings

<script>
let loggedInEmail = "unknown"; // Default fallback

// Intercept Noloco user info when it's loaded
window._NolocoOnLoadUser = function(user) {
  if (user?.email) {
    loggedInEmail = user.email;
  }
};

document.addEventListener("DOMContentLoaded", () => {
  const observer = new MutationObserver(() => {
    const records = document.querySelectorAll('[data-testid="collection-record"]');
    records.forEach((record) => {
      if (!record.classList.contains("click-tracked")) {
        record.classList.add("click-tracked");
        record.addEventListener("click", () => {
          const recordId = [...record.classList].find(cls => cls.startsWith("record-"))?.replace("record-", "") || "unknown";
          const payload = {
            recordId,
            clickedAt: new Date().toISOString(),
            path: window.location.pathname,
            userEmail: loggedInEmail
          };

          fetch("https://hook.us1.make.com/your-webhook-url", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload)
          });
        });
      }
    });
  });

  observer.observe(document.body, { childList: true, subtree: true });
});
</script>

Explanation

  • The first part extracts the current user’s email (user.email)
  • The second part listens to all record clicks from all UI collections ([data-testid="collection-record"]
  • The third part POSTS the event data to a Make webhook (or wherever you want) with the following payload: recordId (that they clicked), click date/time, the page path (for example /documents), and the user’s email
  • In my Make scenario, I’m then writing that as a record to an “Activities” table.

Need-to-Know

  • The event listener portion of the script tracks all collection record clicks across the app, not a specific collection. To target specific collection clicks, I’m using a filter in my Make step to only proceed when the Path from the payload = /resources (in my case). In other words, you only proceed with logging the event when the event came from the page where your collection is.
  • This obviously breaks down if you have multiple collections on one page (a custom page), but I went with this approach cause I couldn’t easily find my specific collection’s ID/name in the DOM, though it’s likely possible.
  • The current user email is the actual, authenticated Noloco user, NOT the user you’re previewing as. This is helpful to know so you don’t think your user attribution is wrong. It is correct, its just ignoring the user you’re previewing as.

Hope this helps! :dizzy:

3 Likes