diff --git a/apps/web/src/shared/metrics/AnonymousCountsSetting.test.tsx b/apps/web/src/shared/metrics/AnonymousCountsSetting.test.tsx
new file mode 100644
index 0000000..562f26d
--- /dev/null
+++ b/apps/web/src/shared/metrics/AnonymousCountsSetting.test.tsx
@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+const { requireAuth } = vi.hoisted(() => ({ requireAuth: vi.fn() }))
+vi.mock('../../features/auth/AuthGateContext', () => ({ useAuthGate: () => ({ isGated: true, requireAuth }) }))
+vi.mock('../sound/interactionSounds', () => ({ playInterfaceSound: vi.fn() }))
+import AuthInteractionGate from '../../features/auth/AuthInteractionGate'
+import AnonymousCountsSetting from './AnonymousCountsSetting'
+import { setAnonymousCountsEnabled } from './anonymousCounts'
+afterEach(() => { cleanup(); requireAuth.mockClear() })
+describe('anonymous opt-out with production guest gating active', () => {
+  it.each(['en', 'zh'])('lets a signed-out visitor opt out in %s without unlocking other actions', language => {
+    setAnonymousCountsEnabled(true)
+    const privateAction = vi.fn()
+    render(<AuthInteractionGate><AnonymousCountsSetting language={language} /><button onClick={privateAction}>Private action</button></AuthInteractionGate>)
+    const control = screen.getByRole('switch')
+    expect(control).toBeChecked()
+    fireEvent.pointerDown(control); fireEvent.click(control)
+    expect(control).not.toBeChecked()
+    expect(localStorage.getItem('focusgo.anonymous-counts.enabled')).toBe('false')
+    expect(requireAuth).not.toHaveBeenCalled()
+    fireEvent.click(screen.getByText('Private action'))
+    expect(requireAuth).toHaveBeenCalledTimes(1)
+    expect(privateAction).not.toHaveBeenCalled()
+  })
+})
diff --git a/apps/web/src/shared/metrics/AnonymousCountsSetting.tsx b/apps/web/src/shared/metrics/AnonymousCountsSetting.tsx
index aa90e07..0ecdc39 100644
--- a/apps/web/src/shared/metrics/AnonymousCountsSetting.tsx
+++ b/apps/web/src/shared/metrics/AnonymousCountsSetting.tsx
@@ -5,7 +5,7 @@ import { anonymousCountsEnabled, setAnonymousCountsEnabled, subscribeAnonymousCo
 export default function AnonymousCountsSetting({ language }: { language: string }) {
   const enabled = useSyncExternalStore(subscribeAnonymousCounts, anonymousCountsEnabled, () => false)
   const zh = language === 'zh'
-  return <section className="rounded-[var(--radius-lg)] border p-5" aria-labelledby="anonymous-counts-title">
+  return <section className="rounded-[var(--radius-lg)] border p-5" aria-labelledby="anonymous-counts-title" data-auth-preview-allowed="true">
     <div className="flex items-center justify-between gap-4">
       <h3 id="anonymous-counts-title" className="font-semibold">{zh ? '匿名使用计数' : 'Anonymous usage counts'}</h3>
       <Switch aria-labelledby="anonymous-counts-title" checked={enabled} onCheckedChange={setAnonymousCountsEnabled} />