# How to Vibe Code Your Own Crazy Egg (and Stop Paying for It)

> Website optimization and behavioral analytics platform

- Site: https://crazyegg.com
- Category: Web Analytics & CRO
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 3-4 weekends of focused development and debugging

## Verdict

Build a single-user personal subset featuring a lightweight tracking pixel, basic click heatmaps, and a simple dashboard, but expect frustrating edge cases with DOM coordinate mapping and script sanitization.

Replicating Crazy Egg for personal use is an engaging engineering challenge. The core tracking loop—injecting an async JS snippet, capturing click events, and rendering a CSS heatmap overlay—can be vibecoded over a couple of weekends. However, you will immediately run into thorny edge cases: handling responsive CSS layouts where absolute pixel coordinates shift across mobile and desktop, sanitizing inputs so you don't accidentally log someone's password or credit card, and keeping the tracking script payload tiny. If you just want behavioral analytics on your own sites, paying $29/mo is vastly cheaper than the debugging hours, but building it yourself is a masterclass in frontend data pipelines.

### What you can't replicate

- The massive historical ingestion and multi-tenant data pipelines handling millions of external domain events
- Native integrations across thousands of third-party e-commerce and CMS plugins

## What it does

Crazy Egg helps website owners understand visitor behavior through heatmaps, session recordings, A/B testing, surveys, and web analytics.

### Core features

- Asynchronous JavaScript tracking snippet injection
- DOM mutation observer and event recording for session playbacks
- Click and scroll coordinate aggregation for visual heatmaps
- Web analytics real-time traffic dashboard
- A/B split testing variation delivery
- Targeted survey widget deployment

## The business

### Pricing

- Starter: $29/mo — For basic website tracking and small traffic volumes
- Plus: $99/mo — Most popular tier for growing sites
- Pro: $249/mo — For high-traffic sites needing advanced targeting
- Enterprise: $599/mo — For large-scale operations requiring SSO

Founded 2006.
Team size: Small-to-mid-size.

## The hard parts

- Capturing high-frequency DOM mutations and mouse movements without choking host site performance
- Sanitizing sensitive user inputs (passwords, PII) client-side before ingestion for privacy compliance
- Mapping and normalizing absolute and relative click coordinates across varying screen resolutions and responsive layouts
- Storing and streaming high-volume timeline event payloads efficiently

## How to vibe code Crazy Egg

### Prerequisites

- Node.js (free): Required local runtime for running Next.js and package management
- GitHub (free): Source control and deployment pipeline connection
- Cloudflare account (free): Hosting the Next.js frontend, API routes, and SQLite database storage

### Recommended AI tools

- Claude Code: Autonomous terminal agent capable of scaffolding both the client-side tracking script and the dashboard full-stack
- Cursor: Ideal for fine-tuning CSS heatmap overlay components and canvas coordinate mapping

### Stack

- Frontend: Next.js with Tailwind CSS and Canvas API for heatmaps
- Backend: Next.js API Routes / Cloudflare Workers
- Database: Cloudflare D1 (Serverless SQLite)
- Auth: better-auth
- Payments: None (personal-use clone)
- Other: Resend for email notifications, Sentry for error monitoring

### Hosting

- Cloudflare (Hosting Next.js frontend, API ingestion endpoints, and D1 SQLite database storage on the edge): $0/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, configure better-auth for single-user access, and design the SQLite schema for websites, heatmap reports, and tracked events.

```
Scaffold a new Next.js project with Tailwind CSS and TypeScript. Set up better-auth with SQLite using Drizzle ORM or native bindings for Cloudflare D1. Create database tables for: `websites` (id, user_id, domain, created_at), `heatmaps` (id, website_id, page_path, created_at), and `click_events` (id, heatmap_id, x_coordinate, y_coordinate, viewport_width, element_selector, created_at). Implement an authentication check so only the owner can access the dashboard. Ensure the setup is compatible with Cloudflare Workers deployment.
```

2. **Client-Side Tracking Snippet** — Build a lightweight, asynchronous JavaScript tracking script that targets external sites, captures click coordinates and viewport data, and batches payload dispatch via beacon API.

```
Create a vanilla JavaScript tracking snippet (tracker.js) designed to be embedded in external websites via a single script tag. The script should read a site identifier from its attributes, listen for document click events, capture clientX, clientY, document scroll offsets, viewport dimensions, and the target element's CSS selector. Implement batched event collection using `navigator.sendBeacon()` or `fetch` with `keepalive: true` to avoid blocking page unloads. Ensure it safely ignores sensitive password fields and inputs to protect user privacy.
```

3. **Data Ingestion API Endpoint** — Create a high-performance backend API endpoint that receives click payloads from the tracking script, validates website ownership tokens, and writes events to Cloudflare D1.

```
Build a Next.js API route (/api/collect) that accepts POST requests containing batched click and behavioral telemetry from the tracking snippet. Validate the incoming request against the `websites` table using a site token. Sanitize all incoming payload fields (x/y coordinates, viewports, paths) and perform bulk inserts into the `click_events` table in Cloudflare D1. Implement appropriate CORS headers so the tracking script can report from any external domain.
```

4. **Heatmap Report Visualization UI** — Develop the dashboard interface that visualizes click coordinates over a rendered preview or screenshot of the target web page using HTML5 Canvas or SVG overlays.

```
Build a dashboard page in Next.js that lists created heatmaps for a selected website and path. When viewing a specific heatmap, fetch the associated `click_events` from the database. Create an interactive React component using an HTML5 Canvas or absolute-positioned SVG layer overlaid on a frame or screenshot container. Scale the recorded x/y click coordinates relative to the current viewport width and render glowing heatmap radial gradients or dot plots representing user click density.
```

5. **Dashboard Overview & Web Analytics** — Implement a real-time traffic overview dashboard displaying total pageviews, unique visitors, and basic conversion funnel metrics.

```
Build a Web Analytics overview dashboard page in Next.js. Query the database to display total tracked pageviews, active domains, and a time-series chart of traffic over the last 7 and 30 days using a charting library like Recharts. Add summary metric cards and a table showing top visited paths and referrer sources captured by the tracking snippet.
```

### Cost vs paying

**Starting costs (one-time):**

- AI coding tool subscription (Claude Pro / Cursor): $20 one-time
- Total: ~$20 one-time

**Ongoing costs (monthly):**

- Cloudflare Free Tier hosting: $0/mo
- Total: $0/mo

- Paying for the SaaS instead: $29/mo (Starter tier)
- Build time: 25-35 hours
- AI tool credits: $20 (Claude Pro / Cursor Pro)
- Break-even: Never (built for learning and personal control)

## Sources

- [Crazy Egg Official Website](https://www.crazyegg.com)
- [Crazy Egg Pricing Page](https://www.crazyegg.com/pricing)