Tracker Matomo Refactor #6423
Tracker Matomo Refactor #6423
Conversation
Replace arbitrary pause() calls with DOM state markers (data-id attributes) for more reliable E2E test assertions. This follows the existing pattern used by 'compilerloaded' marker. Changes: - Add setE2EStateMarker() helper to MatomoManager - Add markers: matomo-bot-detection-complete, matomo-initialized, matomo-debug-plugin-loaded - Replace pause(2000-4000ms) with waitForElementPresent() in tests - Remove extra stabilization pauses after compilerloaded Benefits: - Tests wait for actual state, not arbitrary times - Faster test execution (no unnecessary delays) - More reliable in different environments (CI vs local) - Self-documenting test intent Test results: - Bot detection: 35/35 assertions passing (17.5s) - Consent group 1: 67/67 assertions passing (20.4s)
| public _paq = { | ||
| push: (args) => { | ||
| this.call('matomo' as any, 'track', args) | ||
| push: (args: any[]) => { |
There was a problem hiding this comment.
This function "push: (args...)" is not needed in the circom plugin, since _paq.push has been replaced with trackCircuitEvent throughout the class.
There was a problem hiding this comment.
Yes, I replaced it now
| trackMatomoEvent(remixClient, event); | ||
| }; | ||
|
|
||
| // Legacy _paq compatibility layer for existing learneth tracking calls |
There was a problem hiding this comment.
We do not need legacy support for _paq calls since we are replacing all of it.
There was a problem hiding this comment.
OK! replaced it all
apps/remix-ide/src/app.ts
Outdated
| if (pluginLoader.current === 'queryParams') { | ||
| this.workspace.map((workspace) => { | ||
| _paq.push(['trackEvent', 'App', 'queryParams-activated', workspace]) | ||
| this.track(AppEvents.queryParamsActivated(workspace)) |
There was a problem hiding this comment.
I don't think we need event function calls (AppEvents, HomeTabEvent, etc) for enforcing strict typing for matomo tracking.
There was a problem hiding this comment.
but functions take parameters right
so witout it trackMatomoEvent?.(HomeTabEvents.switchTo(lang))
would become trackMatomoEvent?.({ ...HomeTabEvents.switchTo, name: lang }) which seems impractical to me
and other events have two parameters, name and value.
so in this case we are safe
...
switchTo: (name?: string, value?: string | number): HomeTabEvent => ({
category: 'hometab',
action: 'switchTo',
name,
value,
isClick: true
})
} as const;```
```export interface HomeTabEvent extends MatomoEventBase {
category: 'hometab';
action:
| 'header'
| 'filesSection'
| 'scamAlert'
| 'switchTo'
| 'titleCard'
| 'recentWorkspacesCard'
| 'featuredPluginsToggle'
| 'featuredPluginsActionClick'
| 'updatesActionClick'
| 'homeGetStarted'
| 'startLearnEthTutorial'
| 'featuredSection';
}```
Resolved conflicts in: - libs/remix-ui/run-tab/src/lib/actions/deploy.ts: Combined IPFS publishing with verification logic - libs/remix-ui/run-tab/src/lib/components/contractDropdownUI.tsx: Kept both TrackingContext and VerificationSettingsUI imports
3 participants
Refactor: Comprehensive Matomo Tracking System Overhaul
Overview
This PR introduces a new
MatomoManagerclass that completely refactors Remix's analytics tracking system, providing better privacy controls, type safety, and developer experience.🔧 Key Improvements
Privacy & Mode Management:
disableBrowserFeatureDetectionin anonymous modeCustom Matomo Dimensions:
click- Boolean flag indicating user-initiated click eventsCustom Matomo Bot Domain:
Code Architecture:
@remix-apiwindow._paqusage across entire codebase_paqaccessDeveloper Experience:
Cleanup:
loader.js_paq.push()confusion📋 Usage Examples
Type-Safe Event System
React Components (Context-based):
Plugin Classes (Direct calls):
🧪 Testing
matomo-bot-detection-complete,matomo-initialized,matomo-debug-plugin-loaded) eliminate flakypause()calls📦 Core Files Added/Modified
New Matomo Core Files:
apps/remix-ide/src/app/matomo/MatomoManager.ts- Main tracking manager with queue, consent, and mode switchingapps/remix-ide/src/app/matomo/MatomoConfig.ts- Configuration and constantsapps/remix-ide/src/app/matomo/MatomoAutoInit.ts- Automatic initialization logicapps/remix-ide/src/app/matomo/BotDetector.ts- Comprehensive bot detection with mouse behavior analysisapps/remix-ide/src/app/matomo/MatomoDebugPlugin.ts- E2E testing helper for event inspectionapps/remix-ide/src/app/contexts/TrackingContext.tsx- React context provider for componentslibs/remix-ide/src/lib/tracking/TrackingFunction.ts- Factory for creating tracking functionsType Definitions & Events:
libs/remix-api/src/lib/plugins/matomo/core/base-types.ts- Core Matomo event typeslibs/remix-api/src/lib/plugins/matomo/events/*.ts- Type-safe event builders by categoryPlugin Integration:
apps/remix-ide/src/app/plugins/matomo.ts- Matomo plugin exposing tracking APIE2E Tests:
apps/remix-ide-e2e/src/tests/matomo-consent*.test.ts- Comprehensive consent flow testsapps/remix-ide-e2e/src/tests/matomo-bot-detection.test.ts- Bot detection validation testsDocumentation:
docs/matomo-bot-detection.md- Detailed bot detection mechanism documentation