⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣟⡄
                                                          ⠀⠀⠀⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⡏⡇
                                                          ⠀⠀⠀⢹⠑⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡼⠃⢸⣇
██╗   ██╗ █████╗ ███╗   ██╗██╗██╗     ██╗      █████╗     ⠀⠀⠀⣇⢳⠀⠙⢦⡀⠀⠀⠀⠀⠀⠀⠀⢠⠎⠀⠀⠸⣹
██║   ██║██╔══██╗████╗  ██║██║██║     ██║     ██╔══██╗    ⠀⠀⠀⢹⠀⢧⠀⠀⠈⢦⣀⡖⠊⠉⠓⠚⠀⠀⠀⠀⠸⣼
██║   ██║███████║██╔██╗ ██║██║██║     ██║     ███████║    ⠀⠀⠀⠈⡆⠀⠧⢀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠖⠒⠄⠀⠀⡇⡇
╚██╗ ██╔╝██╔══██║██║╚██╗██║██║██║     ██║     ██╔══██║    ⠀⠀⠀⠀⣹⠂⠀⠉⠀⠀⠀⡀⠀⠀⠀⢸⠀⢰⣿⣧⠘⣄⠘⠦⣤⣄⣀⡀
 ╚████╔╝ ██║  ██║██║ ╚████║██║███████╗███████╗██║  ██║    ⠀⠀⣠⠞⠁⡆⠀⣾⣿⡄⣸⣷⣾⣿⣿⣧⡈⠉⠀⠀⣸⠀⠀⠀⣀⡤⠞⠉⠀⠀⠀⠀⠀⢀
  ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝╚══════╝╚══════╝╚═╝  ╚═╝    ⠛⠭⠤⡤⠸⣄⠀⡉⣉⠖⠻⣟⣛⣛⡿⠋⠉⠉⠓⠛⠚⠉⠈⠉⠑⢒⡆⠀⠀⠀⢀⠞⠉⣝⣠⡄
███████╗████████╗ █████╗ ████████╗███████╗                ⠀⠀⡠⠯⠤⠴⠒⠉⠀⠀⠀⠀⠀⣤⡀⢀⡴⠀⠀⠀⠀⠀⠀⢤⣴⣚⠁⠀⢀⠖⡿⠃⠀⠀⠀⠀⠀⣸
██╔════╝╚══██╔══╝██╔══██╗╚══██╔══╝██╔════╝                ⠀⠛⠉⡽⠀⠀⠀⠀⠀⠀⠀⠓⠚⠁⠈⠉⠀⠀⠀⠀⢀⠒⠒⠒⠋⠉⠀⣴⣁⣈⡁⠀⠀⠀⠀⠀⢀⠇
███████╗   ██║   ███████║   ██║   ███████╗                ⠀⠀⠴⠯⠤⠤⠤⢴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣷⢆⠀⠀⠀⢰⢻⡎⠀⠀⠀⣯⠋⢣⠀⠀⠀⠛⡆
╚════██║   ██║   ██╔══██║   ██║   ╚════██║                ⠀⠀⠀⠀⠀⠀⠀⢠⡷⠢⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠻⠀⢇⠀⢠⠃⡟⠀⠀⠀⠀⠈⠀⢀⠇⠀⠀⡼⠁
███████║   ██║   ██║  ██║   ██║   ███████║                ⠀⠀⠀⠀⠀⠀⠀⡞⠁⠀⠘⢦⡞⢆⠀⠀⢘⢧⡜⠀⠀⠀⠘⣼⠀⠀⠀⠀⠀⠀⠀⠀⠀⠛⠙⡶⡏
╚══════╝   ╚═╝   ╚═╝  ╚═╝   ╚═╝   ╚══════╝                ⠀⠀⠀⠀⠀⠀⢠⠂⠀⠀⠀⠀⠀⠀⠘⣆⢸⠁⠉⠀⠀⠀⠀⠸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠟⠁
                                                          ⠀⠀⠀⠀⠀⠀⡏⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⠀⠀⠀⠀⠀⠀⠀⠘⡆⠀⠀⠀⠀⠀⠀⠀⡴⠎⠁
                                                          ⠀⠀⠀⠀⠀⠀⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠀⠀⠀⠀⢀⡤⠊⠁
                                                          ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠉

A single HTML file that turns your Google Analytics 4 CSV exports into an interactive traffic analysis dashboard. No install, no server, no dependencies — just open in a browser and drop your files.

Screenshots

What It Does

Drop GA4 CSV exports and instantly see:

• Traffic Timeline — Weekly active users across multiple years with 8-week moving average
• Algorithm Impact Analysis — Measures traffic change in the 4 weeks before vs. after each Google Core Update and AI Overviews event. Sorted by severity so you see what hurt (or helped) the most.
• Key Insights — Auto-generated summary: overall trend, top growing/declining pages, algorithm correlations
• Winners & Losers — Side-by-side ranking of pages with the biggest gains and biggest drops (by absolute views)
• Top 25 Pages — Sortable table with per-year views, YoY change, engagement time, and trend arrows
• SERP Event Overlays — 14 Google algorithm updates and AI Overviews milestones (2023–2026) plotted directly on your traffic timeline
• Smart Data Handling — Detects new pages (won't show misleading growth for pages that didn't exist), annualizes partial-year data for fair comparison, handles both daily and weekly GA4 exports

Quick Start

1. Open ga4.html in any browser
2. In GA4, go to Reports → User engagement & retention
3. For each year: set date range → export Pages and screens + Overview as CSV
4. Drop all CSV files onto the page
5. Done — dashboard renders instantly

No npm, no build step, no API keys. Works offline. Works with file:// protocol.

How to Export GA4 Data

For each year you want to compare:
  1. Set date range to one year (e.g. Jan 1 – Dec 31, 2024)
  2. Open Pages and screens → share icon (↗) → Download CSV
  3. Open Overview → share icon (↗) → Download CSV
  4. Change year and repeat

Then drop all CSV files at once.

The tool auto-detects CSV types (Pages vs. Engagement) and years from filenames or metadata.

Features in Detail

Algorithm Impact Table

For each SERP event in your data's date range, calculates the average weekly traffic in the 4 weeks before and after. Shows the percentage impact, sorted by severity. Events with insufficient data (e.g., your GA4 property didn't exist yet) are automatically filtered out.

Partial Year Handling

When you include a partial year (e.g., Jan–Mar 2026), the tool:

• Shows actual view counts in the table (raw data, never inflated)
• Uses annualized values for Change %, insights, and winners/losers (marked with a blue *)
• Hover over any * to see: "Annualized: partial year projected to 365 days"

New Page Detection

Pages with < 100 views in the previous year that jump 3x+ are marked "New" instead of showing misleading growth percentages. These are excluded from Winners/Losers and Insights.

Year Filter

When multiple years are loaded, a dropdown lets you view all years or drill into a single year.

Copy as Markdown

Click "Copy Report" to get the full analysis as markdown — paste into Slack, docs, or anywhere.

Session Persistence

Data survives browser refresh (via sessionStorage). Clears when you close the tab.

SERP Events

The tool ships with 14 hardcoded Google algorithm events (2023–2026). To add new events, edit the SERP_EVENTS array near the top of the <script> block:

const SERP_EVENTS = [
    { name: 'Event Name', date: '2026-10-15', type: 'google', desc: 'Description' },
    // type: 'google' for Core Updates, 'aio' for AI Overviews
];

Events are embedded in the file — no external fetch, no server needed. Add new ones as Google releases them.

Updating with Claude Code

The easiest way to keep events current is with Claude Code:

git clone https://github.com/risukisu/vanilla-stats.git
cd vanilla-stats
claude

Then paste this (or similar) prompt:

Check for any Google Core Updates or AI Overviews changes released after March 2026 and add them to the SERP_EVENTS array in ga4.html. Use type 'google' for Core Updates and 'aio' for AI Overviews. Keep the same format as existing entries.

Demo Data

The demo-data/ folder contains synthetic data for a fictional tech company (NovaTech) spanning 2024–2026. This showcases all features:

• Traditional tech content declining (Kubernetes, Docker, REST API posts)
• AI/LLM content growing (prompt engineering, vector databases, RAG patterns)
• Visible traffic dips at Google Core Update dates
• Partial 2026 data with annualization

Drop all 6 files from demo-data/ to see the full dashboard.

Tech Stack

• Single HTML file (~1,500 lines)
• Vanilla JavaScript (no frameworks)
• Chart.js 4.x via CDN (only external dependency)
• CSS custom properties, system fonts
• FileReader API for CSV parsing
• sessionStorage for persistence

License

MIT License — see LICENSE for details.

---

Built with Claude Code as copilot. CANDOR: copilot — AI writes the code, I make the decisions.