# GA4 + Clarity tracking prep — t_767905fb

## Scope

No production deployment, no Cloudflare env write, no external release performed.

## Code changes prepared

- `src/components/Analytics.tsx`
  - Keeps existing Plausible script.
  - Adds conditional GA4 script injection from `NEXT_PUBLIC_GA_MEASUREMENT_ID`.
  - Adds conditional Microsoft Clarity injection from `NEXT_PUBLIC_CLARITY_ID`.
  - Extends `trackEvent()` to forward sanitized custom events to Plausible, GA4, and Clarity.
  - Sanitizes event names / prop keys and only accepts string/number/boolean values.

- `src/components/VideoCompressor.tsx`
  - Normalizes key funnel events:
    - `file_selected`
    - `compression_started`
    - `compression_completed`
    - `download_clicked`
    - `compression_failed_reason`
  - Adds low-risk dimensions only:
    - size buckets
    - preset
    - target size bucket
    - resolution option
    - quality option
    - result status
    - device class
    - mime category for unsupported-file failure
  - Does not send filename, file path, thumbnail, blob URL, or media content to analytics.

## Required Cloudflare Pages environment variables

Set these in Cloudflare Pages production build environment when IDs are available:

```txt
NEXT_PUBLIC_GA_MEASUREMENT_ID=<GA4 Measurement ID, format G-XXXXXXXXXX>
NEXT_PUBLIC_CLARITY_ID=<Microsoft Clarity project ID>
```

Sources:

- GA4 Measurement ID: Google Analytics → Admin → Data streams → Web stream → Measurement ID.
- Clarity ID: Microsoft Clarity → Project → Settings → Setup → tracking code / project id.

Important: this is a Next.js static export / Pages build. These `NEXT_PUBLIC_*` values must be present during the production build, not only runtime, or scripts will not appear in generated HTML/assets.

## Verification run

Commands run locally in `/root/projects/videocompressor`:

```bash
npm run lint
npm run build
npm run seo:audit
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-TEST12345 NEXT_PUBLIC_CLARITY_ID=claritytest123 npm run build
```

Results:

- `npm run lint`: passed with 2 existing warnings in `src/components/Site.tsx` about `<img>` usage; no errors.
- `npm run build`: passed; 13 static pages generated.
- `npm run seo:audit`: passed for 6 P0 pages.
- Dummy-env build: passed; generated output contains:
  - `googletagmanager.com/gtag/js?id=G-TEST12345`
  - `G-TEST12345`
  - `claritytest123`
  - `clarity.ms/tag`
  - `plausible.io/js/script.js`

## Current repo state

Uncommitted source diff only:

```txt
src/components/Analytics.tsx       | 60 +++++++++++++++++++++++++++++++++++---
src/components/VideoCompressor.tsx | 29 +++++++++++++-----
```

No commit, push, deploy, or production env mutation was performed because task explicitly forbids automatic deployment / production env writes.

## Kanban caveat

`kanban_show(task_id="t_767905fb")` against active `site-review` returned `task not found`. The task context was recovered from `/root/.hermes/kanban/boards/site-review-repair-backup-20260605_113333/kanban.db`, where the card exists as `[Follow-up videocompressor] 准备 GA4 + Clarity tracking 接入补齐`.