fix(web): distinguish repeated analytics events

apps/web/public/past-present-future/analytics.js

@@ -4,7 +4,10 @@
   const normalizeLabel = (value) =>
     typeof value === 'string' ? value.replace(/\s+/g, ' ').trim() : ''
 
-  const getEventName = (element) => {
+  const getVisibleLabel = (element) =>
+    normalizeLabel(element.textContent).replace(/^\+\s*/, '')
+
+  const getBaseEventName = (element) => {
     if (element.classList.contains('mx-more')) {
       return 'Enter exhibit'
     }
@@ -12,7 +15,7 @@
     return (
       normalizeLabel(element.getAttribute('data-umami-event-name')) ||
       normalizeLabel(element.id) ||
-      normalizeLabel(element.textContent) ||
+      getVisibleLabel(element) ||
       normalizeLabel(element.getAttribute('aria-label')) ||
       normalizeLabel(element.getAttribute('name')) ||
       normalizeLabel(element.getAttribute('title')) ||
@@ -20,15 +23,69 @@
     )
   }
 
+  const getHallContext = (element) => {
+    const section = element.closest('section[data-kind]')
+    const hallText = section?.querySelector('.mx-hall, .mx-title')?.textContent
+
+    return normalizeLabel(hallText).match(/\bHall\s+[IVX]+\b/)?.[0] || ''
+  }
+
+  const getEventContext = (element) => {
+    const hall = getHallContext(element)
+
+    if (hall) {
+      return hall
+    }
+
+    if (element.classList.contains('scrollcue')) {
+      return 'Museum hero'
+    }
+
+    if (
+      element.classList.contains('hd-btn') ||
+      element.classList.contains('hd-min')
+    ) {
+      return 'Museum navigation'
+    }
+
+    if (element.classList.contains('loader-cta')) {
+      return 'Museum footer'
+    }
+
+    if (element.classList.contains('nav-item')) {
+      return 'Desktop navigation'
+    }
+
+    if (element.classList.contains('sheet-item')) {
+      return 'Mobile navigation'
+    }
+
+    if (element.classList.contains('tl-label')) {
+      return 'Timeline'
+    }
+
+    return ''
+  }
+
+  const getEventName = (element) => {
+    const name = getBaseEventName(element)
+    const context = getEventContext(element)
+
+    return context ? `${name} - ${context}` : name
+  }
+
   const getEventData = (element) => {
     const data = { source: window.location.pathname }
+    const context = getEventContext(element)
     const exhibit = element
       .closest('[data-kind="main"]')
       ?.querySelector('.mx-title')
 
-    return exhibit
-      ? { ...data, exhibit: normalizeLabel(exhibit.textContent) }
-      : data
+    return {
+      ...data,
+      ...(context ? { context } : {}),
+      ...(exhibit ? { exhibit: normalizeLabel(exhibit.textContent) } : {}),
+    }
   }
 
   document.addEventListener('click', (event) => {