CUAHSI · MSDrao · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 6, 2025
diff --git a/frontend/index.html b/frontend/index.html
@@ -5,6 +5,12 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SWOT-DATA-VIEWER</title>
+    <script type="text/javascript">
+      if (window.location.hostname === 'swotvis.cuahsi.io'|| window.location.hostname === 'https://swotvis.cuahsi.io') {
+        window.heapReadyCb=window.heapReadyCb||[],window.heap=window.heap||[],heap.load=function(e,t){window.heap.envId=e,window.heap.clientConfig=t=t||{},window.heap.clientConfig.shouldFetchServerConfig=!1;var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src="https://cdn.us.heap-api.com/config/"+e+"/heap_config.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(a,r);var n=["init","startTracking","stopTracking","track","resetIdentity","identify","getSessionId","getUserId","getIdentity","addUserProperties","addEventProperties","removeEventProperty","clearEventProperties","addAccountProperties","addAdapter","addTransformer","addTransformerFn","onReady","addPageviewProperties","removePageviewProperty","clearPageviewProperties","trackPageview"],i=function(e){return function(){var t=Array.prototype.slice.call(arguments,0);window.heapReadyCb.push({name:e,fn:function(){heap[e]&&heap[e].apply(heap,t)}})}};for(var p=0;p<n.length;p++)heap[n[p]]=i(n[p])};
+        heap.load("557578762");
+      }
+  </script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/frontend/src/components/DataQuality.vue b/frontend/src/components/DataQuality.vue
@@ -51,5 +51,15 @@ function qualityHasChanged() {
 
   // stats are not shown after update of data quality
   statsStore.toggleSeriesStatistics(showStatistics.value)
+  try {
+    window.heap.track('Data Quality Updated', {
+      selectedFlags: dataQualityFlags.value // Track the currently selected data quality flags
+    })
+  } catch (e) {
+    console.warn(
+      'Heap is not available or an error occurred while tracking the Data Quality Updated event.',
+      e
+    )
+  }
 }
 </script>
diff --git a/frontend/src/components/DataViewDrawer.vue b/frontend/src/components/DataViewDrawer.vue
@@ -20,7 +20,7 @@
       <StaticMetadata />
       <v-btn
         v-if="!hasResults() && isReachFeature"
-        @click="router.push(`/plots/${featureStore.activeFeature.properties.reach_id}`)"
+        @click="handlePlotClick"
         color="primary"
         class="ma-2"
         :loading="featureStore.querying.hydrocron"
@@ -70,6 +70,19 @@ const isReachFeature = computed(() => {
   return featureStore?.activeFeature?.feature_type === 'Reach'
 })
 
+const handlePlotClick = () => {
+  try {
+    window.heap.track('Plotted Event', {
+      featureId: featureStore.activeFeature.properties.reach_id,
+      featureType: featureStore.activeFeature.feature_type
+    })
+  } catch (e) {
+    console.warn('Heap is not available or an error occurred while tracking the Plotted Event.', e)
+  } finally {
+    router.push(`/plots/${featureStore.activeFeature.properties.reach_id}`)
+  }
+}
+
 featureStore.$subscribe((mutation, state) => {
   if (state.activeFeature !== null) {
     // && typeof mutation.events.newValue === 'object'

diff --git a/frontend/src/components/PlotActions.vue b/frontend/src/components/PlotActions.vue
@@ -106,12 +106,28 @@ const getChartName = () => {
   return `${identifier}.png`
 }
 
+const trackDownloadEvent = (eventName, metadata = {}) => {
+  try {
+    window.heap.track(eventName, metadata)
+  } catch (e) {
+    console.warn(
+      `Heap is not available or an error occurred while tracking the ${eventName} event.`,
+      e
+    )
+  }
+}
+
 const downloadChart = async () => {
   downloading.value.chart = true
   const filename = getChartName()
   // change the chart background color to white
   // props.chosenPlot.chart.canvas.style.backgroundColor = 'white'
 
+  trackDownloadEvent('Download Chart', {
+    filename: filename,
+    chartType: isNodeChart.value ? 'Node Chart' : 'Feature Chart'
+  })
+
   const image = props.chosenPlot.chart.toBase64Image('image/png', 1)
   const link = document.createElement('a')
   link.href = image
@@ -122,6 +138,11 @@ const downloadChart = async () => {
 
 const downCsv = async () => {
   downloading.value.csv = true
+
+  trackDownloadEvent('Download CSV', {
+    chartType: isNodeChart.value ? 'Node Chart' : 'Feature Chart'
+  })
+
   // determine whether to download the node or feature csv
   if (isNodeChart.value) {
     await downloadMultiNodesCsv()
@@ -133,6 +154,11 @@ const downCsv = async () => {
 
 const downJson = async () => {
   downloading.value.json = true
+
+  trackDownloadEvent('Download JSON', {
+    chartType: isNodeChart.value ? 'Node Chart' : 'Feature Chart'
+  })
+
   // determine whether to download the node or feature
   if (isNodeChart.value) {
     await downloadMultiNodesJson()

diff --git a/frontend/src/components/StaticMetadata.vue b/frontend/src/components/StaticMetadata.vue
@@ -58,9 +58,9 @@
       </v-card-text>
     </v-card>
   </v-sheet>
-  <v-btn v-if="!extended" @click="extended = true" color="primary"
-    ><v-icon :icon="mdiSword"></v-icon>Metadata</v-btn
-  >
+  <v-btn v-if="!extended" @click="handleMetadataClick(true)" color="primary">
+    <v-icon :icon="mdiSword"></v-icon>Metadata
+  </v-btn>
   <v-btn v-else @click="extended = false" color="primary"
     ><v-icon :icon="mdiSword"></v-icon>Hide Extended Metadata</v-btn
   >
@@ -79,7 +79,22 @@ const props = defineProps({
 const featureStore = useFeaturesStore()
 const hydrologicStore = useHydrologicStore()
 
-let extended = ref(false)
+const extended = ref(false)
+
+const handleMetadataClick = (isExtended) => {
+  try {
+    window.heap.track('Metadata Extended Event', {
+      action: isExtended ? 'View Metadata' : 'Hide Metadata'
+    })
+  } catch (e) {
+    console.warn(
+      'Heap is not available or an error occurred while tracking the Metadata Extended Event.',
+      e
+    )
+  } finally {
+    extended.value = isExtended
+  }
+}
 
 if (props.reachId) {
   featureStore.setActiveFeatureById(props.reachId)

diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
@@ -386,7 +386,7 @@ onMounted(async () => {
   })
   /**/
 
-  esriLeafletGeocoder
+  const geosearchControl = esriLeafletGeocoder
     .geosearch({
       position: 'topleft',
       placeholder: 'Search for a location',
@@ -398,6 +398,19 @@ onMounted(async () => {
     })
     .addTo(leaflet)
 
+  geosearchControl.on('results', (data) => {
+    try {
+      const searchQuery = data.text
+      const searchResults = data.results.map((result) => result.properties.LongLabel || result.text)
+      window.heap.track('Map Search Event', {
+        searchQuery: searchQuery,
+        searchResults: searchResults
+      })
+    } catch (e) {
+      console.warn('Heap is not available or an error occurred while tracking the search event.', e)
+    }
+  })
+
   // add zoom control again they are ordered in the order they are added
   L.control
     .zoom({

diff --git a/frontend/src/components/TimeRangeSelector.vue b/frontend/src/components/TimeRangeSelector.vue
@@ -47,6 +47,18 @@ const updatetimeRange = () => {
   timeRange.value = dateRange.value.map((dateString) => {
     return convertDateStringToSeconds(dateString)
   })
+  try {
+    window.heap.track('Time Changed Event', {
+      startTime: dateRange.value[0],
+      endTime: dateRange.value[1]
+    })
+  } catch (e) {
+    console.warn(
+      'Heap is not available or an error occurred while tracking the Time Changed Event.',
+      e
+    )
+  }
+
   filterDatasetsToTimeRange()
 }
 

diff --git a/frontend/src/views/AboutView.vue b/frontend/src/views/AboutView.vue
@@ -28,6 +28,11 @@ const tocItems = ref([]) // toc (table of contents) items
 
 // fetch and process the markdown content
 onMounted(async () => {
+  try {
+    window.heap.track('About Page Opened')
+  } catch (e) {
+    console.warn('Heap is not available or an error occurred while loading the page.', e)
+  }
   const response = await fetch(about_page_url)
   const markdownText = await response.text()
 

diff --git a/frontend/src/views/ChartsView.vue b/frontend/src/views/ChartsView.vue
@@ -1,7 +1,14 @@
 <template>
   <template v-if="activeFeatureIsReach">
     <v-container v-if="hasData" fluid fill-height>
-      <v-tabs v-model="chartStore.chartTab" align-tabs="center" fixed-tabs color="primary" grow>
+      <v-tabs
+        v-model="chartStore.chartTab"
+        align-tabs="center"
+        fixed-tabs
+        color="primary"
+        grow
+        @update:model-value="trackTabSelection"
+      >
         <v-tab value="timeseries">
           <v-icon :icon="mdiTimelineClock"></v-icon>
           Reach Averaged
@@ -56,6 +63,18 @@ import { queryHydroCron, getNodeDataForReach } from '../_helpers/hydroCron'
 import { ChartJS } from '@/_helpers/charts/charts' // eslint-disable-line
 
 const props = defineProps({ reachId: String })
+
+const trackTabSelection = (newTab) => {
+  try {
+    if (newTab === 'timeseries') {
+      window.heap.track('Reach Average Selected')
+    } else if (newTab === 'distance') {
+      window.heap.track('Node Profile Selected')
+    }
+  } catch (e) {
+    console.warn('Heap is not available or an error occurred while tracking the event.', e)
+  }
+}
 const router = useRouter()
 
 const chartStore = useChartsStore()

diff --git a/frontend/src/views/DistanceCharts.vue b/frontend/src/views/DistanceCharts.vue
@@ -4,7 +4,12 @@
       <v-col sm="2">
         <v-sheet class="elevation-1" color="input">
           <v-card-title> Variables </v-card-title>
-          <v-tabs v-model="activePlt" direction="vertical" color="primary">
+          <v-tabs
+            v-model="activePlt"
+            direction="vertical"
+            color="primary"
+            @update:model-value="trackVariableSelection"
+          >
             <v-tab v-for="plt in chartStore.nodeCharts" :value="plt" :key="plt.abbreviation">
               <template v-if="lgAndUp">
                 {{ plt.name }}
@@ -72,6 +77,17 @@ const resetData = () => {
   activeNodeChart.value.chart.data.datasets = nodeChartData.value.datasets
   activeNodeChart.value.chart.update()
 }
+
+const trackVariableSelection = (selectedVariable) => {
+  try {
+    window.heap.track('Variable Selected', {
+      variableName: selectedVariable.name,
+      variableAbbreviation: selectedVariable.abbreviation
+    })
+  } catch (e) {
+    console.warn('Heap is not available or an error occurred while tracking the event.', e)
+  }
+}
 </script>
 
 <style scoped>

diff --git a/frontend/src/views/NotebooksView.vue b/frontend/src/views/NotebooksView.vue
@@ -91,21 +91,34 @@
             </v-list>
           </v-menu>
         </v-btn>
-        <v-btn v-else :href="nbviewer_url(resource.notebooks[0])" target="_blank">
+        <v-btn
+          v-else
+          :href="nbviewer_url(resource.notebooks[0])"
+          target="_blank"
+          @click="trackEvent('Notebook previewed', resource)"
+        >
           <v-tooltip activator="parent" location="bottom">
             View a rendered copy at nbviewer.org
           </v-tooltip>
           <v-icon left>{{ mdiNotebook }}</v-icon>
           Preview
         </v-btn>
-        <v-btn :href="hydroShareBagUrl(resource)" download>
+        <v-btn
+          :href="hydroShareBagUrl(resource)"
+          download
+          @click="trackEvent('Notebook downloaded', resource)"
+        >
           <v-icon left>{{ mdiDownloadBox }}</v-icon>
           Download
           <v-tooltip activator="parent" location="bottom">
             Download the full HydroShare resource including metadata
           </v-tooltip>
         </v-btn>
-        <v-btn :href="cuahsi_jh_url(resource)" target="_blank">
+        <v-btn
+          :href="cuahsi_jh_url(resource)"
+          target="_blank"
+          @click="trackEvent('Notebook launched', resource)"
+        >
           <v-icon left>{{ mdiRocketLaunch }}</v-icon>
           Launch in CUAHSI
           <v-tooltip activator="parent" location="bottom">
@@ -239,6 +252,17 @@ const getResourceMetadata = async (resourceId) => {
     }
   }
 }
+const trackEvent = (eventName, resource) => {
+  try {
+    window.heap.track(eventName, {
+      resourceId: resource.id,
+      resourceTitle: resource.title,
+      resourceCreators: resource.creators.map((creator) => creator.name).join(', ')
+    })
+  } catch (e) {
+    console.warn('Heap is not available.')
+  }
+}
 </script>
 
 <style scoped>

diff --git a/frontend/src/views/TimeSeriesCharts.vue b/frontend/src/views/TimeSeriesCharts.vue
@@ -4,7 +4,12 @@
       <v-col sm="2">
         <v-card class="elevation-1" color="input">
           <v-card-title> Variables </v-card-title>
-          <v-tabs v-model="activePlt" direction="vertical" color="primary">
+          <v-tabs
+            v-model="activePlt"
+            direction="vertical"
+            color="primary"
+            @update:model-value="trackVariableSelection"
+          >
             <v-tab v-for="plt in chartStore.reachCharts" :value="plt" :key="plt.abbreviation">
               <template v-if="lgAndUp">
                 {{ plt.name }}
@@ -57,6 +62,17 @@ let hasData = computed(() => chartStore.chartData && chartStore.chartData.datase
 const { activePlt, activeReachChart } = storeToRefs(chartStore)
 
 onMounted(() => {})
+
+const trackVariableSelection = (selectedVariable) => {
+  try {
+    window.heap.track('Variable Selected', {
+      variableName: selectedVariable.name,
+      variableAbbreviation: selectedVariable.abbreviation
+    })
+  } catch (e) {
+    console.warn('Heap is not available or an error occurred while tracking the event.', e)
+  }
+}
 </script>
 
 <style scoped>