Modified event recording

Author: Benjamin Davison

client/src/components/CookieBanner.vue

@@ -30,10 +30,16 @@ const loadGoogleAnalytics = () => {
   script.async = true;
   document.head.appendChild(script);
 
+  // We must attach dataLayer and gtag to 'window' explicitly
+  // so that MapView.vue can access them.
   window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', GA_MEASUREMENT_ID);
+  
+  window.gtag = function(){
+    window.dataLayer.push(arguments);
+  };
+
+  window.gtag('js', new Date());
+  window.gtag('config', GA_MEASUREMENT_ID);
   
   console.log("?? Google Analytics Loaded via Custom Component");
 };

client/src/views/MapView.vue

@@ -412,7 +412,6 @@ import axios from 'axios';
 import Plotly from 'plotly.js-dist-min'; 
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
-import { event } from "vue-gtag";
 
 // --- API CONFIGURATION ---
 // 1. Get the URL (Localhost in dev, Ngrok in prod)
@@ -428,6 +427,16 @@ const apiClient = axios.create({
   }
 });
 
+// --- NATIVE GOOGLE ANALYTICS TRACKING ---
+const trackEvent = (eventName, params = {}) => {
+  if (typeof window.gtag === 'function') {
+    window.gtag('event', eventName, params);
+    console.log(`?? GA Event Sent: ${eventName}`, params);
+  } else {
+    console.log(`?? GA Event Skipped (Not loaded): ${eventName}`);
+  }
+};
+
 // --- CONSTANTS ---
 // Colors for selected points (cycles through this list)
 const COLORS = [
@@ -654,11 +663,13 @@ const onMapClick = async (e) => {
   if (selectedPoints.value.length >= 10) return; 
   
   // Track clicks
-  event("map_click", {
-    event_category: "interaction",
-    event_label: "extract_timeseries",
-    region: currentRegion.value // Tracks 'Greenland' or 'Antarctica'
-  });
+  trackEvent("map_click", {
+	  event_category: "interaction",
+	  event_label: "extract_timeseries",
+	  region: currentRegion.value,
+	  lat: e.latlng.lat.toFixed(4),
+	  lon: e.latlng.lng.toFixed(4)
+	});
   
   const newId = Date.now();
   const color = COLORS[selectedPoints.value.length % COLORS.length];
@@ -863,12 +874,13 @@ const downloadChartImage = async () => {
   }
   
   // Track png downloads
-  event("download", {
-    event_category: "export",
-    event_label: "png_chart",
-    plot_type: currentPlotVar.value
-  });
-  
+  trackEvent("file_download", {
+	  event_category: "export",
+	  event_label: "png_chart",
+	  file_extension: "png",
+	  file_name: `velocity_plots_${currentRegion.value}`,
+	  plot_type: currentPlotVar.value
+	});
   
   statusMessage.value = "Generating image(s)...";
   
@@ -931,12 +943,14 @@ const handleDownload = async () => {
   if (selectedPoints.value.length === 0) return;
   
   // Track csv downloads
-  event("download", {
-    event_category: "export",
-    event_label: "csv_data",
-    region: currentRegion.value,
-    count: selectedPoints.value.length
-  });
+  trackEvent("file_download", {
+	  event_category: "export",
+	  event_label: "csv_data",
+	  file_extension: "zip", // or csv
+	  file_name: "velocity_data_batch",
+	  region: currentRegion.value,
+	  count: selectedPoints.value.length
+	});
   
   // Single File: Direct CSV download
   if (selectedPoints.value.length === 1) {