Building a JavaScript Analytics Collector

From First Beacon to Production Collector

A 10-module progressive tutorial that takes you from a minimal beacon to a production-ready, configurable, extensible analytics collector script. Each module builds on the last — by the end, you'll understand how tools like Google Analytics and Plausible work under the hood.

Tutorial Modules

01. Hello Beacon

Send your first analytics beacon:

  • navigator.sendBeacon()
  • Fire-and-forget delivery
  • JSON payloads
Start Module →

02. Technographics

Collect browser and device data:

  • User-Agent & viewport
  • Network Information API
  • Session identity without cookies
Start Module →

03. Server-Log Collection

Analytics without custom JavaScript:

  • Tracking pixel pattern
  • Custom Apache/Nginx log formats
  • Client Hints & script-to-header bridge
Start Module →

04. Custom Endpoint

Build a collection server:

  • Express POST handler with CORS
  • sendBeacon → fetch(keepalive) fallback
  • JSON Lines storage format
Start Module →

05. Performance Timing

Measure page load performance:

  • Navigation Timing API
  • Resource Timing aggregation
  • TTFB & DOM milestones
Start Module →

06. Web Vitals

Core Web Vitals collection:

  • LCP via PerformanceObserver
  • CLS accumulation
  • INP measurement & thresholds
Start Module →

07. Error Tracking

Catch and report errors:

  • JS runtime & promise errors
  • Resource load failures
  • Deduplication & rate limiting
Start Module →

08. Configuration API

Refactor into a library:

  • IIFE / revealing module pattern
  • init/track/set/identify API
  • Sampling & debug mode
Start Module →

09. Extensions & Plugins

Build a plugin system:

  • collector.use() registration
  • Click tracking extension
  • Scroll depth extension
Start Module →

10. Production Readiness

Ship it:

  • Async loading & command queue
  • Consent management & bot detection
  • Retry queue & minification
Start Module →
Prerequisites: Modules 01–03 require only HTML and JavaScript. Module 03 uses a PHP tracking pixel (requires a PHP-capable server). Module 04 introduces Node.js/Express — see the Node.js Tutorial Module 03 for Express basics.

Companion Resources

Mapping to Reference Implementation

The reference collector.js contains the functions you will build across these modules. Use this table to see where each piece fits:

Existing Function Tutorial Module
initialBrowserData() Module 02
getNavigatorInfo() Module 02
getNetworkInformation() Module 02
getNavigationTiming() Module 05
initResourceTiming() Module 05
initPerformanceObserver() Module 06
initLargestContentfulPaint() Module 06
initLayoutShift() Module 06
initFirstInputDelay() → INP Module 06
getVitalsScore() Module 06
reportError() Module 07
reportPerf() / pushTask() Module 08
config object Module 08