Developer Docs

WPMC Behavior & Heatmap — Developer Docs (Summary)

Concise internal outline for architecture, tracking, admin UI, endpoints and practical tips.

Architecture

  • Database: wpmc_clicks, wpmc_views, wpmc_sessions, wpmc_mouse_trails (created/migrated in db-setup.php).
  • Client: tracking-core.js (session/view/scroll/duration), user-id-sync.js (UUID in cookie+localStorage), heatmap dots via inject-clicks.js + preview injectors in <iframe>.
  • Admin UI: Dashboard, Page list, Statistics, Settings, About; desktop/mobile tabs; online counter; Reset data.
  • Reports/Charts: Chart.js line/bar/doughnut; AJAX endpoints for views/users/top pages/referrals/device/time spent.
Client Tracking (High-Level)
  • User ID sync: validate UUID, store in localStorage + wpmc_user_id cookie (2y), export to window.wpmc.user_id.
  • Session: wpmc_session and wpmc_session_ts (30-min timeout) for grouping events.
  • Events:
    • Page view → wpmc_extended_save_view (session_id, user_id, url, referrer, device)
    • Scroll depth → 25/50/75/100 → wpmc_extended_save_view_scroll
    • Time on page → beforeunload via sendBeaconwpmc_track_duration (seconds)
    • Admin exclusion: if wpmc_ajax.is_admin_user or wpmc_extended_ajax.is_admin_user → skip
Admin Panel & UX
  • Menu/Pages: Dashboard (wpmc-dashboard), Heatmap Page List (wpmc-clicks-map), Statistics (wpmc-statistics), Settings (wpmc-clicks-settings), About (wpmc-about).
  • Navigation: search by title + Prev/Next across URLs; tabs: Desktop/Mobile; main tabs: Click Map / Referral Sources.
  • Online users: header widget, refresh every 30s via AJAX.
  • Data reset: per-URL (clicks+views), destructive w/ confirmation.
“Online Users” Logic

Public pages update last_activity in wpmc_sessions by wpmc_user_id cookie. Online = DISTINCT user_id active in last 5 minutes (optional 30-min mode).

Charts & AJAX Endpoints
  • Init: chart-init.js fetches JSON by date range with wpmc_chart_nonce.
  • wpmc_chart_views (daily views), wpmc_chart_users (uniques), wpmc_chart_top_pages (Top-10), wpmc_chart_referrals (multi-series), wpmc_chart_device_type (doughnut), wpmc_chart_timespent (horizontal distribution).
  • Alt loader: chart-scripts.js → wpmc_get_chart_data for simple views-over-time.
Security
  • All chart AJAX check wpmc_chart_nonce and log invalid requests.
  • Admin ops (wpmc_reset_data, wpmc_get_online_users_count) use dedicated nonces + capability checks.
  • Tracking endpoints accept sanitized fields only.
Database Schema (Fields)
  • wpmc_clicks: selector/label, coords, scroll/viewport, link URL, action_type (click|navigation), device_type, semantics (type/subtype/area), label_hash, window/element sizes, timestamp.
  • wpmc_views: session_id, user_id, page_url, referrer_type (Direct/Internal/External), referrer_url, device_type, duration_seconds, scroll_depth, post_type, timestamp (+ index session_id,user_id).
  • wpmc_sessions: session_id (PK), user_id, created_at, end_time, last_activity, device_type, referrer_type, referrer_url, user_agent.
  • wpmc_mouse_trails: session_id, page_url, trail (LONGTEXT JSON), device_type, sizes, timestamp (+ index session_id,page_url).

Schemas in db-setup.php; legacy cols removed; last_activity ensured.

Heatmap Rendering
  • Rendered via iframe-render.php with type="module" scripts; mobile branch delays for lazy elements.
  • Panel above iframe (panel-above-iframe.php): color pickers (click/nav/CTA), saved via nonce-protected form.
  • Dot data passes into iframe and draws via inject-clicks.js.
Programmatic Control

Developers can also control the visualization mode directly from scripts or integrations:

// Switch to Heatmap
window.WPMCStd.setMode('heatmap');

// Switch back to Dots
window.WPMCStd.setMode('dots');

// Force re-render of the current mode
window.WPMCStd.reRender();

Alternatively, the mode can be controlled via postMessage:

// Enable Heatmap
{ type: "WPMC_STD_MODE", mode: "heatmap" }

// Enable Dots
{ type: "WPMC_STD_MODE", mode: "dots" }

Endpoint Quick Reference

Public (tracker):
- wpmc_extended_save_view(session_id, user_id, page_url, referrer, device_type)
- wpmc_extended_save_view_scroll(session_id, page_url, scroll_depth, device_type)
- wpmc_track_duration(url, duration, session_id)  // sendBeacon

Admin:
- wpmc_get_online_users_count (nonce: wpmc_admin_ajax_nonce) → { online: int }
- wpmc_reset_data (nonce: wpmc_reset_nonce, page_url) → purge clicks+views for URL

Reports (all require wpmc_chart_nonce + start,end):
- wpmc_chart_views | wpmc_chart_users | wpmc_chart_top_pages
- wpmc_chart_referrals | wpmc_chart_device_type | wpmc_chart_timespent

Forward-Thinking Tips

  • Privacy: consent gate + opt-out; hash PII query params.
  • Mouse trails compression: RLE/δ-encoding, drop micro-moves.
  • Roll-ups: daily summaries for views/users/referrals.
  • DOM resize recovery: stable label_hash/context selectors.
  • REST mirrors: for SPA/external dashboards.
  • WP-Cron cleanup: TTL for sessions/logs beyond retention.
© 2025 We handle WordPress. All of it.