Download the PHP package benmacha/mousetracker without Composer
On this page you can find all versions of the php package benmacha/mousetracker. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download benmacha/mousetracker
More information about benmacha/mousetracker
Files in benmacha/mousetracker
Package mousetracker
Short Description Self-hosted mouse, click and scroll tracker for Symfony: heatmaps, scroll maps and session replay. React dashboard usable from Twig, plain JS, React and Vue.
License MIT
Informations about the package mousetracker
MouseTracker — self-hosted heatmaps & session replay for Symfony
Open source Hotjar / Mouseflow / Microsoft Clarity alternative for Symfony 5.4, 6.4 and 7.x:
mouse movement & click heatmaps, scroll maps and session recording / replay,
stored in your database. GDPR friendly, no third-party service, plugs into any site with one <script> tag.
Table of contents
- Why MouseTracker
- Features
- Requirements
- Installation
- Record your site (zero code)
- Dashboard — Twig, plain JavaScript, React, Vue
- Replay is read-only
- Configuration
- Theming
- HTTP API
- Security & GDPR
- FAQ
- Upgrading from 2.x
Why MouseTracker
| MouseTracker | SaaS (Hotjar, Mouseflow, Clarity…) | |
|---|---|---|
| Data location | your own database (Doctrine) | third-party servers |
| Cost | free, MIT | per session / per month |
| GDPR / privacy | no data leaves your infrastructure | data processor agreement needed |
| Integration | Symfony bundle + one script tag | external script |
| Dashboard | inside your admin (React, Vue, Twig, Web Component) | external website |
Features
- Session recording & replay — cursor, clicks (numbered), scroll, hover states, viewport resizes, typed values; timeline with seek, 1× to 8× speed, skip inactivity, event log, every page of the visit.
- Heatmaps — mouse movement heatmap, click heatmap, scroll map (75 / 50 / 25 % of visitors), per device width (desktop / tablet / mobile).
- Zero-code recorder —
<script src="https://your-api/tracker/recorder.js">, 12 KB, no dependency, works with server-rendered pages and single page apps (React, Vue, Angular:history.pushStatenavigations are followed). - Pluggable dashboard — React component, Vue 3 component,
<mouse-tracker-dashboard>Web Component (Shadow DOM) or Twig function; themable with CSS variables (follows shadcn/ui, Tailwind, Bootstrap themes), light & dark, English & French. - Read-only replay — the replayed page can read but never write (no POST, no GraphQL mutation, no form submit).
- Privacy controls — sampling, opt-out, never records passwords / card fields, keyboard recording can be disabled, IP exclusion, page exclusion, kill switch.
- Symfony 5.4 → 7.x, PHP 7.2.5 → 8.4, Doctrine ORM 2 & 3, MySQL / MariaDB / PostgreSQL / SQLite / SQL Server.
Requirements
| Package | Version |
|---|---|
| PHP | >= 7.2.5 |
| Symfony | 5.4, 6.4, 7.x |
| Doctrine ORM | 2.7+, 3.x |
Installation
Register the bundle (if Symfony Flex did not):
Import the routes:
The ingest routes (public) and the dashboard routes (to protect) can also be imported separately:
@TrackerBundle/Resources/config/routes/ingest.yaml and @TrackerBundle/Resources/config/routes/dashboard.yaml.
Create the tables (tracker__client, tracker__page, tracker__data) and publish the assets:
The Doctrine mapping is XML and is detected automatically with auto_mapping: true. Otherwise:
Record your site (zero code)
Any website or single page app — one tag, nothing to install in the front-end project:
The recorder finds its endpoint from its own URL. Attributes: data-exclude (paths never recorded),
data-spa="false" (do not follow pushState navigations), data-endpoint, data-debug.
Symfony / Twig sites, without touching templates:
or explicitly in a template: {{ mouse_tracker_script() }}.
From code (npm), if you prefer:
When the site and the API are on different domains, allow the site origin (allowed_origins)
or let your CORS bundle handle /tracker/*.
What is recorded: mouse positions (every delay ms), clicks, scroll positions, viewport
resizes and — unless record_keyboard: false — input values on blur. Never passwords, hidden,
file or card fields; never elements with class mt-ignore / noRecord or attribute data-mt-ignore.
Dashboard
Open /tracker/back/, or embed the dashboard in your own admin:
Twig
Plain JavaScript / any framework — Web Component served by the bundle, no npm package:
React
Vue 3
The npm package is the bundle repository itself (npm install ../vendor/benmacha/mousetracker).
More examples in examples/.
| Option | Description |
|---|---|
apiUrl |
Base URL of the dashboard routes |
siteUrl / resolvePageUrl(page) |
Where recorded pages are loaded (default: recorded host) |
headers |
Extra headers, object or function (authentication) |
credentials, fetch |
fetch options |
theme |
light, dark, auto |
locale |
en, fr |
title, height, className, view, injectStyles, onViewChange |
Replay is read-only
Replay and heatmaps load the real page in an <iframe name="mousetracker-replay">, logged in
with the viewer's own session. In that frame the recorder does not record; it installs a guard that
blocks every request that could change data: POST / PUT / PATCH / DELETE, GraphQL
mutations, sendBeacon and form submissions (GraphQL queries and GET requests still work so the
page renders). Clicks are not re-triggered unless the viewer ticks Replay clicks in the page, and
even then nothing can be saved. Load the recorder synchronously before your application so the
guard is active before the first request.
The tracked site must accept being framed by the dashboard (X-Frame-Options / frame-ancestors).
Configuration
Theming
Every colour is a CSS custom property; they cross the Shadow DOM:
Tokens: --mt-accent, --mt-accent-foreground, --mt-bg, --mt-surface, --mt-surface-2, --mt-border,
--mt-text, --mt-muted, --mt-stage, --mt-danger, --mt-success, --mt-radius, --mt-font, --mt-font-mono.
HTTP API
Ingest (public):
| Method | Path | |
|---|---|---|
| GET | /recorder.js |
the recorder |
| GET | /config |
{ settings, ignored } |
| POST | /createClient |
token, clientID?, url, domain, resolution, source, versionMobile → { clientID, clientPageID } |
| POST | /addData |
clientPageID, token, movements?, clicks?, partial?, cachedRecords? |
Dashboard (protected):
| Method | Path |
|---|---|
| GET | /back/ (page), /api/settings, /api/stats?domain= |
| GET | /api/sessions?domain=&q=&from=&to=&offset=&limit= |
| GET | /api/pages?domain=&q=, /api/recordings/{pageViewId} |
| GET | /api/heatmap?url=&domain=&type=movements\|clicks&minWidth=&maxWidth=, /api/scrollmap?url=… |
| DELETE | /api/sessions/{id}, /api/pageviews/{id} |
Security & GDPR
- Ingest routes are public by design;
addDataonly accepts data for a page view whose session token matches. - Protect the dashboard:
access_roleand/oraccess_controlon^/tracker/(back|api). With a stateless API (JWT), put those routes behind your API firewall and pass the token with theheadersoption. - Ask for consent where required, disable
record_keyboardwhen forms may contain personal data, useexclude_pathsfor sensitive pages andenabled: falseto stop collecting instantly.
FAQ
Is it a free alternative to Hotjar, Mouseflow, Smartlook or Microsoft Clarity? Yes for heatmaps, scroll maps and session replay, self-hosted in your Symfony application (no surveys or funnels).
Does it work with React, Vue or Angular single page apps?
Yes. The recorder follows history.pushState / popstate navigations and the dashboard ships as React, Vue and Web Components.
Do I need Node.js or npm?
No. The built files are committed; composer require is enough. npm is only needed to modify the front-end.
Will replaying a session submit forms or delete data? No. See Replay is read-only.
Which databases are supported? Every database supported by Doctrine ORM (MySQL, MariaDB, PostgreSQL, SQLite, SQL Server…).
How much data is stored?
Mouse positions are sampled (delay, max_moves); recordings are JSON chunks attached to page views.
Delete sessions from the dashboard or the API.
Development
Upgrading from 2.x
- Same tables and columns (an index is added on
tracker__page(domain, date)). - Doctrine mapping moved from attributes to XML (
src/Resources/config/doctrine), PHP sources tosrc/. {{ mouse_tracker_service.build()|raw }}still works; prefer{{ mouse_tracker_script() }}orauto_inject.- The recorder sends the session token with every request.
- The jQuery back-office and
/back/getPages,/back/getClients,/back/getDataare replaced by the React dashboard and/api/*. - IP filtering is done server side (no third-party IP service).
License
MIT © Ali Ben Macha — contributions welcome, see CONTRIBUTING.md.
All versions of mousetracker with dependencies
doctrine/doctrine-bundle Version ^2.0
doctrine/orm Version ^2.7 || ^3.0
doctrine/persistence Version ^1.3 || ^2.0 || ^3.0 || ^4.0
symfony/asset Version ^5.4 || ^6.4 || ^7.0
symfony/config Version ^5.4 || ^6.4 || ^7.0
symfony/dependency-injection Version ^5.4 || ^6.4 || ^7.0
symfony/framework-bundle Version ^5.4 || ^6.4 || ^7.0
symfony/http-foundation Version ^5.4 || ^6.4 || ^7.0
symfony/http-kernel Version ^5.4 || ^6.4 || ^7.0
symfony/routing Version ^5.4 || ^6.4 || ^7.0
symfony/twig-bundle Version ^5.4 || ^6.4 || ^7.0
symfony/yaml Version ^5.4 || ^6.4 || ^7.0
twig/twig Version ^2.12 || ^3.0