feat: track consent (#2668)

Author: foodaka

src/components/Analytics/AnalyticsConsent.tsx

@@ -2,6 +2,7 @@ import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { CookieConsent as AnalyticsConsentBanner } from 'react-cookie-consent';
 import { Link } from 'src/components/primitives/Link';
+import { CONSENT_KEY } from 'src/store/analyticsSlice';
 import { useRootStore } from 'src/store/root';
 import { useShallow } from 'zustand/shallow';
 
@@ -27,7 +28,7 @@ export default function AnalyticsBanner() {
   const isMobile = useMediaQuery(breakpoints.down('sm'));
 
   const hasUserMadeChoice =
-    typeof window !== 'undefined' && localStorage.getItem('userAcceptedAnalytics') !== null;
+    typeof window !== 'undefined' && localStorage.getItem(CONSENT_KEY) !== null;
 
   // Note: If they have already chosen don't show again unless configured from footer
   if (hasUserMadeChoice) return null;
@@ -109,7 +110,7 @@ export default function AnalyticsBanner() {
         onAccept={() => {
           optInAnalytics();
         }}
-        cookieName="userAcceptedAnalytics"
+        cookieName={CONSENT_KEY}
       >
         <Box>
           We may employ on-the-spot tracking techniques during your browsing session to collect data

src/store/analyticsSlice.ts

@@ -21,6 +21,11 @@ const createAppContextPlugin = (context: string) => ({
 
 const AMPLITUDE_API_KEY = process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY || '';
 
+// Consent version - increment this to force all users to re-consent
+const CONSENT_VERSION = 'v1';
+export const CONSENT_KEY = `userAcceptedAnalytics_${CONSENT_VERSION}`;
+const CONSENT_COUNTED_KEY = `analyticsConsentCounted_${CONSENT_VERSION}`;
+
 export type TrackEventProperties = {
   [key: string]: string | number | boolean | Date | undefined;
 };
@@ -78,7 +83,7 @@ export const createAnalyticsSlice: StateCreator<
     eventsTrackingInitialized: false,
 
     initializeEventsTracking: () => {
-      const userAcceptedAnalytics = localStorage.getItem('userAcceptedAnalytics') === 'true';
+      const userAcceptedAnalytics = localStorage.getItem(CONSENT_KEY) === 'true';
       const isInitialized = get().eventsTrackingInitialized;
 
       if (!AMPLITUDE_API_KEY) return;
@@ -120,18 +125,65 @@ export const createAnalyticsSlice: StateCreator<
       }
     },
     acceptAnalytics: () => {
-      localStorage.setItem('userAcceptedAnalytics', 'true');
+      localStorage.setItem(CONSENT_KEY, 'true');
       set({ isTrackingEnabled: true, analyticsConfigOpen: false });
 
       get().initializeEventsTracking();
+
+      // Only track the consent event once per user per consent version
+      const alreadyCounted = localStorage.getItem(CONSENT_COUNTED_KEY) === 'true';
+      if (!alreadyCounted) {
+        localStorage.setItem(CONSENT_COUNTED_KEY, 'true');
+        get().trackEvent('analytics_consent_given');
+      }
     },
     rejectAnalytics: () => {
-      localStorage.setItem('userAcceptedAnalytics', 'false');
+      localStorage.setItem(CONSENT_KEY, 'false');
+
+      // Only track the consent event once per user per consent version
+      const alreadyCounted = localStorage.getItem(CONSENT_COUNTED_KEY) === 'true';
+
+      if (!alreadyCounted && AMPLITUDE_API_KEY) {
+        localStorage.setItem(CONSENT_COUNTED_KEY, 'true');
+
+        if (!get().eventsTrackingInitialized) {
+          // Initialize minimal tracking just for this one event
+          init(AMPLITUDE_API_KEY, {
+            autocapture: false,
+            trackingOptions: {
+              ipAddress: false,
+              language: false,
+              platform: false,
+            },
+          });
+          add(createAppContextPlugin('app'));
+          set({ eventsTrackingInitialized: true });
+        }
+
+        try {
+          // Temporarily enable tracking to send the opt-out event
+          // This ensures the event is sent even if Amplitude is in opt-out mode
+          setOptOut(false);
+
+          track('analytics_consent_declined', {
+            app_context: 'app',
+          });
+
+          // Immediately disable tracking again
+          setOptOut(true);
+        } catch (err) {
+          console.log('Error tracking opt-out event', err);
+        }
+      }
+
+      // Now disable all tracking
       setOptOut(true);
       set({ isTrackingEnabled: false, analyticsConfigOpen: false });
     },
     setAnalyticsConfigOpen: (value: boolean) => {
-      localStorage.removeItem('userAcceptedAnalytics');
+      // Clear the current consent version when reopening analytics config
+      localStorage.removeItem(CONSENT_KEY);
+      localStorage.removeItem(CONSENT_COUNTED_KEY);
 
       set({ analyticsConfigOpen: value });
     },