log to supabase

app/static/js/attacks.js

@@ -8,14 +8,36 @@ class AttackSimulator {
 
     initializeEventListeners() {
         // Tab switching
+        // document.querySelectorAll('.attack-tab').forEach(tab => {
+        //     tab.addEventListener('click', (e) => {
+        //         this.switchTab(e.target.dataset.attack);
+        //     });
+        // });
+
         document.querySelectorAll('.attack-tab').forEach(tab => {
-            tab.addEventListener('click', (e) => {
-                this.switchTab(e.target.dataset.attack);
+          tab.addEventListener('click', (e) => {
+            const attackType = e.currentTarget.dataset.attack; // use currentTarget (safer than target)
+
+            // 1) UI event (generic)
+            track('ui_click', {
+              component: 'attack_tab',
+              attack: attackType,
+              page: 'privacy_attacks'
+            });
+
+            // 2) Semantic event (recommended)
+            track('attack_tab_open', {
+              attack: attackType,
+              page: 'privacy_attacks'
             });
+
+            this.switchTab(attackType);
+          });
         });
 
+
         // Slider updates
-        this.setupSliderUpdates();
+        // this.setupSliderUpdates();
 
         // ✅ Add this (bind events for whatever tab is active on load)
         this.bindAttacksPageEvents();
@@ -199,6 +221,7 @@ class AttackSimulator {
 
 
     switchTab(attackType) {
+          const prev = document.querySelector('.attack-tab.active')?.dataset?.attack;
         // Update tab buttons
         document.querySelectorAll('.attack-tab').forEach(tab => {
             tab.classList.remove('active');
@@ -216,6 +239,14 @@ class AttackSimulator {
 
         // ✅ Add this (bind events for the newly activated tab)
         this.bindAttacksPageEvents(attackType);
+
+          if (prev && prev !== attackType) {
+            track('attack_tab_switch', {
+              from: prev,
+              to: attackType,
+              page: 'privacy_attacks'
+            });
+          }
     }
 
     initializeCharts() {
@@ -1215,6 +1246,17 @@ function drawCompleteNoise(ctx, width, height) {
 // Initialize when page loads
 document.addEventListener('DOMContentLoaded', function() {
     window.attackSimulator = new AttackSimulator();
+
+
+      // Track initial active tab
+      const active = document.querySelector('.attack-tab.active');
+      if (active) {
+        track('attack_tab_open', {
+          attack: active.dataset.attack,
+          page: 'privacy_attacks',
+          reason: 'page_load'
+        });
+      }
     
     // Run initial updates
     window.attackSimulator.updateMembershipDemo();