How We Built This Test Site

A practical, minimal playground for validating analytics, search, and UX instrumentation.

Why This Exists

Most analytics issues are not about scale—they're about confidence. You need a place to simulate real user behavior without the noise of a production app. This site intentionally includes a small, opinionated set of UI elements that cover the majority of tracking scenarios: page views, navigation, calls to action, forms, modals, tabs, search, and outbound clicks.

Architecture Overview

The site is plain HTML styled with Bulma. A lightweight, dependency-free script (assets/cc-site-client.js) provides analytics and an optional command-palette search widget. The script:

  • Respects Do Not Track and optional consent.
  • Creates a persistent Visitor ID and a 30-minute idle Session ID.
  • Captures UTM parameters and a short referrer trail.
  • Tracks page views (including SPA-style route changes), scroll depth, clicks, errors, and heartbeats.
  • Sends events in small batches via sendBeacon with a fetch fallback.

Key Screens and Interactions

Home

A hero, a grid of interactive cards, and tabs to switch between sections. You can open a modal and submit a form to exercise form tracking and error handling.

Services

A simple card grid linked to the Contact page. Each “Enquire” action is tagged for event capture so you can verify metadata in your pipeline.

Blog

Two detailed articles (including this one) generate long-scroll behavior, heading navigation, and outbound link opportunities.

Search

A minimal page that mirrors the command-palette search widget and lets you test query telemetry, selection, and empty states.

Analytics Events

The embed emits a small vocabulary of events so dashboards are easy to build:

  • pageview — Fired on load and history changes; includes URL, title, language, timezone, viewport, and UTM.
  • scroll — Debounced updates with percentage depth to validate engagement.
  • click — Normalized anchor clicks with text snippet and outbound flag.
  • hb (heartbeat) — Visibility-aware pings to sanity check sessionization.
  • perf / web_vitals — Basic timings plus FCP/LCP where supported.
  • error / promise_rejection — Simple error telemetry for client issues.
  • search_ui / search_query / search_select — Command-palette interactions.

Search Widget

The command palette opens with ⌘/Ctrl + K or via the floating button. It issues debounced requests to your configured search endpoint and renders title, snippet, and URL with subtle highlighting. The UI is accessible, keyboard-first, and easy to theme via a single accent color.

SPA-Friendly Navigation

While this site uses static pages, the client script patches history.pushState and replaceState so you can drop it into a SPA and still get pageview events on route changes. The same hook is useful if you progressively enhance static pages with client-side navigation.

Performance Considerations

Events batch and flush opportunistically. When the tab is backgrounded or on page unload, the client prefers sendBeacon to avoid blocking navigation. If a network error occurs, the batch is re-queued and retried later.

Try This Checklist

  1. Load the home page and switch between tabs.
  2. Open the modal, submit the form (with and without errors).
  3. Navigate to Services and click several “Enquire” CTAs.
  4. Open the Search widget (⌘/Ctrl + K) and run three queries.
  5. Read this post, scroll to 90%, and follow an outbound link.

Conclusion

This test site gives you fast feedback: instrument, interact, verify. Once your pipeline reliably captures these baseline events, expanding to custom business events becomes straightforward and low risk.