Cookie Policy & Cookieless Tracking

// Google Analytics sets multiple cookies:
document.cookie = "_ga=GA1.2.1234567890.1234567890";      // Client ID (2 years)
document.cookie = "_gid=GA1.2.0987654321.0987654321";    // Session ID (24 hours)
document.cookie = "_gat=1";                               // Rate limiting (1 minute)

// These cookies:
// ❌ Require consent under GDPR/ePrivacy
// ❌ Are blocked by Safari, Firefox, Brave
// ❌ Can be cleared by users anytime
// ❌ Trigger cookie banners
// ❌ Don't work in incognito mode

// Databuddy stores only an anonymous ID:
localStorage.setItem("did", "anon_a7f3d9c2...");  // Random UUID

// Session ID in sessionStorage (cleared on browser close):
sessionStorage.setItem("did_session", "sess_b8e4f1a3...");

// These storage methods:
// ✅ Don't require consent (not cookies)
// ✅ Not blocked by browsers
// ✅ Used for legitimate technical purpose
// ✅ No cookie banners needed
// ✅ Anonymous by design

generateAnonymousId(): string {
  return `anon_${generateUUIDv4()}`;
}

// Example output: "anon_a7f3d9c2-8b4e-4f1a-9c3d-e5f6a7b8c9d0"

generateSessionId(): string {
  return `sess_${generateUUIDv4()}`;
}

// Stored in sessionStorage
sessionStorage.setItem("did_session", sessionId);
sessionStorage.setItem("did_session_timestamp", Date.now().toString());

const sessionAge = Date.now() - parseInt(sessionTimestamp, 10);
if (sessionAge < 30 * 60 * 1000) {  // 30 minutes
  // Session still valid - update timestamp
  sessionStorage.setItem("did_session_timestamp", Date.now().toString());
  return storedId;
}

// Session expired - clean up
sessionStorage.removeItem("did_session");
sessionStorage.removeItem("did_session_timestamp");
sessionStorage.removeItem("did_session_start");

const fetchOptions: RequestInit = {
  method: "POST",
  headers: await this.resolveHeaders(),
  body: JSON.stringify(data ?? {}),
  keepalive: true,
  credentials: "omit",  // ← No cookies sent!
  ...options,
};

// Remove anonymous ID
localStorage.removeItem("did");

// Remove session data
sessionStorage.removeItem("did_session");
sessionStorage.removeItem("did_session_timestamp");
sessionStorage.removeItem("did_session_start");

// Result: All tracking data cleared, new anonymous ID on next visit

function databuddyOptOut() {
  localStorage.setItem("databuddy_opt_out", "true");
  localStorage.setItem("databuddy_disabled", "true");
  window.databuddyOptedOut = true;
}

// Usage
window.databuddyOptOut();

export function isOptedOut(): boolean {
  return (
    localStorage.getItem("databuddy_opt_out") === "true" ||
    localStorage.getItem("databuddy_disabled") === "true" ||
    window.databuddyOptedOut === true
  );
}

"use client";
import { useState, useEffect } from "react";

export function CookieControls() {
  const [storageUsed, setStorageUsed] = useState<number>(0);
  const [hasAnonymousId, setHasAnonymousId] = useState(false);

  useEffect(() => {
    // Check what's stored
    const anonId = localStorage.getItem("did");
    setHasAnonymousId(!!anonId);
    
    // Calculate storage usage
    const stored = JSON.stringify(localStorage).length;
    setStorageUsed(stored);
  }, []);

  const clearAllData = () => {
    localStorage.removeItem("did");
    sessionStorage.removeItem("did_session");
    sessionStorage.removeItem("did_session_timestamp");
    sessionStorage.removeItem("did_session_start");
    
    setHasAnonymousId(false);
    setStorageUsed(0);
    alert("All analytics data cleared. You'll receive a new anonymous ID on next page load.");
  };

  return (
    <div className="border p-4 rounded-lg">
      <h3 className="font-semibold mb-2">Analytics Data (No Cookies)</h3>
      
      <div className="space-y-2 text-sm">
        <div className="flex justify-between">
          <span>Cookies used:</span>
          <span className="font-mono text-green-600">0</span>
        </div>
        
        <div className="flex justify-between">
          <span>Anonymous ID:</span>
          <span className="font-mono">
            {hasAnonymousId ? "Yes (localStorage)" : "None"}
          </span>
        </div>
        
        <div className="flex justify-between">
          <span>Storage used:</span>
          <span className="font-mono">{storageUsed} bytes</span>
        </div>
      </div>

      <button
        onClick={clearAllData}
        disabled={!hasAnonymousId}
        className="mt-4 w-full px-4 py-2 bg-red-100 text-red-700 rounded hover:bg-red-200 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Clear All Analytics Data
      </button>

      <p className="text-xs text-gray-500 mt-2">
        Note: No cookies are used. Only anonymous localStorage data.
      </p>
    </div>
  );
}

<div class="cookie-banner">
  <p>
    We use cookies to analyze website traffic and improve your experience.
    By accepting, you consent to our cookie policy.
  </p>
  
  <button onclick="acceptCookies()">Accept</button>
  <button onclick="rejectCookies()">Reject</button>
  <a href="/cookie-policy">Cookie Policy</a>
</div>

<script>
  function acceptCookies() {
    // Load Google Analytics
    gtag('consent', 'update', {
      'analytics_storage': 'granted'
    });
  }
  
  function rejectCookies() {
    // Disable analytics - lose data
    gtag('consent', 'update', {
      'analytics_storage': 'denied'
    });
  }
</script>

import { Databuddy } from "@databuddy/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Databuddy clientId="your-client-id" />
        {/* That's it. No banner, no consent, no complexity. */}
        {children}
      </body>
    </html>
  );
}