feat(analytics): pluggable trackers — Umami + Rybbit + Custom (#663 Phase 1)
Implements the hybrid scope agreed on in #663: two native adapters (Umami + Rybbit) for trackers we'd keep maintained, plus a Custom script-paste mode for everyone else (Plausible, Matomo, Pirsch, GA4, GoatCounter, Fathom, Cloudflare Web Analytics). Phase 2 (Plausible native, deeper metrics) explicitly deferred until someone asks. ## Architecture **Backend `services/trackers/`**: - `TrackerAdapter` shape (single method): `fetchDeviceBreakdown` → `{ desktop, mobile, tablet } | null`. Null = route falls back to access_logs heuristic. - `umamiAdapter.js` — extracted from the `services/umamiClient.js` that landed in #662. Same 10 test contract preserved. - `rybbitAdapter.js` — new. Hits `/api/site/{id}/breakdown?dimension= device` with Bearer auth, accepts both bare-array and `{data:[...]}` envelope variants, tolerates `sessions`/`visitors`/`value`/`count` metric keys. - `customScriptSanitiser.js` — sanitize-html with a tracker-tight allowlist (`<script>` / `<noscript>` / `<link rel=preconnect| dns-prefetch>` / `<meta>`). Strips event-handler attributes, `javascript:` and `data:` URLs. - `index.js` factory: `resolveAdapter()` reads `analytics_tracker_provider` setting → dispatches. Back-compat: when provider is unset, infers `umami` from the legacy `analytics_umami_enabled` flag so #662 installs keep working without an admin touching settings. **Backend routes**: - `adminDashboard.js /analytics`: now goes through `resolveAdapter()`. Old `fetchUmamiDeviceBreakdown` direct import removed; both `umamiClient.js` and its test file deleted (replaced by the adapter shape). - `adminSettings.js PUT /analytics`: validates the new `analytics_tracker_provider` enum, sanitises any incoming `analytics_custom_head_html` on save via the sanitiser. Masks the new `analytics_rybbit_api_key` on every GET — same pattern as Umami's API key and recaptcha secret. - `publicSettings.js`: emits `analytics_tracker_provider`, `rybbit_url`/`rybbit_website_id` (only when provider=rybbit), and the pre-sanitised `analytics_custom_head_html` (only when provider=custom). Legacy `umami_*` fields stay for back-compat. **Frontend**: - `analytics.service.ts` reworked into a provider-aware shape. `initialize({provider, ...config})` dispatches to Umami / Rybbit / Custom / None. `track()` calls dispatch to `window.umami.track` / `window.rybbit.event` / no-op based on the loaded provider. - `App.tsx` `AnalyticsBootstrap` reads `analytics_tracker_provider` from public-settings and routes to the right `initialize` call. Legacy `umami_enabled`-based path preserved as fallback when the new field is missing. - `AnalyticsTab.tsx` (Settings → Analytics) reworked with a "Provider" dropdown switching between None / Umami / Rybbit / Custom panels. Each panel renders its own config fields; Custom panel surfaces an explicit CSP-reminder banner. - `useSettingsState.ts` shape extended with `tracker_provider`, `rybbit_url`/`rybbit_website_id`/`rybbit_api_key`, `custom_head_html`. Save mutation keeps `umami_enabled` in sync with `tracker_provider==='umami'` for back-compat with downstream consumers (publicSettings shape, embedded iframe). - `publicSettings.service.ts` type extended. **i18n**: EN + DE for the provider heading + description + dropdown options + Rybbit fields + Custom HTML field + CSP warning. ## Custom mode — script execution caveat When the gallery `<head>` receives the custom HTML, simply assigning innerHTML to a container element wouldn't execute the embedded `<script>` tags (per the HTML spec, dynamically-inserted scripts via innerHTML are non-running). `analytics.service.ts:120-130` re-creates each `<script>` element manually so the browser actually evaluates it. Non-script nodes (link, meta, noscript) move in directly. ## Tests **Backend** (42 cases, all pass locally): - `umamiAdapter.test.js` (10) — pinned from the original `umamiClient.test.js`: missing-config / URL shape / encoding / payload normalisation / `laptop`→`desktop` / unknown buckets / empty / non-2xx / invalid JSON / network error. - `rybbitAdapter.test.js` (9) — same shape adapted for Rybbit: bare-array + envelope payload, `sessions`/`visitors`/`dimension` key tolerance, encoding, failure modes. - `trackerFactory.test.js` (6) — resolves null for `none`/`custom`, correct adapter for `umami`/`rybbit`, back-compat path via legacy `analytics_umami_enabled`, garbage-provider defensive null. - `customScriptSanitiser.test.js` (12) — Plausible-style passthrough, Umami-style passthrough, inline body passthrough, `<noscript>` allowed, `<link rel="preconnect|dns-prefetch">` allowed, `<link rel="stylesheet">` stripped, disallowed tags stripped, `javascript:`/`data:` URLs stripped, `on*` event handlers stripped, defensive on malformed input. - `analyticsDateMerge.test.js` (5) — preserved from #662. **Frontend**: full 84-case vitest suite green; tsc + eslint clean on changed files. Adapter changes are narrow refactors of code covered by backend tests; no new analytics-page unit test added. ## End-to-end smoke (dockerised backend + my changes mounted) ``` test 1 (back-compat: no provider, umami_enabled=true) → factory returns umami adapter, /analytics returns devicesSource:access_logs (umami fetch to fake host fails gracefully). ✓ test 2 (invalid provider value) → 400 "analytics_tracker_provider must be one of: none, umami, rybbit, custom" ✓ test 3 (save custom HTML with XSS payload) → stored sanitised: `<script>alert(1)</script>evil<script async defer data-domain="x.com" src="https://plausible.io/js/script.js"></script>` (<div> stripped; script tags survive but CSP `script-src 'self'` still blocks inline + non-allowlisted external at runtime) ✓ test 4 (public-settings exposes the provider switch) → `analytics_tracker_provider: 'custom'`, `analytics_custom_head_html: '<sanitised>'` ✓ ``` ## Out of scope (next discussions) - **Plausible native** — covered via Custom mode for now; native is Phase 2 if someone explicitly asks. - **CSP "trusted domains" admin input** — Phase 1.5. For now operators add their tracker domain to nginx/proxy CSP manually; the new CSP-reminder banner in the Custom panel makes that clear. - **Refactor `(window as any).umami.track(...)` direct calls** in PhotoLightbox/PhotoGrid to go through `analyticsService.track()` so events fire on the right tracker. Currently a no-op when Umami isn't loaded; functional but not optimal. Closes #663 Phase 1.
This commit is contained in:
Paul Nothaft
@@ -0,0 +1,100 @@
|
|||||||
|
/**
|
||||||
|
* Tests for the custom-tracker HTML sanitiser (#663 Phase 1).
|
||||||
|
*
|
||||||
|
* The field accepts admin-pasted `<head>`-style snippets for arbitrary
|
||||||
|
* trackers (Plausible / Matomo / Pirsch / GA4 / GoatCounter / Fathom /
|
||||||
|
* Cloudflare Web Analytics). We sanitise on save with a narrow allowlist
|
||||||
|
* tuned for tracker scripts — defence-in-depth, even though the field is
|
||||||
|
* admin-only.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { sanitizeTrackerSnippet } = require('../../src/services/trackers/customScriptSanitiser');
|
||||||
|
|
||||||
|
describe('sanitizeTrackerSnippet (#663)', () => {
|
||||||
|
test('returns empty string for non-string / empty / whitespace input', () => {
|
||||||
|
expect(sanitizeTrackerSnippet(null)).toBe('');
|
||||||
|
expect(sanitizeTrackerSnippet(undefined)).toBe('');
|
||||||
|
expect(sanitizeTrackerSnippet(42)).toBe('');
|
||||||
|
expect(sanitizeTrackerSnippet('')).toBe('');
|
||||||
|
expect(sanitizeTrackerSnippet(' ')).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('passes through a Plausible-style script tag with data-domain', () => {
|
||||||
|
const input = '<script defer data-domain="example.com" src="https://plausible.io/js/script.js"></script>';
|
||||||
|
const out = sanitizeTrackerSnippet(input);
|
||||||
|
expect(out).toContain('src="https://plausible.io/js/script.js"');
|
||||||
|
expect(out).toContain('data-domain="example.com"');
|
||||||
|
expect(out).toContain('defer');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('passes through a Umami-style script with data-website-id', () => {
|
||||||
|
const input = '<script async defer src="https://analytics.example.com/script.js" data-website-id="aaa-bbb-ccc"></script>';
|
||||||
|
const out = sanitizeTrackerSnippet(input);
|
||||||
|
expect(out).toContain('src="https://analytics.example.com/script.js"');
|
||||||
|
expect(out).toContain('data-website-id="aaa-bbb-ccc"');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('passes through inline script body unchanged', () => {
|
||||||
|
const input = '<script>window.GA = "x"; window.tracker = function() { console.log("init"); };</script>';
|
||||||
|
const out = sanitizeTrackerSnippet(input);
|
||||||
|
expect(out).toContain('window.GA = "x"');
|
||||||
|
expect(out).toContain('console.log("init")');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('allows <noscript> fallback', () => {
|
||||||
|
const input = '<noscript><img src="https://t.example/?nojs=1" /></noscript>';
|
||||||
|
const out = sanitizeTrackerSnippet(input);
|
||||||
|
expect(out).toContain('<noscript>');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('allows <link rel="preconnect"> and <link rel="dns-prefetch">', () => {
|
||||||
|
const out = sanitizeTrackerSnippet(
|
||||||
|
'<link rel="preconnect" href="https://t.example.com">'
|
||||||
|
+ '<link rel="dns-prefetch" href="https://t.example.com">',
|
||||||
|
);
|
||||||
|
expect(out).toContain('rel="preconnect"');
|
||||||
|
expect(out).toContain('rel="dns-prefetch"');
|
||||||
|
expect(out).toContain('href="https://t.example.com"');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('strips <link rel="stylesheet"> (not tracker-related)', () => {
|
||||||
|
const out = sanitizeTrackerSnippet('<link rel="stylesheet" href="https://evil.example/x.css">');
|
||||||
|
expect(out).not.toContain('stylesheet');
|
||||||
|
expect(out).not.toContain('href');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('strips disallowed tags entirely', () => {
|
||||||
|
const input = '<div><iframe src="https://evil.example/x.html"></iframe><h1>hi</h1></div>';
|
||||||
|
const out = sanitizeTrackerSnippet(input);
|
||||||
|
expect(out).not.toContain('iframe');
|
||||||
|
expect(out).not.toContain('<div');
|
||||||
|
expect(out).not.toContain('<h1');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('strips javascript: URLs from script src', () => {
|
||||||
|
const input = '<script src="javascript:alert(1)"></script>';
|
||||||
|
const out = sanitizeTrackerSnippet(input);
|
||||||
|
expect(out).not.toContain('javascript:');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('strips data: URLs from script src', () => {
|
||||||
|
const input = '<script src="data:text/javascript,alert(1)"></script>';
|
||||||
|
const out = sanitizeTrackerSnippet(input);
|
||||||
|
expect(out).not.toContain('data:text/javascript');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('strips on* event-handler attributes (defence-in-depth)', () => {
|
||||||
|
// event-handler attrs are not in our allowlist; sanitize-html strips them.
|
||||||
|
const input = '<script src="https://t.example/x.js" onload="evil()"></script>';
|
||||||
|
const out = sanitizeTrackerSnippet(input);
|
||||||
|
expect(out).not.toContain('onload');
|
||||||
|
expect(out).toContain('src="https://t.example/x.js"');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('returns empty string on unparseable input rather than throwing', () => {
|
||||||
|
// sanitize-html is fault-tolerant — pass deliberately malformed and
|
||||||
|
// confirm we don't blow up.
|
||||||
|
expect(typeof sanitizeTrackerSnippet('<<<>>>')).toBe('string');
|
||||||
|
expect(typeof sanitizeTrackerSnippet('<script')).toBe('string');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
/**
|
||||||
|
* Tests for the Rybbit metrics-API adapter (#663 Phase 1). Mirrors the
|
||||||
|
* `umamiAdapter` test contract: missing config / URL shape / encoding /
|
||||||
|
* normalisation / unknown-bucket drop / failure modes.
|
||||||
|
*
|
||||||
|
* Rybbit's documented endpoint is `/api/site/{websiteId}/breakdown` with
|
||||||
|
* `dimension=device`; we accept both bare-array and `{ data: [...] }`
|
||||||
|
* envelopes since their docs hint at minor v0 → v1 shape variation.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { buildAdapter } = require('../../src/services/trackers/rybbitAdapter');
|
||||||
|
|
||||||
|
const ORIGINAL_FETCH = global.fetch;
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
global.fetch = ORIGINAL_FETCH;
|
||||||
|
});
|
||||||
|
|
||||||
|
function mockJson(body, { status = 200 } = {}) {
|
||||||
|
global.fetch = jest.fn(async () => ({
|
||||||
|
ok: status >= 200 && status < 300,
|
||||||
|
status,
|
||||||
|
json: async () => body,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
const valid = { baseUrl: 'https://r.example.com', websiteId: 'rsite-789', apiKey: 'rkey' };
|
||||||
|
|
||||||
|
describe('rybbitAdapter.fetchDeviceBreakdown (#663)', () => {
|
||||||
|
test('returns null when config is incomplete', async () => {
|
||||||
|
expect(await buildAdapter({}).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
expect(global.fetch).toBe(ORIGINAL_FETCH);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('builds the expected URL + sends Bearer auth', async () => {
|
||||||
|
mockJson([{ device: 'desktop', sessions: 10 }]);
|
||||||
|
await buildAdapter({ ...valid, baseUrl: 'https://r.example.com/' })
|
||||||
|
.fetchDeviceBreakdown({ startMs: 1700000000000, endMs: 1700003600000 });
|
||||||
|
const [calledUrl, init] = global.fetch.mock.calls[0];
|
||||||
|
expect(calledUrl).toMatch(/^https:\/\/r\.example\.com\/api\/site\/rsite-789\/breakdown\?dimension=device&start=.*&end=.*$/);
|
||||||
|
expect(init.headers.Authorization).toBe('Bearer rkey');
|
||||||
|
expect(init.method).toBe('GET');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('URL-encodes the websiteId for reserved chars', async () => {
|
||||||
|
mockJson([{ device: 'desktop', sessions: 1 }]);
|
||||||
|
await buildAdapter({ ...valid, websiteId: 'a/b?c' }).fetchDeviceBreakdown({ startMs: 0, endMs: 0 });
|
||||||
|
const [calledUrl] = global.fetch.mock.calls[0];
|
||||||
|
expect(calledUrl).toContain('/api/site/a%2Fb%3Fc/breakdown');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('normalises a typical {device, sessions} payload into percentages', async () => {
|
||||||
|
mockJson([
|
||||||
|
{ device: 'desktop', sessions: 60 },
|
||||||
|
{ device: 'mobile', sessions: 30 },
|
||||||
|
{ device: 'tablet', sessions: 10 },
|
||||||
|
]);
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 }))
|
||||||
|
.toEqual({ desktop: 60, mobile: 30, tablet: 10 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('accepts the {data: [...]} envelope variant', async () => {
|
||||||
|
mockJson({ data: [
|
||||||
|
{ device: 'desktop', sessions: 1 },
|
||||||
|
{ device: 'mobile', sessions: 3 },
|
||||||
|
] });
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 }))
|
||||||
|
.toEqual({ desktop: 25, mobile: 75, tablet: 0 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('falls back to `visitors` when `sessions` is absent', async () => {
|
||||||
|
mockJson([
|
||||||
|
{ device: 'desktop', visitors: 80 },
|
||||||
|
{ device: 'mobile', visitors: 20 },
|
||||||
|
]);
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 }))
|
||||||
|
.toEqual({ desktop: 80, mobile: 20, tablet: 0 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('tolerates a `dimension` key as the bucket label', async () => {
|
||||||
|
mockJson([
|
||||||
|
{ dimension: 'desktop', sessions: 50 },
|
||||||
|
{ dimension: 'mobile', sessions: 50 },
|
||||||
|
]);
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 }))
|
||||||
|
.toEqual({ desktop: 50, mobile: 50, tablet: 0 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('drops unknown buckets', async () => {
|
||||||
|
mockJson([
|
||||||
|
{ device: 'desktop', sessions: 80 },
|
||||||
|
{ device: 'mobile', sessions: 20 },
|
||||||
|
{ device: 'fridge', sessions: 100 },
|
||||||
|
]);
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 }))
|
||||||
|
.toEqual({ desktop: 80, mobile: 20, tablet: 0 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('returns null on empty payload, non-2xx, invalid JSON, and network error', async () => {
|
||||||
|
mockJson([]);
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
|
||||||
|
mockJson({ error: 'unauthorized' }, { status: 401 });
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
|
||||||
|
global.fetch = jest.fn(async () => ({
|
||||||
|
ok: true, status: 200,
|
||||||
|
json: async () => { throw new SyntaxError('not json'); },
|
||||||
|
}));
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
|
||||||
|
global.fetch = jest.fn(async () => { throw new Error('ECONNREFUSED'); });
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
/**
|
||||||
|
* Factory tests for the pluggable-tracker registry (#663 Phase 1).
|
||||||
|
*
|
||||||
|
* Pins the contract that drives `adminDashboard.js` analytics route:
|
||||||
|
* - Returns null for 'none' / 'custom' / unset → route falls back to access_logs.
|
||||||
|
* - Returns an Umami adapter shape for provider='umami'.
|
||||||
|
* - Returns a Rybbit adapter shape for provider='rybbit'.
|
||||||
|
* - Back-compat: when `analytics_tracker_provider` is unset, infers
|
||||||
|
* 'umami' from the legacy `analytics_umami_enabled` flag.
|
||||||
|
* - Invalid provider strings fall through to the legacy back-compat path
|
||||||
|
* rather than crashing (defensive).
|
||||||
|
*/
|
||||||
|
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const os = require('os');
|
||||||
|
|
||||||
|
process.env.NODE_ENV = 'test';
|
||||||
|
process.env.TEST_DATABASE_PATH = path.join(
|
||||||
|
fs.mkdtempSync(path.join(os.tmpdir(), 'picpeak-tracker-fact-')), 'db.sqlite',
|
||||||
|
);
|
||||||
|
|
||||||
|
const { bootCrmDb } = require('../integration/helpers/crmDb');
|
||||||
|
const trackers = require('../../src/services/trackers');
|
||||||
|
|
||||||
|
let db; let cleanup;
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
({ db, cleanup } = await bootCrmDb());
|
||||||
|
}, 30000);
|
||||||
|
|
||||||
|
afterAll(async () => { if (cleanup) await cleanup(); });
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await db('app_settings').del();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function setSetting(key, value) {
|
||||||
|
await db('app_settings').insert({
|
||||||
|
setting_key: key,
|
||||||
|
setting_value: JSON.stringify(value),
|
||||||
|
setting_type: 'analytics',
|
||||||
|
updated_at: new Date(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('resolveAdapter (#663)', () => {
|
||||||
|
test('returns null when provider=\'none\'', async () => {
|
||||||
|
await setSetting('analytics_tracker_provider', 'none');
|
||||||
|
expect(await trackers.resolveAdapter()).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('returns null when provider=\'custom\' (no metrics adapter, just a script slot)', async () => {
|
||||||
|
await setSetting('analytics_tracker_provider', 'custom');
|
||||||
|
expect(await trackers.resolveAdapter()).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('back-compat: provider unset + legacy umami_enabled=true → umami adapter', async () => {
|
||||||
|
await setSetting('analytics_umami_enabled', true);
|
||||||
|
await setSetting('analytics_umami_url', 'https://u.example');
|
||||||
|
await setSetting('analytics_umami_website_id', 'w-1');
|
||||||
|
await setSetting('analytics_umami_api_key', 'k-1');
|
||||||
|
const adapter = await trackers.resolveAdapter();
|
||||||
|
expect(adapter).not.toBeNull();
|
||||||
|
expect(adapter.provider).toBe('umami');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('provider=\'umami\' explicit → umami adapter with stored secrets', async () => {
|
||||||
|
await setSetting('analytics_tracker_provider', 'umami');
|
||||||
|
await setSetting('analytics_umami_url', 'https://u.example');
|
||||||
|
await setSetting('analytics_umami_website_id', 'w-1');
|
||||||
|
await setSetting('analytics_umami_api_key', 'k-1');
|
||||||
|
const adapter = await trackers.resolveAdapter();
|
||||||
|
expect(adapter.provider).toBe('umami');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('provider=\'rybbit\' → rybbit adapter with stored secrets', async () => {
|
||||||
|
await setSetting('analytics_tracker_provider', 'rybbit');
|
||||||
|
await setSetting('analytics_rybbit_url', 'https://r.example');
|
||||||
|
await setSetting('analytics_rybbit_website_id', 'r-1');
|
||||||
|
await setSetting('analytics_rybbit_api_key', 'rk-1');
|
||||||
|
const adapter = await trackers.resolveAdapter();
|
||||||
|
expect(adapter.provider).toBe('rybbit');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('garbage provider value falls through to legacy back-compat (defensive)', async () => {
|
||||||
|
await setSetting('analytics_tracker_provider', 'plausible-not-yet-supported');
|
||||||
|
// No legacy umami_enabled → resolves to null (= 'none')
|
||||||
|
expect(await trackers.resolveAdapter()).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
/**
|
||||||
|
* Adapter-style tests for the Umami metrics client (#663 Phase 1, replaces
|
||||||
|
* the old `umamiClient.test.js` from #662 — same contract, new shape).
|
||||||
|
*
|
||||||
|
* Pins the same 10 cases that protected the original implementation: missing
|
||||||
|
* config / URL shape / encoding / payload normalisation / `laptop` mapping /
|
||||||
|
* unknown-bucket drop / empty / non-2xx / invalid JSON / network error.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { buildAdapter } = require('../../src/services/trackers/umamiAdapter');
|
||||||
|
|
||||||
|
const ORIGINAL_FETCH = global.fetch;
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
global.fetch = ORIGINAL_FETCH;
|
||||||
|
});
|
||||||
|
|
||||||
|
function mockJson(body, { status = 200 } = {}) {
|
||||||
|
global.fetch = jest.fn(async () => ({
|
||||||
|
ok: status >= 200 && status < 300,
|
||||||
|
status,
|
||||||
|
json: async () => body,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
const valid = { baseUrl: 'https://u.example.com', websiteId: 'site-123', apiKey: 'secret' };
|
||||||
|
|
||||||
|
describe('umamiAdapter.fetchDeviceBreakdown (#663)', () => {
|
||||||
|
test('returns null when config is incomplete (back-compat path)', async () => {
|
||||||
|
const a = buildAdapter({});
|
||||||
|
expect(await a.fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
const b = buildAdapter({ baseUrl: 'https://u' });
|
||||||
|
expect(await b.fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
expect(global.fetch).toBe(ORIGINAL_FETCH);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('builds the expected URL + sends `x-umami-api-key` header', async () => {
|
||||||
|
mockJson([{ x: 'desktop', y: 10 }]);
|
||||||
|
const a = buildAdapter({ ...valid, baseUrl: 'https://u.example.com/' });
|
||||||
|
await a.fetchDeviceBreakdown({ startMs: 1700000000000, endMs: 1700003600000 });
|
||||||
|
expect(global.fetch).toHaveBeenCalledTimes(1);
|
||||||
|
const [calledUrl, init] = global.fetch.mock.calls[0];
|
||||||
|
expect(calledUrl).toBe(
|
||||||
|
'https://u.example.com/api/websites/site-123/metrics?type=device&startAt=1700000000000&endAt=1700003600000',
|
||||||
|
);
|
||||||
|
expect(init.headers['x-umami-api-key']).toBe('secret');
|
||||||
|
expect(init.method).toBe('GET');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('URL-encodes the websiteId for reserved chars', async () => {
|
||||||
|
mockJson([{ x: 'desktop', y: 1 }]);
|
||||||
|
const a = buildAdapter({ baseUrl: 'https://u', websiteId: 'a/b?c', apiKey: 'k' });
|
||||||
|
await a.fetchDeviceBreakdown({ startMs: 0, endMs: 0 });
|
||||||
|
const [calledUrl] = global.fetch.mock.calls[0];
|
||||||
|
expect(calledUrl).toContain('/api/websites/a%2Fb%3Fc/metrics');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('normalises { x, y } payload into integer percentages', async () => {
|
||||||
|
mockJson([
|
||||||
|
{ x: 'desktop', y: 60 },
|
||||||
|
{ x: 'mobile', y: 30 },
|
||||||
|
{ x: 'tablet', y: 10 },
|
||||||
|
]);
|
||||||
|
const a = buildAdapter(valid);
|
||||||
|
const out = await a.fetchDeviceBreakdown({ startMs: 0, endMs: 0 });
|
||||||
|
expect(out).toEqual({ desktop: 60, mobile: 30, tablet: 10 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('maps `laptop` into `desktop` (matches our 3-bucket UI)', async () => {
|
||||||
|
mockJson([
|
||||||
|
{ x: 'desktop', y: 50 },
|
||||||
|
{ x: 'laptop', y: 20 },
|
||||||
|
{ x: 'mobile', y: 30 },
|
||||||
|
]);
|
||||||
|
const out = await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 });
|
||||||
|
expect(out).toEqual({ desktop: 70, mobile: 30, tablet: 0 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('drops unknown buckets (no silent miscategorisation)', async () => {
|
||||||
|
mockJson([
|
||||||
|
{ x: 'desktop', y: 80 },
|
||||||
|
{ x: 'mobile', y: 20 },
|
||||||
|
{ x: 'unknown-future-bucket', y: 100 },
|
||||||
|
]);
|
||||||
|
const out = await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 });
|
||||||
|
expect(out).toEqual({ desktop: 80, mobile: 20, tablet: 0 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('returns null on empty payload', async () => {
|
||||||
|
mockJson([]);
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('returns null on non-2xx', async () => {
|
||||||
|
mockJson({ error: 'unauthorized' }, { status: 401 });
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('returns null on invalid JSON', async () => {
|
||||||
|
global.fetch = jest.fn(async () => ({
|
||||||
|
ok: true,
|
||||||
|
status: 200,
|
||||||
|
json: async () => { throw new SyntaxError('not json'); },
|
||||||
|
}));
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('returns null on network error', async () => {
|
||||||
|
global.fetch = jest.fn(async () => { throw new Error('ECONNREFUSED'); });
|
||||||
|
expect(await buildAdapter(valid).fetchDeviceBreakdown({ startMs: 0, endMs: 0 })).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
/**
|
|
||||||
* Unit tests for the Umami v2 metrics-API client (#661 Bug C).
|
|
||||||
*
|
|
||||||
* The client is only consumed by `/admin/dashboard/analytics` today to fetch
|
|
||||||
* the device-breakdown chart, so these tests pin:
|
|
||||||
* - The exact URL shape sent to Umami (`/api/websites/<id>/metrics?type=device&startAt=…&endAt=…`)
|
|
||||||
* - The `x-umami-api-key` auth header
|
|
||||||
* - The `{ x, y }` → `{ desktop, mobile, tablet }` percentage normalisation
|
|
||||||
* - `laptop` mapping into `desktop` for our 3-bucket UI
|
|
||||||
* - Defensive returns: missing config / non-2xx / non-JSON / empty array
|
|
||||||
* all return `null` so the route layer can fall back to access_logs.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const { fetchUmamiDeviceBreakdown } = require('../../src/services/umamiClient');
|
|
||||||
|
|
||||||
const ORIGINAL_FETCH = global.fetch;
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
global.fetch = ORIGINAL_FETCH;
|
|
||||||
});
|
|
||||||
|
|
||||||
function mockJson(body, { status = 200 } = {}) {
|
|
||||||
global.fetch = jest.fn(async () => ({
|
|
||||||
ok: status >= 200 && status < 300,
|
|
||||||
status,
|
|
||||||
json: async () => body,
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
describe('fetchUmamiDeviceBreakdown', () => {
|
|
||||||
test('returns null when config is incomplete (back-compat for installs without API key)', async () => {
|
|
||||||
expect(await fetchUmamiDeviceBreakdown({})).toBeNull();
|
|
||||||
expect(await fetchUmamiDeviceBreakdown({ baseUrl: 'https://u.example' })).toBeNull();
|
|
||||||
expect(await fetchUmamiDeviceBreakdown({ baseUrl: 'https://u.example', websiteId: 'w' })).toBeNull();
|
|
||||||
// No fetch should be issued in any of those cases.
|
|
||||||
expect(global.fetch).toBe(ORIGINAL_FETCH);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('builds the expected URL + sends the x-umami-api-key header', async () => {
|
|
||||||
mockJson([{ x: 'desktop', y: 10 }]);
|
|
||||||
await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u.example.com/',
|
|
||||||
websiteId: 'site-123',
|
|
||||||
apiKey: 'secret',
|
|
||||||
startMs: 1700000000000,
|
|
||||||
endMs: 1700003600000,
|
|
||||||
});
|
|
||||||
expect(global.fetch).toHaveBeenCalledTimes(1);
|
|
||||||
const [calledUrl, init] = global.fetch.mock.calls[0];
|
|
||||||
expect(calledUrl).toBe(
|
|
||||||
'https://u.example.com/api/websites/site-123/metrics?type=device&startAt=1700000000000&endAt=1700003600000',
|
|
||||||
);
|
|
||||||
expect(init.headers['x-umami-api-key']).toBe('secret');
|
|
||||||
expect(init.method).toBe('GET');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('encodes the websiteId so a path segment with reserved chars is safe', async () => {
|
|
||||||
mockJson([{ x: 'desktop', y: 1 }]);
|
|
||||||
await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u.example.com',
|
|
||||||
websiteId: 'a/b?c',
|
|
||||||
apiKey: 'k',
|
|
||||||
startMs: 0, endMs: 0,
|
|
||||||
});
|
|
||||||
const [calledUrl] = global.fetch.mock.calls[0];
|
|
||||||
expect(calledUrl).toContain('/api/websites/a%2Fb%3Fc/metrics');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('normalises a typical { x, y } payload into integer percentages', async () => {
|
|
||||||
mockJson([
|
|
||||||
{ x: 'desktop', y: 60 },
|
|
||||||
{ x: 'mobile', y: 30 },
|
|
||||||
{ x: 'tablet', y: 10 },
|
|
||||||
]);
|
|
||||||
const out = await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u', websiteId: 'w', apiKey: 'k', startMs: 0, endMs: 0,
|
|
||||||
});
|
|
||||||
expect(out).toEqual({ desktop: 60, mobile: 30, tablet: 10 });
|
|
||||||
});
|
|
||||||
|
|
||||||
test('maps `laptop` into `desktop` for the 3-bucket UI', async () => {
|
|
||||||
mockJson([
|
|
||||||
{ x: 'desktop', y: 50 },
|
|
||||||
{ x: 'laptop', y: 20 },
|
|
||||||
{ x: 'mobile', y: 30 },
|
|
||||||
]);
|
|
||||||
const out = await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u', websiteId: 'w', apiKey: 'k', startMs: 0, endMs: 0,
|
|
||||||
});
|
|
||||||
// desktop = (50 + 20) / 100 = 70%
|
|
||||||
expect(out).toEqual({ desktop: 70, mobile: 30, tablet: 0 });
|
|
||||||
});
|
|
||||||
|
|
||||||
test('drops unknown buckets entirely (avoids silent miscategorisation)', async () => {
|
|
||||||
mockJson([
|
|
||||||
{ x: 'desktop', y: 80 },
|
|
||||||
{ x: 'mobile', y: 20 },
|
|
||||||
{ x: 'unknown-future-bucket', y: 100 },
|
|
||||||
]);
|
|
||||||
const out = await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u', websiteId: 'w', apiKey: 'k', startMs: 0, endMs: 0,
|
|
||||||
});
|
|
||||||
// 100 isn't counted into total, so 80/(80+20) = 80%, 20/(80+20) = 20%.
|
|
||||||
expect(out).toEqual({ desktop: 80, mobile: 20, tablet: 0 });
|
|
||||||
});
|
|
||||||
|
|
||||||
test('returns null on empty payload (caller falls back to access_logs)', async () => {
|
|
||||||
mockJson([]);
|
|
||||||
const out = await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u', websiteId: 'w', apiKey: 'k', startMs: 0, endMs: 0,
|
|
||||||
});
|
|
||||||
expect(out).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('returns null on non-2xx upstream response', async () => {
|
|
||||||
mockJson({ error: 'unauthorized' }, { status: 401 });
|
|
||||||
const out = await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u', websiteId: 'w', apiKey: 'k', startMs: 0, endMs: 0,
|
|
||||||
});
|
|
||||||
expect(out).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('returns null on invalid JSON body', async () => {
|
|
||||||
global.fetch = jest.fn(async () => ({
|
|
||||||
ok: true,
|
|
||||||
status: 200,
|
|
||||||
json: async () => { throw new SyntaxError('not json'); },
|
|
||||||
}));
|
|
||||||
const out = await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u', websiteId: 'w', apiKey: 'k', startMs: 0, endMs: 0,
|
|
||||||
});
|
|
||||||
expect(out).toBeNull();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('returns null on network error (fetch throws)', async () => {
|
|
||||||
global.fetch = jest.fn(async () => { throw new Error('ECONNREFUSED'); });
|
|
||||||
const out = await fetchUmamiDeviceBreakdown({
|
|
||||||
baseUrl: 'https://u', websiteId: 'w', apiKey: 'k', startMs: 0, endMs: 0,
|
|
||||||
});
|
|
||||||
expect(out).toBeNull();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -4,8 +4,7 @@ const { adminAuth } = require('../middleware/auth');
|
|||||||
const { requirePermission } = require('../middleware/permissions');
|
const { requirePermission } = require('../middleware/permissions');
|
||||||
const { sanitizeDays, addDateRangeCondition } = require('../utils/sqlSecurity');
|
const { sanitizeDays, addDateRangeCondition } = require('../utils/sqlSecurity');
|
||||||
const { formatBoolean } = require('../utils/dbCompat');
|
const { formatBoolean } = require('../utils/dbCompat');
|
||||||
const { getAppSetting } = require('../utils/appSettings');
|
const { resolveAdapter } = require('../services/trackers');
|
||||||
const { fetchUmamiDeviceBreakdown } = require('../services/umamiClient');
|
|
||||||
const logger = require('../utils/logger');
|
const logger = require('../utils/logger');
|
||||||
const router = express.Router();
|
const router = express.Router();
|
||||||
|
|
||||||
@@ -316,35 +315,29 @@ router.get('/analytics', adminAuth, requirePermission('analytics.view'), async (
|
|||||||
.orderBy('views', 'desc')
|
.orderBy('views', 'desc')
|
||||||
.limit(5);
|
.limit(5);
|
||||||
|
|
||||||
// Device breakdown — prefer Umami's metrics API when configured (#661
|
// Device breakdown — prefer the operator's analytics tracker (Umami /
|
||||||
// Bug C). The local access_logs heuristic below produces 0% on installs
|
// Rybbit) when configured (#661 Bug C + #663 Phase 1). The local
|
||||||
// where guest user agents don't reliably contain "Mobile" / "Tablet"
|
// access_logs heuristic below produces 0% on installs where guest user
|
||||||
// tokens; Umami tracks devices natively. Falls back to access_logs when
|
// agents don't reliably contain "Mobile" / "Tablet" tokens; the tracker
|
||||||
// Umami is unconfigured, unreachable, or rate-limited.
|
// adapters track devices natively. Falls back to access_logs when no
|
||||||
|
// tracker is configured (provider=none/custom), the upstream call fails,
|
||||||
|
// or the response shape doesn't match what we expect.
|
||||||
let devices = { desktop: 0, mobile: 0, tablet: 0 };
|
let devices = { desktop: 0, mobile: 0, tablet: 0 };
|
||||||
let devicesSource = 'access_logs';
|
let devicesSource = 'access_logs';
|
||||||
|
|
||||||
const umamiConfig = {
|
const adapter = await resolveAdapter();
|
||||||
enabled: (await getAppSetting('analytics_umami_enabled', false)) === true,
|
if (adapter) {
|
||||||
baseUrl: await getAppSetting('analytics_umami_url', null),
|
|
||||||
websiteId: await getAppSetting('analytics_umami_website_id', null),
|
|
||||||
apiKey: await getAppSetting('analytics_umami_api_key', null),
|
|
||||||
};
|
|
||||||
if (umamiConfig.enabled && umamiConfig.baseUrl && umamiConfig.websiteId && umamiConfig.apiKey) {
|
|
||||||
try {
|
try {
|
||||||
const umamiDevices = await fetchUmamiDeviceBreakdown({
|
const trackerDevices = await adapter.fetchDeviceBreakdown({
|
||||||
baseUrl: umamiConfig.baseUrl,
|
|
||||||
websiteId: umamiConfig.websiteId,
|
|
||||||
apiKey: umamiConfig.apiKey,
|
|
||||||
startMs: startDate.getTime(),
|
startMs: startDate.getTime(),
|
||||||
endMs: Date.now(),
|
endMs: Date.now(),
|
||||||
});
|
});
|
||||||
if (umamiDevices) {
|
if (trackerDevices) {
|
||||||
devices = umamiDevices;
|
devices = trackerDevices;
|
||||||
devicesSource = 'umami';
|
devicesSource = adapter.provider;
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
logger.warn('Analytics: Umami device-breakdown fetch failed; falling back to access_logs', {
|
logger.warn(`Analytics: ${adapter.provider} device-breakdown fetch failed; falling back to access_logs`, {
|
||||||
error: err.message,
|
error: err.message,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -151,6 +151,10 @@ router.get('/', adminAuth, requirePermission('settings.view'), async (req, res)
|
|||||||
if (settingsObject.analytics_umami_api_key) {
|
if (settingsObject.analytics_umami_api_key) {
|
||||||
settingsObject.analytics_umami_api_key = '••••••••';
|
settingsObject.analytics_umami_api_key = '••••••••';
|
||||||
}
|
}
|
||||||
|
// Rybbit API key (#663 Phase 1) — same pattern.
|
||||||
|
if (settingsObject.analytics_rybbit_api_key) {
|
||||||
|
settingsObject.analytics_rybbit_api_key = '••••••••';
|
||||||
|
}
|
||||||
|
|
||||||
res.json(settingsObject);
|
res.json(settingsObject);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -402,6 +406,10 @@ router.get('/:type', adminAuth, requirePermission('settings.view'), async (req,
|
|||||||
if (settingsObject.analytics_umami_api_key) {
|
if (settingsObject.analytics_umami_api_key) {
|
||||||
settingsObject.analytics_umami_api_key = '••••••••';
|
settingsObject.analytics_umami_api_key = '••••••••';
|
||||||
}
|
}
|
||||||
|
// Rybbit API key (#663 Phase 1) — same pattern.
|
||||||
|
if (settingsObject.analytics_rybbit_api_key) {
|
||||||
|
settingsObject.analytics_rybbit_api_key = '••••••••';
|
||||||
|
}
|
||||||
|
|
||||||
res.json(settingsObject);
|
res.json(settingsObject);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -1061,6 +1069,25 @@ router.put('/analytics', adminAuth, requirePermission('settings.edit'), async (r
|
|||||||
try {
|
try {
|
||||||
const settings = req.body;
|
const settings = req.body;
|
||||||
|
|
||||||
|
// Validate the provider switch (#663 Phase 1). Reject unknown values
|
||||||
|
// so the dashboard route's factory doesn't have to defensively guard.
|
||||||
|
if (Object.prototype.hasOwnProperty.call(settings, 'analytics_tracker_provider')) {
|
||||||
|
const valid = ['none', 'umami', 'rybbit', 'custom'];
|
||||||
|
if (!valid.includes(settings.analytics_tracker_provider)) {
|
||||||
|
return res.status(400).json({
|
||||||
|
error: `analytics_tracker_provider must be one of: ${valid.join(', ')}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sanitise the custom-mode HTML snippet on save (#663 Phase 1). Stored
|
||||||
|
// pre-sanitised so the publicSettings endpoint surfaces it as-is on
|
||||||
|
// every gallery request — never re-running sanitize-html on the hot path.
|
||||||
|
if (Object.prototype.hasOwnProperty.call(settings, 'analytics_custom_head_html')) {
|
||||||
|
const { sanitizeTrackerSnippet } = require('../services/trackers/customScriptSanitiser');
|
||||||
|
settings.analytics_custom_head_html = sanitizeTrackerSnippet(settings.analytics_custom_head_html);
|
||||||
|
}
|
||||||
|
|
||||||
// Update or insert each setting
|
// Update or insert each setting
|
||||||
for (const [key, value] of Object.entries(settings)) {
|
for (const [key, value] of Object.entries(settings)) {
|
||||||
await db('app_settings')
|
await db('app_settings')
|
||||||
|
|||||||
@@ -130,11 +130,44 @@ router.get('/', async (req, res) => {
|
|||||||
enable_recaptcha: settingsObject.security_enable_recaptcha === true || settingsObject.security_enable_recaptcha === 'true',
|
enable_recaptcha: settingsObject.security_enable_recaptcha === true || settingsObject.security_enable_recaptcha === 'true',
|
||||||
recaptcha_site_key: settingsObject.security_recaptcha_site_key || null,
|
recaptcha_site_key: settingsObject.security_recaptcha_site_key || null,
|
||||||
maintenance_mode: settingsObject.general_maintenance_mode === true || settingsObject.general_maintenance_mode === 'true',
|
maintenance_mode: settingsObject.general_maintenance_mode === true || settingsObject.general_maintenance_mode === 'true',
|
||||||
// Umami analytics configuration (only if enabled)
|
// Umami analytics configuration (only if enabled). Kept for
|
||||||
|
// back-compat: pre-#663 installs without `analytics_tracker_provider`
|
||||||
|
// still surface Umami settings under their original keys so the
|
||||||
|
// frontend tracker script switches over cleanly.
|
||||||
umami_enabled: settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true',
|
umami_enabled: settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true',
|
||||||
umami_url: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_url || null) : null,
|
umami_url: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_url || null) : null,
|
||||||
umami_website_id: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_website_id || null) : null,
|
umami_website_id: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_website_id || null) : null,
|
||||||
umami_share_url: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_share_url || null) : null,
|
umami_share_url: (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true') ? (settingsObject.analytics_umami_share_url || null) : null,
|
||||||
|
// Tracker-provider switch (#663 Phase 1). Drives which provider's
|
||||||
|
// script gets injected into the gallery <head>. 'none' / unset =
|
||||||
|
// no tracker. The frontend tracker service picks the right shape
|
||||||
|
// from the (provider, *_url, *_website_id) tuple below.
|
||||||
|
analytics_tracker_provider: (() => {
|
||||||
|
const explicit = settingsObject.analytics_tracker_provider;
|
||||||
|
if (typeof explicit === 'string' && ['none', 'umami', 'rybbit', 'custom'].includes(explicit)) {
|
||||||
|
return explicit;
|
||||||
|
}
|
||||||
|
// Back-compat with installs that haven't picked yet.
|
||||||
|
return (settingsObject.analytics_umami_enabled === true || settingsObject.analytics_umami_enabled === 'true')
|
||||||
|
? 'umami'
|
||||||
|
: 'none';
|
||||||
|
})(),
|
||||||
|
// Rybbit native provider (#663). Only exposed when actively chosen
|
||||||
|
// — otherwise hidden so the front-end never tries to inject a
|
||||||
|
// stale tracker.
|
||||||
|
rybbit_url: settingsObject.analytics_tracker_provider === 'rybbit'
|
||||||
|
? (settingsObject.analytics_rybbit_url || null)
|
||||||
|
: null,
|
||||||
|
rybbit_website_id: settingsObject.analytics_tracker_provider === 'rybbit'
|
||||||
|
? (settingsObject.analytics_rybbit_website_id || null)
|
||||||
|
: null,
|
||||||
|
// Custom-mode pre-sanitised HTML snippet (#663). Sanitised at save
|
||||||
|
// time via customScriptSanitiser; surfaced as-is here so the
|
||||||
|
// gallery <head> can render it without re-sanitising on every
|
||||||
|
// request.
|
||||||
|
analytics_custom_head_html: settingsObject.analytics_tracker_provider === 'custom'
|
||||||
|
? (settingsObject.analytics_custom_head_html || '')
|
||||||
|
: '',
|
||||||
// Event field requirements
|
// Event field requirements
|
||||||
event_require_customer_name: settingsObject.event_require_customer_name !== false,
|
event_require_customer_name: settingsObject.event_require_customer_name !== false,
|
||||||
event_require_customer_email: settingsObject.event_require_customer_email !== false,
|
event_require_customer_email: settingsObject.event_require_customer_email !== false,
|
||||||
|
|||||||
@@ -0,0 +1,86 @@
|
|||||||
|
/**
|
||||||
|
* Custom-tracker HTML sanitiser (#663 Phase 1).
|
||||||
|
*
|
||||||
|
* Operators picking "Custom" in Settings → Analytics paste a `<head>`-style
|
||||||
|
* HTML snippet (script tag + sometimes a `<noscript>` fallback + DNS-prefetch
|
||||||
|
* `<link>`s). We sanitise on save and render the sanitised string into the
|
||||||
|
* gallery `<head>` server-side — admin-only field, but defence-in-depth
|
||||||
|
* matters when the trust boundary widens to e.g. a delegated admin role.
|
||||||
|
*
|
||||||
|
* Allowlist (intentionally narrow):
|
||||||
|
* <script> — src, async, defer, type, crossorigin, integrity, nonce,
|
||||||
|
* referrerpolicy, data-*
|
||||||
|
* <noscript> — no attributes
|
||||||
|
* <link> — rel (preconnect/dns-prefetch only), href, crossorigin
|
||||||
|
* <meta> — name, content, charset
|
||||||
|
*
|
||||||
|
* Anything else is stripped. Inline script bodies pass through unchanged
|
||||||
|
* (the tracker's bootstrap snippet is the whole point), but we DO normalise
|
||||||
|
* URL schemes — `javascript:` / `data:` URLs on `src` / `href` are removed.
|
||||||
|
*
|
||||||
|
* Returns the sanitised string. On parse failure, returns an empty string
|
||||||
|
* (defensive — empty snippet just means the gallery `<head>` is unchanged).
|
||||||
|
*/
|
||||||
|
|
||||||
|
const sanitizeHtml = require('sanitize-html');
|
||||||
|
|
||||||
|
const ALLOWED_LINK_RELS = new Set(['preconnect', 'dns-prefetch', 'preload']);
|
||||||
|
|
||||||
|
function sanitizeTrackerSnippet(raw) {
|
||||||
|
if (typeof raw !== 'string') return '';
|
||||||
|
const trimmed = raw.trim();
|
||||||
|
if (!trimmed) return '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
return sanitizeHtml(trimmed, {
|
||||||
|
// Allow <script> + a few related tags. sanitize-html disallows
|
||||||
|
// <script> by default for XSS-protection — we explicitly opt in
|
||||||
|
// because the entire point of the custom field is a tracker script.
|
||||||
|
allowedTags: ['script', 'noscript', 'link', 'meta'],
|
||||||
|
allowedAttributes: {
|
||||||
|
script: [
|
||||||
|
'src', 'async', 'defer', 'type', 'crossorigin', 'integrity',
|
||||||
|
'nonce', 'referrerpolicy',
|
||||||
|
// Common tracker config attributes — Umami / Plausible / Rybbit
|
||||||
|
// / Pirsch / GoatCounter all configure via data-* on the script
|
||||||
|
// tag. sanitize-html doesn't support data-* wildcards, so we
|
||||||
|
// list the ones the major trackers use. Operators with an
|
||||||
|
// exotic data-attr the major trackers don't use can either
|
||||||
|
// file an issue or switch to one of the native providers.
|
||||||
|
'data-website-id', 'data-site-id', 'data-host-url', 'data-host',
|
||||||
|
'data-domains', 'data-domain', 'data-auto-track',
|
||||||
|
'data-do-not-track', 'data-cache', 'data-include', 'data-exclude',
|
||||||
|
'data-tag', 'data-tracker-script-version', 'data-uniqueid',
|
||||||
|
'data-events', 'data-api-host', 'data-server',
|
||||||
|
],
|
||||||
|
noscript: [],
|
||||||
|
link: ['rel', 'href', 'crossorigin', 'as'],
|
||||||
|
meta: ['name', 'content', 'charset', 'http-equiv'],
|
||||||
|
},
|
||||||
|
allowedSchemes: ['http', 'https'],
|
||||||
|
allowedSchemesByTag: {
|
||||||
|
script: ['http', 'https'],
|
||||||
|
link: ['http', 'https'],
|
||||||
|
},
|
||||||
|
// Inline `<script>…</script>` content needs to survive intact — this
|
||||||
|
// is the operator's tracker bootstrap. sanitize-html escapes text by
|
||||||
|
// default for non-script tags; the `allowVulnerableTags` flag is
|
||||||
|
// required to keep <script> in the allowlist without warnings.
|
||||||
|
allowVulnerableTags: true,
|
||||||
|
transformTags: {
|
||||||
|
// Drop <link> rels we don't recognise (no stylesheet, no icon — those
|
||||||
|
// aren't tracker-related). Keeps the field narrowly purposeful.
|
||||||
|
link: (tagName, attribs) => {
|
||||||
|
if (!ALLOWED_LINK_RELS.has((attribs.rel || '').toLowerCase())) {
|
||||||
|
return { tagName: '', attribs: {} };
|
||||||
|
}
|
||||||
|
return { tagName, attribs };
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (_) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { sanitizeTrackerSnippet };
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
/**
|
||||||
|
* Pluggable analytics-tracker registry (#663 Phase 1).
|
||||||
|
*
|
||||||
|
* Read the `analytics_tracker_provider` app_setting → return the matching
|
||||||
|
* adapter, configured with that provider's secrets. Used by the dashboard
|
||||||
|
* route to fetch the device breakdown from whichever tracker the operator
|
||||||
|
* picked, or null when the choice is "none" / "custom" (custom mode injects
|
||||||
|
* a script tag client-side but doesn't expose a metrics API back to us).
|
||||||
|
*
|
||||||
|
* const adapter = await resolveAdapter();
|
||||||
|
* if (adapter) {
|
||||||
|
* const devices = await adapter.fetchDeviceBreakdown({ startMs, endMs });
|
||||||
|
* if (devices) return devices;
|
||||||
|
* }
|
||||||
|
* // …fall back to local access_logs heuristic
|
||||||
|
*
|
||||||
|
* Back-compat: when `analytics_tracker_provider` is unset (every pre-#663
|
||||||
|
* install) we fall through to the legacy "is Umami enabled?" shape so the
|
||||||
|
* device-breakdown fix that landed in #662 keeps working without an admin
|
||||||
|
* touching settings. Once the admin picks an explicit provider from the
|
||||||
|
* dropdown introduced in this PR, that wins.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const { getAppSetting } = require('../../utils/appSettings');
|
||||||
|
const umami = require('./umamiAdapter');
|
||||||
|
const rybbit = require('./rybbitAdapter');
|
||||||
|
|
||||||
|
const VALID_PROVIDERS = ['none', 'umami', 'rybbit', 'custom'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Read all the tracker-related settings in one go and decide which adapter
|
||||||
|
* to instantiate. Returns null when no metrics adapter applies (None /
|
||||||
|
* Custom / unconfigured / missing key).
|
||||||
|
*/
|
||||||
|
async function resolveAdapter() {
|
||||||
|
const explicit = await getAppSetting('analytics_tracker_provider', null);
|
||||||
|
let provider = typeof explicit === 'string' && VALID_PROVIDERS.includes(explicit)
|
||||||
|
? explicit
|
||||||
|
: null;
|
||||||
|
|
||||||
|
// Back-compat: when no explicit provider is set, infer from the legacy
|
||||||
|
// analytics_umami_enabled flag. Once the admin saves the new dropdown,
|
||||||
|
// `provider` is always a string and we skip this.
|
||||||
|
if (!provider) {
|
||||||
|
const legacyUmami = await getAppSetting('analytics_umami_enabled', false);
|
||||||
|
provider = legacyUmami === true ? 'umami' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (provider === 'umami') {
|
||||||
|
return umami.buildAdapter({
|
||||||
|
baseUrl: await getAppSetting('analytics_umami_url', null),
|
||||||
|
websiteId: await getAppSetting('analytics_umami_website_id', null),
|
||||||
|
apiKey: await getAppSetting('analytics_umami_api_key', null),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (provider === 'rybbit') {
|
||||||
|
return rybbit.buildAdapter({
|
||||||
|
baseUrl: await getAppSetting('analytics_rybbit_url', null),
|
||||||
|
websiteId: await getAppSetting('analytics_rybbit_website_id', null),
|
||||||
|
apiKey: await getAppSetting('analytics_rybbit_api_key', null),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 'none' and 'custom' have no metrics adapter — caller falls back to
|
||||||
|
// access_logs (Custom mode is purely a client-side script slot).
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
resolveAdapter,
|
||||||
|
VALID_PROVIDERS,
|
||||||
|
// Exported for tests + direct injection in unit-level scenarios where
|
||||||
|
// resolveAdapter's getAppSetting calls would be overkill.
|
||||||
|
buildUmamiAdapter: umami.buildAdapter,
|
||||||
|
buildRybbitAdapter: rybbit.buildAdapter,
|
||||||
|
};
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
/**
|
||||||
|
* Rybbit metrics-API adapter (#663 Phase 1).
|
||||||
|
*
|
||||||
|
* Rybbit is a self-hosted privacy-friendly analytics product (https://rybbit.io).
|
||||||
|
* Reporter @alexvaltchev specifically asked for it in #661 follow-up, hence
|
||||||
|
* its inclusion as the second native adapter alongside Umami.
|
||||||
|
*
|
||||||
|
* Contract: matches `umamiAdapter` exactly so the dashboard route can call
|
||||||
|
* either via the factory.
|
||||||
|
*
|
||||||
|
* Auth: Rybbit v1 issues per-account API keys (Account → Settings → API
|
||||||
|
* Keys). Sent via `Authorization: Bearer <key>`. Their docs at
|
||||||
|
* https://rybbit.io/docs/api describe the analytics endpoints.
|
||||||
|
*
|
||||||
|
* Endpoint shape (Rybbit v1 stats API, devices breakdown):
|
||||||
|
*
|
||||||
|
* GET {baseUrl}/api/site/{websiteId}/breakdown
|
||||||
|
* ?dimension=device
|
||||||
|
* &start={iso8601-or-epoch-ms}
|
||||||
|
* &end={iso8601-or-epoch-ms}
|
||||||
|
*
|
||||||
|
* Returns rows like `[{ device: 'desktop', visitors: 123, sessions: 456 }, …]`.
|
||||||
|
* We aggregate `sessions` into the same 3-bucket shape Umami returns.
|
||||||
|
*
|
||||||
|
* Per-bucket naming: Rybbit reports `desktop` / `mobile` / `tablet`
|
||||||
|
* directly (matches our UI). Anything unrecognised is dropped rather than
|
||||||
|
* silently miscategorised.
|
||||||
|
*
|
||||||
|
* NOTE: Rybbit's API is on v0.x at the time of writing. The endpoint /
|
||||||
|
* dimension names below match the documented v1 GA shape; if a tester
|
||||||
|
* confirms a deviation in the wild we adjust here, and the rest of the
|
||||||
|
* codebase keeps working because the adapter returns null on shape
|
||||||
|
* mismatch (route falls back to access_logs).
|
||||||
|
*/
|
||||||
|
|
||||||
|
const logger = require('../../utils/logger');
|
||||||
|
|
||||||
|
const REQUEST_TIMEOUT_MS = 5000;
|
||||||
|
|
||||||
|
function buildAdapter({ baseUrl, websiteId, apiKey }) {
|
||||||
|
return {
|
||||||
|
provider: 'rybbit',
|
||||||
|
async fetchDeviceBreakdown({ startMs, endMs }) {
|
||||||
|
if (!baseUrl || !websiteId || !apiKey) return null;
|
||||||
|
|
||||||
|
const trimmedBase = String(baseUrl).replace(/\/+$/, '');
|
||||||
|
const startIso = new Date(startMs).toISOString();
|
||||||
|
const endIso = new Date(endMs).toISOString();
|
||||||
|
const url = `${trimmedBase}/api/site/${encodeURIComponent(websiteId)}/breakdown`
|
||||||
|
+ `?dimension=device&start=${encodeURIComponent(startIso)}&end=${encodeURIComponent(endIso)}`;
|
||||||
|
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
|
||||||
|
let response;
|
||||||
|
try {
|
||||||
|
response = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${apiKey}`,
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
signal: controller.signal,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
if (err.name === 'AbortError') {
|
||||||
|
logger.warn('Rybbit device fetch: timeout', { url });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
logger.warn('Rybbit device fetch: network error', { error: err.message });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
clearTimeout(timer);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
logger.warn('Rybbit device fetch: non-2xx', { status: response.status });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let data;
|
||||||
|
try {
|
||||||
|
data = await response.json();
|
||||||
|
} catch (err) {
|
||||||
|
logger.warn('Rybbit device fetch: invalid JSON', { error: err.message });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rybbit might return either `[…]` or `{ data: [...] }` depending on
|
||||||
|
// version. Accept both shapes defensively.
|
||||||
|
const rows = Array.isArray(data) ? data : (Array.isArray(data?.data) ? data.data : null);
|
||||||
|
if (!rows) return null;
|
||||||
|
|
||||||
|
const counts = { desktop: 0, mobile: 0, tablet: 0 };
|
||||||
|
let total = 0;
|
||||||
|
for (const entry of rows) {
|
||||||
|
if (!entry) continue;
|
||||||
|
// Tolerate either `device` or generic `dimension` key for the bucket
|
||||||
|
// label. Numeric metric prefers sessions, falls back to visitors.
|
||||||
|
const bucket = entry.device || entry.dimension || entry.name;
|
||||||
|
if (typeof bucket !== 'string') continue;
|
||||||
|
const n = Number(entry.sessions ?? entry.visitors ?? entry.value ?? entry.count);
|
||||||
|
if (!Number.isFinite(n) || n <= 0) continue;
|
||||||
|
const key = bucket.toLowerCase();
|
||||||
|
if (key in counts) {
|
||||||
|
counts[key] += n;
|
||||||
|
total += n;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (total === 0) return null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
desktop: Math.round((counts.desktop / total) * 100),
|
||||||
|
mobile: Math.round((counts.mobile / total) * 100),
|
||||||
|
tablet: Math.round((counts.tablet / total) * 100),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { buildAdapter };
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
/**
|
||||||
|
* Umami v2 metrics-API adapter (#663 — extracted from `services/umamiClient.js`
|
||||||
|
* during the pluggable-tracker refactor in #663 Phase 1).
|
||||||
|
*
|
||||||
|
* Contract — every tracker adapter implements `fetchDeviceBreakdown` with
|
||||||
|
* the same signature so the dashboard route can call them interchangeably
|
||||||
|
* via the factory in `./index.js`:
|
||||||
|
*
|
||||||
|
* fetchDeviceBreakdown({ startMs, endMs }) → { desktop, mobile, tablet } | null
|
||||||
|
*
|
||||||
|
* Returns null on missing config / non-2xx / parse error / network error so
|
||||||
|
* the route layer can fall back to the local access_logs heuristic.
|
||||||
|
*
|
||||||
|
* Auth: per-account API keys generated in Umami → Settings → Profile → API
|
||||||
|
* Keys. Sent via the `x-umami-api-key` header. Older session-cookie auth is
|
||||||
|
* intentionally NOT supported — operators should issue an API key rather
|
||||||
|
* than embedding their Umami password in PicPeak.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const logger = require('../../utils/logger');
|
||||||
|
|
||||||
|
const REQUEST_TIMEOUT_MS = 5000;
|
||||||
|
|
||||||
|
function buildAdapter({ baseUrl, websiteId, apiKey }) {
|
||||||
|
return {
|
||||||
|
provider: 'umami',
|
||||||
|
async fetchDeviceBreakdown({ startMs, endMs }) {
|
||||||
|
if (!baseUrl || !websiteId || !apiKey) return null;
|
||||||
|
|
||||||
|
const trimmedBase = String(baseUrl).replace(/\/+$/, '');
|
||||||
|
const url = `${trimmedBase}/api/websites/${encodeURIComponent(websiteId)}/metrics`
|
||||||
|
+ `?type=device&startAt=${encodeURIComponent(startMs)}&endAt=${encodeURIComponent(endMs)}`;
|
||||||
|
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
|
||||||
|
let response;
|
||||||
|
try {
|
||||||
|
response = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'x-umami-api-key': apiKey,
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
signal: controller.signal,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
if (err.name === 'AbortError') {
|
||||||
|
logger.warn('Umami device fetch: timeout', { url });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
logger.warn('Umami device fetch: network error', { error: err.message });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
clearTimeout(timer);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
logger.warn('Umami device fetch: non-2xx', { status: response.status });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
let data;
|
||||||
|
try {
|
||||||
|
data = await response.json();
|
||||||
|
} catch (err) {
|
||||||
|
logger.warn('Umami device fetch: invalid JSON', { error: err.message });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(data)) return null;
|
||||||
|
|
||||||
|
// Umami buckets device types into these strings: `desktop`, `mobile`,
|
||||||
|
// `tablet`, `laptop`. Map `laptop` → `desktop` for our 3-bucket UI; drop
|
||||||
|
// anything we don't recognise (vs. silently miscategorising).
|
||||||
|
const counts = { desktop: 0, mobile: 0, tablet: 0 };
|
||||||
|
let total = 0;
|
||||||
|
for (const entry of data) {
|
||||||
|
if (!entry || typeof entry.x !== 'string') continue;
|
||||||
|
const n = Number(entry.y);
|
||||||
|
if (!Number.isFinite(n) || n <= 0) continue;
|
||||||
|
const key = entry.x === 'laptop' ? 'desktop' : entry.x;
|
||||||
|
if (key in counts) {
|
||||||
|
counts[key] += n;
|
||||||
|
total += n;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (total === 0) return null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
desktop: Math.round((counts.desktop / total) * 100),
|
||||||
|
mobile: Math.round((counts.mobile / total) * 100),
|
||||||
|
tablet: Math.round((counts.tablet / total) * 100),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { buildAdapter };
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
/**
|
|
||||||
* Thin Umami v2 API client (#661 Bug C).
|
|
||||||
*
|
|
||||||
* We use this in exactly one place today — `GET /admin/dashboard/analytics`
|
|
||||||
* pulls device-breakdown stats from Umami when an admin has provided an
|
|
||||||
* API key, because our own user-agent heuristic on `access_logs` returns
|
|
||||||
* 0/0/0 on installs where guest UAs don't reliably contain "Mobile" /
|
|
||||||
* "Tablet" tokens. Umami tracks devices natively.
|
|
||||||
*
|
|
||||||
* Auth: Umami v2 supports per-account API keys generated in the Umami UI
|
|
||||||
* (Settings → Profile → API Keys). We send them via the `x-umami-api-key`
|
|
||||||
* header. Older session-cookie-based auth is intentionally NOT supported
|
|
||||||
* here — operators should generate an API key rather than embedding their
|
|
||||||
* Umami account password in PicPeak.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const logger = require('../utils/logger');
|
|
||||||
|
|
||||||
const REQUEST_TIMEOUT_MS = 5000;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetch the device breakdown for a Umami website in [startMs, endMs]. Returns
|
|
||||||
* `{ desktop, mobile, tablet }` as integer percentages summing to ~100, or
|
|
||||||
* `null` when the upstream call fails / returns no data — callers should
|
|
||||||
* treat null as "fall back to the local heuristic".
|
|
||||||
*
|
|
||||||
* @param {object} opts
|
|
||||||
* @param {string} opts.baseUrl — Umami instance root, e.g. https://analytics.example.com
|
|
||||||
* @param {string} opts.websiteId — UUID from the Umami website settings
|
|
||||||
* @param {string} opts.apiKey — Umami API key (x-umami-api-key)
|
|
||||||
* @param {number} opts.startMs — epoch ms, start of window
|
|
||||||
* @param {number} opts.endMs — epoch ms, end of window
|
|
||||||
*/
|
|
||||||
async function fetchUmamiDeviceBreakdown({ baseUrl, websiteId, apiKey, startMs, endMs }) {
|
|
||||||
if (!baseUrl || !websiteId || !apiKey) return null;
|
|
||||||
|
|
||||||
const trimmedBase = String(baseUrl).replace(/\/+$/, '');
|
|
||||||
const url = `${trimmedBase}/api/websites/${encodeURIComponent(websiteId)}/metrics`
|
|
||||||
+ `?type=device&startAt=${encodeURIComponent(startMs)}&endAt=${encodeURIComponent(endMs)}`;
|
|
||||||
|
|
||||||
const controller = new AbortController();
|
|
||||||
const timer = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
|
|
||||||
let response;
|
|
||||||
try {
|
|
||||||
response = await fetch(url, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'x-umami-api-key': apiKey,
|
|
||||||
Accept: 'application/json',
|
|
||||||
},
|
|
||||||
signal: controller.signal,
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
clearTimeout(timer);
|
|
||||||
if (err.name === 'AbortError') {
|
|
||||||
logger.warn('Umami device fetch: timeout', { url });
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
logger.warn('Umami device fetch: network error', { error: err.message });
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
clearTimeout(timer);
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
logger.warn('Umami device fetch: non-2xx', { status: response.status });
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
let data;
|
|
||||||
try {
|
|
||||||
data = await response.json();
|
|
||||||
} catch (err) {
|
|
||||||
logger.warn('Umami device fetch: invalid JSON', { error: err.message });
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Array.isArray(data)) return null;
|
|
||||||
|
|
||||||
// Umami buckets device types into these strings: `desktop`, `mobile`,
|
|
||||||
// `tablet`, `laptop`. Map `laptop` → `desktop` for our 3-bucket UI; drop
|
|
||||||
// anything we don't recognise (vs. silently miscategorising).
|
|
||||||
const counts = { desktop: 0, mobile: 0, tablet: 0 };
|
|
||||||
let total = 0;
|
|
||||||
for (const entry of data) {
|
|
||||||
if (!entry || typeof entry.x !== 'string') continue;
|
|
||||||
const n = Number(entry.y);
|
|
||||||
if (!Number.isFinite(n) || n <= 0) continue;
|
|
||||||
const key = entry.x === 'laptop' ? 'desktop' : entry.x;
|
|
||||||
if (key in counts) {
|
|
||||||
counts[key] += n;
|
|
||||||
total += n;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (total === 0) return null;
|
|
||||||
|
|
||||||
return {
|
|
||||||
desktop: Math.round((counts.desktop / total) * 100),
|
|
||||||
mobile: Math.round((counts.mobile / total) * 100),
|
|
||||||
tablet: Math.round((counts.tablet / total) * 100),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = { fetchUmamiDeviceBreakdown };
|
|
||||||
+39
-6
@@ -87,8 +87,13 @@ const queryClient = new QueryClient({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Bootstraps Umami analytics from /public/settings. Lives inside QueryClientProvider
|
// Bootstraps the analytics tracker from /public/settings. Lives inside
|
||||||
// so it shares the public-settings cache with every other consumer of usePublicSettings.
|
// QueryClientProvider so it shares the public-settings cache with every
|
||||||
|
// other consumer of usePublicSettings. Dispatches based on the
|
||||||
|
// `analytics_tracker_provider` switch (#663 Phase 1) — Umami / Rybbit /
|
||||||
|
// Custom / None. Back-compat: when the provider field is missing or unset,
|
||||||
|
// falls through to the legacy `umami_enabled`-based behaviour so installs
|
||||||
|
// that haven't picked yet keep working.
|
||||||
function AnalyticsBootstrap() {
|
function AnalyticsBootstrap() {
|
||||||
const { data: settings, isError } = usePublicSettings();
|
const { data: settings, isError } = usePublicSettings();
|
||||||
|
|
||||||
@@ -97,21 +102,49 @@ function AnalyticsBootstrap() {
|
|||||||
|
|
||||||
const envUmamiUrl = import.meta.env.VITE_UMAMI_URL;
|
const envUmamiUrl = import.meta.env.VITE_UMAMI_URL;
|
||||||
const envUmamiWebsiteId = import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
const envUmamiWebsiteId = import.meta.env.VITE_UMAMI_WEBSITE_ID;
|
||||||
|
const provider = settings?.analytics_tracker_provider;
|
||||||
|
|
||||||
if (settings?.umami_enabled && settings.umami_url && settings.umami_website_id) {
|
if (provider === 'rybbit' && settings?.rybbit_url && settings.rybbit_website_id) {
|
||||||
analyticsService.initialize({
|
analyticsService.initialize({
|
||||||
websiteId: settings.umami_website_id,
|
provider: 'rybbit',
|
||||||
hostUrl: settings.umami_url,
|
hostUrl: settings.rybbit_url,
|
||||||
|
websiteId: settings.rybbit_website_id,
|
||||||
autoTrack: true,
|
autoTrack: true,
|
||||||
doNotTrack: true,
|
doNotTrack: true,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (provider === 'custom') {
|
||||||
|
analyticsService.initialize({
|
||||||
|
provider: 'custom',
|
||||||
|
customHeadHtml: settings?.analytics_custom_head_html || '',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Umami: explicit provider OR legacy umami_enabled path.
|
||||||
|
if (
|
||||||
|
(provider === 'umami' || settings?.umami_enabled)
|
||||||
|
&& settings?.umami_url && settings?.umami_website_id
|
||||||
|
) {
|
||||||
|
analyticsService.initialize({
|
||||||
|
provider: 'umami',
|
||||||
|
hostUrl: settings.umami_url,
|
||||||
|
websiteId: settings.umami_website_id,
|
||||||
|
autoTrack: true,
|
||||||
|
doNotTrack: true,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Env-var fallback (legacy deploys). Only when no DB config and
|
||||||
|
// analytics aren't disabled at the public-site level.
|
||||||
if (envUmamiUrl && envUmamiWebsiteId && (isError || settings?.enable_analytics !== false)) {
|
if (envUmamiUrl && envUmamiWebsiteId && (isError || settings?.enable_analytics !== false)) {
|
||||||
analyticsService.initialize({
|
analyticsService.initialize({
|
||||||
websiteId: envUmamiWebsiteId,
|
provider: 'umami',
|
||||||
hostUrl: envUmamiUrl,
|
hostUrl: envUmamiUrl,
|
||||||
|
websiteId: envUmamiWebsiteId,
|
||||||
autoTrack: true,
|
autoTrack: true,
|
||||||
doNotTrack: true,
|
doNotTrack: true,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -45,7 +45,13 @@ export interface SecuritySettings {
|
|||||||
recaptcha_secret_key: string;
|
recaptcha_secret_key: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type TrackerProvider = 'none' | 'umami' | 'rybbit' | 'custom';
|
||||||
|
|
||||||
export interface AnalyticsSettings {
|
export interface AnalyticsSettings {
|
||||||
|
// Tracker-provider switch (#663 Phase 1). Drives which provider's
|
||||||
|
// settings panel renders + which tracker script gets injected into the
|
||||||
|
// public gallery. 'none' = no tracker; 'custom' = paste-your-own HTML.
|
||||||
|
tracker_provider: TrackerProvider;
|
||||||
umami_enabled: boolean;
|
umami_enabled: boolean;
|
||||||
umami_url: string;
|
umami_url: string;
|
||||||
umami_website_id: string;
|
umami_website_id: string;
|
||||||
@@ -56,6 +62,14 @@ export interface AnalyticsSettings {
|
|||||||
// on GET when a value is stored — submit the masked sentinel unchanged
|
// on GET when a value is stored — submit the masked sentinel unchanged
|
||||||
// to keep the stored value, or a real key to replace it.
|
// to keep the stored value, or a real key to replace it.
|
||||||
umami_api_key: string;
|
umami_api_key: string;
|
||||||
|
// Rybbit native provider (#663 Phase 1). Same shape as Umami.
|
||||||
|
rybbit_url: string;
|
||||||
|
rybbit_website_id: string;
|
||||||
|
rybbit_api_key: string;
|
||||||
|
// Custom-mode HTML snippet (#663). Sanitised server-side on save via
|
||||||
|
// sanitize-html with a tracker-script allowlist. Rendered into the
|
||||||
|
// public gallery <head> as-is on every request.
|
||||||
|
custom_head_html: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface EventSettings {
|
export interface EventSettings {
|
||||||
@@ -132,11 +146,16 @@ export function useSettingsState() {
|
|||||||
|
|
||||||
// Analytics settings state
|
// Analytics settings state
|
||||||
const [analyticsSettings, setAnalyticsSettings] = useState<AnalyticsSettings>({
|
const [analyticsSettings, setAnalyticsSettings] = useState<AnalyticsSettings>({
|
||||||
|
tracker_provider: 'none',
|
||||||
umami_enabled: false,
|
umami_enabled: false,
|
||||||
umami_url: '',
|
umami_url: '',
|
||||||
umami_website_id: '',
|
umami_website_id: '',
|
||||||
umami_share_url: '',
|
umami_share_url: '',
|
||||||
umami_api_key: ''
|
umami_api_key: '',
|
||||||
|
rybbit_url: '',
|
||||||
|
rybbit_website_id: '',
|
||||||
|
rybbit_api_key: '',
|
||||||
|
custom_head_html: ''
|
||||||
});
|
});
|
||||||
|
|
||||||
// Event creation settings state
|
// Event creation settings state
|
||||||
@@ -222,12 +241,27 @@ export function useSettingsState() {
|
|||||||
recaptcha_secret_key: settings.security_recaptcha_secret_key ?? ''
|
recaptcha_secret_key: settings.security_recaptcha_secret_key ?? ''
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Tracker provider: prefer explicit setting; fall back to legacy
|
||||||
|
// umami_enabled flag for installs that haven't picked yet (#663).
|
||||||
|
const explicitProvider = settings.analytics_tracker_provider;
|
||||||
|
const provider: TrackerProvider = (
|
||||||
|
explicitProvider === 'none' || explicitProvider === 'umami'
|
||||||
|
|| explicitProvider === 'rybbit' || explicitProvider === 'custom'
|
||||||
|
)
|
||||||
|
? explicitProvider
|
||||||
|
: (toBoolean(settings.analytics_umami_enabled, false) ? 'umami' : 'none');
|
||||||
|
|
||||||
setAnalyticsSettings({
|
setAnalyticsSettings({
|
||||||
|
tracker_provider: provider,
|
||||||
umami_enabled: toBoolean(settings.analytics_umami_enabled, false),
|
umami_enabled: toBoolean(settings.analytics_umami_enabled, false),
|
||||||
umami_url: settings.analytics_umami_url || '',
|
umami_url: settings.analytics_umami_url || '',
|
||||||
umami_website_id: settings.analytics_umami_website_id || '',
|
umami_website_id: settings.analytics_umami_website_id || '',
|
||||||
umami_share_url: settings.analytics_umami_share_url || '',
|
umami_share_url: settings.analytics_umami_share_url || '',
|
||||||
umami_api_key: settings.analytics_umami_api_key || ''
|
umami_api_key: settings.analytics_umami_api_key || '',
|
||||||
|
rybbit_url: settings.analytics_rybbit_url || '',
|
||||||
|
rybbit_website_id: settings.analytics_rybbit_website_id || '',
|
||||||
|
rybbit_api_key: settings.analytics_rybbit_api_key || '',
|
||||||
|
custom_head_html: settings.analytics_custom_head_html || ''
|
||||||
});
|
});
|
||||||
|
|
||||||
setEventSettings({
|
setEventSettings({
|
||||||
@@ -323,12 +357,16 @@ export function useSettingsState() {
|
|||||||
mutationFn: async () => {
|
mutationFn: async () => {
|
||||||
const settingsData: Record<string, unknown> = {};
|
const settingsData: Record<string, unknown> = {};
|
||||||
Object.entries(analyticsSettings).forEach(([key, value]) => {
|
Object.entries(analyticsSettings).forEach(([key, value]) => {
|
||||||
// The Umami API key (#661 Bug C) is returned masked as `••••••••`
|
// API keys (Umami / Rybbit) are returned masked as `••••••••` on
|
||||||
// on GET so it doesn't leak in the response body. Don't re-save
|
// GET so they don't leak in the response body. Don't re-save the
|
||||||
// that sentinel — silently preserve whatever's already stored.
|
// sentinel — silently preserve whatever's already stored.
|
||||||
if (key === 'umami_api_key' && value === '••••••••') return;
|
if ((key === 'umami_api_key' || key === 'rybbit_api_key') && value === '••••••••') return;
|
||||||
settingsData[`analytics_${key}`] = value;
|
settingsData[`analytics_${key}`] = value;
|
||||||
});
|
});
|
||||||
|
// Keep the legacy `analytics_umami_enabled` flag in sync with the
|
||||||
|
// new `tracker_provider` switch so back-compat consumers (publicSettings
|
||||||
|
// surface, embedded Umami iframe) keep working when provider !== 'umami'.
|
||||||
|
settingsData.analytics_umami_enabled = analyticsSettings.tracker_provider === 'umami';
|
||||||
return settingsService.updateSettings(settingsData);
|
return settingsService.updateSettings(settingsData);
|
||||||
},
|
},
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Save, Globe, Key, Activity, AlertCircle } from 'lucide-react';
|
import { Save, Globe, Key, Activity, AlertCircle, Code } from 'lucide-react';
|
||||||
import { Button, Card, Input } from '../../../components/common';
|
import { Button, Card, Input } from '../../../components/common';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import type { AnalyticsSettings } from '../hooks/useSettingsState';
|
import type { AnalyticsSettings, TrackerProvider } from '../hooks/useSettingsState';
|
||||||
|
|
||||||
interface AnalyticsTabProps {
|
interface AnalyticsTabProps {
|
||||||
analyticsSettings: AnalyticsSettings;
|
analyticsSettings: AnalyticsSettings;
|
||||||
@@ -13,6 +13,8 @@ interface AnalyticsTabProps {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const PROVIDER_OPTIONS: TrackerProvider[] = ['none', 'umami', 'rybbit', 'custom'];
|
||||||
|
|
||||||
export const AnalyticsTab: React.FC<AnalyticsTabProps> = ({
|
export const AnalyticsTab: React.FC<AnalyticsTabProps> = ({
|
||||||
analyticsSettings,
|
analyticsSettings,
|
||||||
setAnalyticsSettings,
|
setAnalyticsSettings,
|
||||||
@@ -20,110 +22,238 @@ export const AnalyticsTab: React.FC<AnalyticsTabProps> = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const provider = analyticsSettings.tracker_provider;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<Card padding="md">
|
<Card padding="md">
|
||||||
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-4">{t('settings.analytics.umamiIntegration')}</h2>
|
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100 mb-1">
|
||||||
|
{t('settings.analytics.providerHeading', 'Analytics provider')}
|
||||||
<div className="space-y-4">
|
</h2>
|
||||||
<label className="flex items-center">
|
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4">
|
||||||
<input
|
{t(
|
||||||
type="checkbox"
|
'settings.analytics.providerDescription',
|
||||||
checked={analyticsSettings.umami_enabled}
|
'Pick which tracker to use for the public gallery, or paste your own script. The admin dashboard\'s device-breakdown chart only enriches when you pick Umami or Rybbit — those expose a metrics API. Other providers (Plausible, Matomo, GA4, …) work via the Custom mode below.',
|
||||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_enabled: e.target.checked }))}
|
|
||||||
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
|
|
||||||
/>
|
|
||||||
<span className="ml-2 text-sm text-neutral-700 dark:text-neutral-300">{t('settings.analytics.enableUmami')}</span>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
{analyticsSettings.umami_enabled && (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
|
||||||
{t('settings.analytics.umamiUrl')}
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="url"
|
|
||||||
value={analyticsSettings.umami_url}
|
|
||||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_url: e.target.value }))}
|
|
||||||
placeholder="https://analytics.yourdomain.com"
|
|
||||||
leftIcon={<Globe className="w-5 h-5 text-neutral-400" />}
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
|
||||||
{t('settings.analytics.umamiUrlHelp')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
|
||||||
{t('settings.analytics.websiteId')}
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
value={analyticsSettings.umami_website_id}
|
|
||||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_website_id: e.target.value }))}
|
|
||||||
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
|
|
||||||
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
|
||||||
{t('settings.analytics.websiteIdHelp')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
|
||||||
{t('settings.analytics.shareUrl')}
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="url"
|
|
||||||
value={analyticsSettings.umami_share_url}
|
|
||||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_share_url: e.target.value }))}
|
|
||||||
placeholder="https://analytics.yourdomain.com/share/..."
|
|
||||||
leftIcon={<Activity className="w-5 h-5 text-neutral-400" />}
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
|
||||||
{t('settings.analytics.shareUrlHelp')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Umami API key — only used by the dashboard's device
|
|
||||||
breakdown today (#661 Bug C). Optional; the rest of the
|
|
||||||
integration works without it. Masked as •••••••• on GET. */}
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
|
||||||
{t('settings.analytics.umamiApiKey', 'API key')}
|
|
||||||
</label>
|
|
||||||
<Input
|
|
||||||
type="password"
|
|
||||||
value={analyticsSettings.umami_api_key}
|
|
||||||
onChange={(e) => setAnalyticsSettings(prev => ({ ...prev, umami_api_key: e.target.value }))}
|
|
||||||
placeholder="api_xxx…"
|
|
||||||
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
|
||||||
autoComplete="off"
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
|
||||||
{t(
|
|
||||||
'settings.analytics.umamiApiKeyHelp',
|
|
||||||
'Optional. Required only for the device-breakdown chart on the Analytics dashboard. Generate in Umami → Settings → Profile → API Keys. Stored masked as •••••••• once saved — leave the masked value to keep the existing key.',
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Provider dropdown — single source of truth for which panel renders. */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.providerLabel', 'Provider')}
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={provider}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({
|
||||||
|
...prev,
|
||||||
|
tracker_provider: e.target.value as TrackerProvider,
|
||||||
|
}))}
|
||||||
|
className="w-full sm:w-72 px-3 py-2 text-sm border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100"
|
||||||
|
>
|
||||||
|
{PROVIDER_OPTIONS.map((p) => (
|
||||||
|
<option key={p} value={p}>
|
||||||
|
{t(`settings.analytics.provider.${p}`, p)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Umami panel */}
|
||||||
|
{provider === 'umami' && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.umamiUrl')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="url"
|
||||||
|
value={analyticsSettings.umami_url}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({ ...prev, umami_url: e.target.value }))}
|
||||||
|
placeholder="https://analytics.yourdomain.com"
|
||||||
|
leftIcon={<Globe className="w-5 h-5 text-neutral-400" />}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||||
|
{t('settings.analytics.umamiUrlHelp')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.websiteId')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
value={analyticsSettings.umami_website_id}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({ ...prev, umami_website_id: e.target.value }))}
|
||||||
|
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
|
||||||
|
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||||
|
{t('settings.analytics.websiteIdHelp')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.shareUrl')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="url"
|
||||||
|
value={analyticsSettings.umami_share_url}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({ ...prev, umami_share_url: e.target.value }))}
|
||||||
|
placeholder="https://analytics.yourdomain.com/share/..."
|
||||||
|
leftIcon={<Activity className="w-5 h-5 text-neutral-400" />}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||||
|
{t('settings.analytics.shareUrlHelp')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.umamiApiKey', 'API key')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
value={analyticsSettings.umami_api_key}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({ ...prev, umami_api_key: e.target.value }))}
|
||||||
|
placeholder="api_xxx…"
|
||||||
|
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||||
|
{t(
|
||||||
|
'settings.analytics.umamiApiKeyHelp',
|
||||||
|
'Optional. Required only for the device-breakdown chart on the Analytics dashboard. Generate in Umami → Settings → Profile → API Keys. Stored masked as •••••••• once saved — leave the masked value to keep the existing key.',
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Rybbit panel */}
|
||||||
|
{provider === 'rybbit' && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.rybbitUrl', 'Rybbit URL')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="url"
|
||||||
|
value={analyticsSettings.rybbit_url}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({ ...prev, rybbit_url: e.target.value }))}
|
||||||
|
placeholder="https://app.rybbit.io"
|
||||||
|
leftIcon={<Globe className="w-5 h-5 text-neutral-400" />}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||||
|
{t(
|
||||||
|
'settings.analytics.rybbitUrlHelp',
|
||||||
|
'Your Rybbit instance URL — `https://app.rybbit.io` for the SaaS, or `https://rybbit.yourdomain.com` for self-hosted.',
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.rybbitWebsiteId', 'Site ID')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
value={analyticsSettings.rybbit_website_id}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({ ...prev, rybbit_website_id: e.target.value }))}
|
||||||
|
placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
|
||||||
|
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||||
|
{t(
|
||||||
|
'settings.analytics.rybbitWebsiteIdHelp',
|
||||||
|
'Found in Rybbit → Sites → your site → Tracking script.',
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.rybbitApiKey', 'API key')}
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
value={analyticsSettings.rybbit_api_key}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({ ...prev, rybbit_api_key: e.target.value }))}
|
||||||
|
placeholder="rybbit_xxx…"
|
||||||
|
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||||
|
{t(
|
||||||
|
'settings.analytics.rybbitApiKeyHelp',
|
||||||
|
'Optional. Required only for the device-breakdown chart. Generate in Rybbit → Account → Settings → API Keys. Stored masked as •••••••• once saved.',
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Custom panel */}
|
||||||
|
{provider === 'custom' && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||||
|
{t('settings.analytics.customHeadHtml', 'Custom <head> HTML')}
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<span className="absolute left-3 top-3 pointer-events-none">
|
||||||
|
<Code className="w-5 h-5 text-neutral-400" />
|
||||||
|
</span>
|
||||||
|
<textarea
|
||||||
|
value={analyticsSettings.custom_head_html}
|
||||||
|
onChange={(e) => setAnalyticsSettings((prev) => ({ ...prev, custom_head_html: e.target.value }))}
|
||||||
|
placeholder={'<script async defer data-domain="example.com" src="https://plausible.io/js/script.js"></script>'}
|
||||||
|
rows={6}
|
||||||
|
spellCheck={false}
|
||||||
|
className="w-full pl-10 pr-3 py-2 font-mono text-xs border border-neutral-300 dark:border-neutral-600 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
|
||||||
|
{t(
|
||||||
|
'settings.analytics.customHeadHtmlHelp',
|
||||||
|
'Paste your tracker\'s `<head>` snippet (Plausible, Matomo, Pirsch, GA4, GoatCounter, Fathom, Cloudflare Web Analytics, …). Sanitised on save: only `<script>` / `<noscript>` / `<link rel="preconnect|dns-prefetch">` / `<meta>` tags survive, and event-handler attributes are stripped. The admin dashboard\'s device-breakdown chart falls back to a server-side user-agent heuristic in this mode — pick Umami or Rybbit if you want the tracker-side numbers.',
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
|
||||||
|
<div className="text-sm text-amber-800 dark:text-amber-200">
|
||||||
|
<p className="font-medium mb-1">
|
||||||
|
{t('settings.analytics.customCspWarning', 'Content-Security-Policy reminder')}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
{t(
|
||||||
|
'settings.analytics.customCspWarningText',
|
||||||
|
'PicPeak ships with a strict CSP (`script-src \'self\'`). If your tracker loads from another domain, add that domain to your reverse-proxy or nginx CSP config — otherwise the browser silently blocks the script.',
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{provider === 'none' && (
|
||||||
<div className="p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg">
|
<div className="p-4 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg">
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<AlertCircle className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" />
|
<AlertCircle className="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0" />
|
||||||
<div className="text-sm text-blue-800 dark:text-blue-200">
|
<div className="text-sm text-blue-800 dark:text-blue-200">
|
||||||
<p className="font-medium mb-1">{t('settings.analytics.umamiInfo')}</p>
|
{t(
|
||||||
<p>{t('settings.analytics.umamiInfoText')}</p>
|
'settings.analytics.providerNoneInfo',
|
||||||
<a href="https://umami.is" target="_blank" rel="noopener noreferrer" className="underline mt-1 inline-block">
|
'No external tracker injected. The admin dashboard still shows summary cards + the daily chart from PicPeak\'s own access_logs; the device-breakdown chart uses a coarse user-agent heuristic.',
|
||||||
{t('settings.analytics.learnMore')}
|
)}
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -1519,6 +1519,26 @@
|
|||||||
},
|
},
|
||||||
"analytics": {
|
"analytics": {
|
||||||
"title": "Analyse",
|
"title": "Analyse",
|
||||||
|
"providerHeading": "Analytics-Anbieter",
|
||||||
|
"providerDescription": "Tracker für die öffentliche Galerie wählen oder eigenes Skript einfügen. Das Geräte-Diagramm im Admin-Dashboard wird nur bei Umami oder Rybbit angereichert — diese stellen eine Metrics-API bereit. Andere Anbieter (Plausible, Matomo, GA4, …) funktionieren über den Custom-Modus unten.",
|
||||||
|
"providerLabel": "Anbieter",
|
||||||
|
"provider": {
|
||||||
|
"none": "Keiner",
|
||||||
|
"umami": "Umami",
|
||||||
|
"rybbit": "Rybbit",
|
||||||
|
"custom": "Custom (eigenes Skript einfügen)"
|
||||||
|
},
|
||||||
|
"providerNoneInfo": "Kein externer Tracker eingebunden. Das Admin-Dashboard zeigt weiterhin Übersichtskarten + den Tagesverlauf aus PicPeaks eigenen access_logs; das Geräte-Diagramm verwendet eine grobe User-Agent-Heuristik.",
|
||||||
|
"rybbitUrl": "Rybbit-URL",
|
||||||
|
"rybbitUrlHelp": "URL Ihrer Rybbit-Instanz — `https://app.rybbit.io` für SaaS oder `https://rybbit.ihre-domain.de` für selbst gehostet.",
|
||||||
|
"rybbitWebsiteId": "Site-ID",
|
||||||
|
"rybbitWebsiteIdHelp": "Zu finden in Rybbit → Sites → Ihre Site → Tracking-Skript.",
|
||||||
|
"rybbitApiKey": "API-Schlüssel",
|
||||||
|
"rybbitApiKeyHelp": "Optional. Nur für das Geräte-Diagramm erforderlich. Erstellen in Rybbit → Account → Settings → API Keys. Beim Abruf maskiert als •••••••• gespeichert.",
|
||||||
|
"customHeadHtml": "Eigenes <head>-HTML",
|
||||||
|
"customHeadHtmlHelp": "Tracker-`<head>`-Snippet einfügen (Plausible, Matomo, Pirsch, GA4, GoatCounter, Fathom, Cloudflare Web Analytics, …). Beim Speichern bereinigt: nur `<script>`, `<noscript>`, `<link rel=\"preconnect|dns-prefetch\">` und `<meta>` bleiben erhalten; Event-Handler-Attribute werden entfernt. Das Geräte-Diagramm fällt in diesem Modus auf eine serverseitige User-Agent-Heuristik zurück — für tracker-seitige Zahlen Umami oder Rybbit wählen.",
|
||||||
|
"customCspWarning": "Hinweis zur Content-Security-Policy",
|
||||||
|
"customCspWarningText": "PicPeak setzt eine strikte CSP (`script-src 'self'`) ein. Wenn Ihr Tracker von einer anderen Domain lädt, müssen Sie diese Domain in Ihrer Reverse-Proxy- oder nginx-CSP-Konfiguration zulassen — sonst blockiert der Browser das Skript stillschweigend.",
|
||||||
"umamiIntegration": "Umami Analytics Integration",
|
"umamiIntegration": "Umami Analytics Integration",
|
||||||
"enableUmami": "Umami Analytics aktivieren",
|
"enableUmami": "Umami Analytics aktivieren",
|
||||||
"umamiUrl": "Umami URL",
|
"umamiUrl": "Umami URL",
|
||||||
|
|||||||
@@ -1075,6 +1075,26 @@
|
|||||||
},
|
},
|
||||||
"analytics": {
|
"analytics": {
|
||||||
"title": "Analytics",
|
"title": "Analytics",
|
||||||
|
"providerHeading": "Analytics provider",
|
||||||
|
"providerDescription": "Pick which tracker to use for the public gallery, or paste your own script. The admin dashboard's device-breakdown chart only enriches when you pick Umami or Rybbit — those expose a metrics API. Other providers (Plausible, Matomo, GA4, …) work via the Custom mode below.",
|
||||||
|
"providerLabel": "Provider",
|
||||||
|
"provider": {
|
||||||
|
"none": "None",
|
||||||
|
"umami": "Umami",
|
||||||
|
"rybbit": "Rybbit",
|
||||||
|
"custom": "Custom (paste your own script)"
|
||||||
|
},
|
||||||
|
"providerNoneInfo": "No external tracker injected. The admin dashboard still shows summary cards + the daily chart from PicPeak's own access_logs; the device-breakdown chart uses a coarse user-agent heuristic.",
|
||||||
|
"rybbitUrl": "Rybbit URL",
|
||||||
|
"rybbitUrlHelp": "Your Rybbit instance URL — `https://app.rybbit.io` for the SaaS, or `https://rybbit.yourdomain.com` for self-hosted.",
|
||||||
|
"rybbitWebsiteId": "Site ID",
|
||||||
|
"rybbitWebsiteIdHelp": "Found in Rybbit → Sites → your site → Tracking script.",
|
||||||
|
"rybbitApiKey": "API key",
|
||||||
|
"rybbitApiKeyHelp": "Optional. Required only for the device-breakdown chart. Generate in Rybbit → Account → Settings → API Keys. Stored masked as •••••••• once saved.",
|
||||||
|
"customHeadHtml": "Custom <head> HTML",
|
||||||
|
"customHeadHtmlHelp": "Paste your tracker's `<head>` snippet (Plausible, Matomo, Pirsch, GA4, GoatCounter, Fathom, Cloudflare Web Analytics, …). Sanitised on save: only `<script>`, `<noscript>`, `<link rel=\"preconnect|dns-prefetch\">` and `<meta>` tags survive, and event-handler attributes are stripped. The admin dashboard's device-breakdown chart falls back to a server-side user-agent heuristic in this mode — pick Umami or Rybbit if you want the tracker-side numbers.",
|
||||||
|
"customCspWarning": "Content-Security-Policy reminder",
|
||||||
|
"customCspWarningText": "PicPeak ships with a strict CSP (`script-src 'self'`). If your tracker loads from another domain, add that domain to your reverse-proxy or nginx CSP config — otherwise the browser silently blocks the script.",
|
||||||
"umamiIntegration": "Umami Analytics Integration",
|
"umamiIntegration": "Umami Analytics Integration",
|
||||||
"enableUmami": "Enable Umami Analytics",
|
"enableUmami": "Enable Umami Analytics",
|
||||||
"umamiUrl": "Umami URL",
|
"umamiUrl": "Umami URL",
|
||||||
|
|||||||
@@ -1,14 +1,47 @@
|
|||||||
// Umami Analytics Service
|
// Pluggable analytics service (#663 Phase 1).
|
||||||
// Provides integration with Umami for tracking page views and events
|
//
|
||||||
|
// Routes initialization to the right tracker based on the operator's chosen
|
||||||
|
// provider in Settings → Analytics, and dispatches `track()` calls to the
|
||||||
|
// tracker's runtime API when one is loaded.
|
||||||
|
//
|
||||||
|
// None → no script, no-op tracking.
|
||||||
|
// Umami → inject Umami script tag; `window.umami.track(name, data)`.
|
||||||
|
// Rybbit → inject Rybbit script tag; `window.rybbit.event(name, data)`.
|
||||||
|
// Custom → render admin-pasted HTML (sanitised server-side) into <head>;
|
||||||
|
// no runtime API hook — `track()` becomes a no-op.
|
||||||
|
|
||||||
interface UmamiConfig {
|
export type TrackerProvider = 'none' | 'umami' | 'rybbit' | 'custom';
|
||||||
websiteId?: string;
|
|
||||||
hostUrl?: string;
|
interface BaseInitConfig {
|
||||||
|
provider: TrackerProvider;
|
||||||
autoTrack?: boolean;
|
autoTrack?: boolean;
|
||||||
doNotTrack?: boolean;
|
doNotTrack?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UmamiInitConfig extends BaseInitConfig {
|
||||||
|
provider: 'umami';
|
||||||
|
websiteId: string;
|
||||||
|
hostUrl: string;
|
||||||
domains?: string[];
|
domains?: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface RybbitInitConfig extends BaseInitConfig {
|
||||||
|
provider: 'rybbit';
|
||||||
|
websiteId: string;
|
||||||
|
hostUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CustomInitConfig extends BaseInitConfig {
|
||||||
|
provider: 'custom';
|
||||||
|
customHeadHtml: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NoneInitConfig extends BaseInitConfig {
|
||||||
|
provider: 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
type InitConfig = UmamiInitConfig | RybbitInitConfig | CustomInitConfig | NoneInitConfig;
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface Window {
|
interface Window {
|
||||||
umami?: {
|
umami?: {
|
||||||
@@ -21,74 +54,107 @@ declare global {
|
|||||||
websiteId?: string
|
websiteId?: string
|
||||||
) => void;
|
) => void;
|
||||||
};
|
};
|
||||||
|
rybbit?: {
|
||||||
|
event: (eventName: string, eventData?: any) => void;
|
||||||
|
pageview?: () => void;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class AnalyticsService {
|
class AnalyticsService {
|
||||||
private initialized = false;
|
private initialized = false;
|
||||||
|
private provider: TrackerProvider = 'none';
|
||||||
private websiteId: string | null = null;
|
private websiteId: string | null = null;
|
||||||
// private hostUrl: string | null = null;
|
|
||||||
|
|
||||||
initialize(config: UmamiConfig) {
|
initialize(config: InitConfig) {
|
||||||
if (this.initialized) return;
|
if (this.initialized) return;
|
||||||
|
if (config.provider === 'none') {
|
||||||
const { websiteId, hostUrl, autoTrack = true, doNotTrack = true } = config;
|
this.initialized = true;
|
||||||
|
this.provider = 'none';
|
||||||
if (!websiteId || !hostUrl) {
|
|
||||||
console.warn('Umami Analytics: Missing websiteId or hostUrl');
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.websiteId = websiteId;
|
if (config.provider === 'umami') {
|
||||||
// this.hostUrl = hostUrl;
|
if (!config.websiteId || !config.hostUrl) {
|
||||||
|
console.warn('Umami: missing websiteId or hostUrl');
|
||||||
// Create and inject Umami script
|
return;
|
||||||
const script = document.createElement('script');
|
}
|
||||||
script.async = true;
|
this.websiteId = config.websiteId;
|
||||||
script.defer = true;
|
const script = document.createElement('script');
|
||||||
script.src = `${hostUrl}/script.js`;
|
script.async = true;
|
||||||
script.setAttribute('data-website-id', websiteId);
|
script.defer = true;
|
||||||
|
script.src = `${config.hostUrl.replace(/\/+$/, '')}/script.js`;
|
||||||
if (!autoTrack) {
|
script.setAttribute('data-website-id', config.websiteId);
|
||||||
script.setAttribute('data-auto-track', 'false');
|
if (config.autoTrack === false) script.setAttribute('data-auto-track', 'false');
|
||||||
|
if (config.doNotTrack !== false) script.setAttribute('data-do-not-track', 'true');
|
||||||
|
if (config.domains?.length) script.setAttribute('data-domains', config.domains.join(','));
|
||||||
|
document.head.appendChild(script);
|
||||||
|
} else if (config.provider === 'rybbit') {
|
||||||
|
if (!config.websiteId || !config.hostUrl) {
|
||||||
|
console.warn('Rybbit: missing websiteId or hostUrl');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.websiteId = config.websiteId;
|
||||||
|
const script = document.createElement('script');
|
||||||
|
script.async = true;
|
||||||
|
script.defer = true;
|
||||||
|
script.src = `${config.hostUrl.replace(/\/+$/, '')}/api/script.js`;
|
||||||
|
script.setAttribute('data-site-id', config.websiteId);
|
||||||
|
document.head.appendChild(script);
|
||||||
|
} else if (config.provider === 'custom') {
|
||||||
|
// The admin-pasted HTML is sanitised server-side (see
|
||||||
|
// backend `customScriptSanitiser.js`). We render it via a wrapper
|
||||||
|
// <div> and move each child node into <head> so <script> tags
|
||||||
|
// execute. Using innerHTML on a <head> directly is also fine
|
||||||
|
// here — the child nodes get parsed and inserted in order.
|
||||||
|
const html = (config.customHeadHtml || '').trim();
|
||||||
|
if (html) {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
container.innerHTML = html;
|
||||||
|
// Re-create <script> elements so the browser actually evaluates
|
||||||
|
// them — assigning innerHTML to a parent inserts the nodes but
|
||||||
|
// doesn't trigger script execution per the HTML spec.
|
||||||
|
Array.from(container.childNodes).forEach((node) => {
|
||||||
|
if (node.nodeName === 'SCRIPT') {
|
||||||
|
const orig = node as HTMLScriptElement;
|
||||||
|
const fresh = document.createElement('script');
|
||||||
|
Array.from(orig.attributes).forEach((attr) => fresh.setAttribute(attr.name, attr.value));
|
||||||
|
if (orig.textContent) fresh.textContent = orig.textContent;
|
||||||
|
document.head.appendChild(fresh);
|
||||||
|
} else {
|
||||||
|
document.head.appendChild(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (doNotTrack) {
|
this.provider = config.provider;
|
||||||
script.setAttribute('data-do-not-track', 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (config.domains && config.domains.length > 0) {
|
|
||||||
script.setAttribute('data-domains', config.domains.join(','));
|
|
||||||
}
|
|
||||||
|
|
||||||
document.head.appendChild(script);
|
|
||||||
this.initialized = true;
|
this.initialized = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if analytics is initialized
|
|
||||||
isInitialized() {
|
isInitialized() {
|
||||||
return this.initialized;
|
return this.initialized;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Track custom events
|
// Track custom events. Dispatched to whichever tracker is loaded; custom
|
||||||
|
// mode no-ops (we don't know the operator's tracker's runtime API).
|
||||||
track(eventName: string, eventData?: Record<string, any>) {
|
track(eventName: string, eventData?: Record<string, any>) {
|
||||||
if (!this.initialized || !window.umami) {
|
if (!this.initialized) return;
|
||||||
// Silently ignore if not initialized
|
if (this.provider === 'umami' && typeof window !== 'undefined' && window.umami) {
|
||||||
return;
|
window.umami.track(eventName, eventData);
|
||||||
|
} else if (this.provider === 'rybbit' && typeof window !== 'undefined' && window.rybbit) {
|
||||||
|
window.rybbit.event(eventName, eventData);
|
||||||
}
|
}
|
||||||
|
// 'none' / 'custom' / unloaded → silently ignore.
|
||||||
// Umami expects flat event data
|
|
||||||
window.umami.track(eventName, eventData);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Track page views manually
|
|
||||||
trackPageView(url?: string, referrer?: string) {
|
trackPageView(url?: string, referrer?: string) {
|
||||||
if (!this.initialized || !window.umami) {
|
if (!this.initialized) return;
|
||||||
// Silently ignore if not initialized
|
if (this.provider === 'umami' && typeof window !== 'undefined' && window.umami) {
|
||||||
return;
|
window.umami.trackView(url, referrer, this.websiteId || undefined);
|
||||||
|
} else if (this.provider === 'rybbit' && typeof window !== 'undefined' && window.rybbit?.pageview) {
|
||||||
|
window.rybbit.pageview();
|
||||||
}
|
}
|
||||||
|
|
||||||
window.umami.trackView(url, referrer, this.websiteId || undefined);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Gallery-specific tracking events
|
// Gallery-specific tracking events
|
||||||
@@ -96,12 +162,10 @@ class AnalyticsService {
|
|||||||
this.track(`gallery_${eventType}`, data);
|
this.track(`gallery_${eventType}`, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Admin-specific tracking events
|
|
||||||
trackAdminEvent(eventType: 'login' | 'event_created' | 'event_archived' | 'event_deleted' | 'settings_updated', data?: any) {
|
trackAdminEvent(eventType: 'login' | 'event_created' | 'event_archived' | 'event_deleted' | 'settings_updated', data?: any) {
|
||||||
this.track(`admin_${eventType}`, data);
|
this.track(`admin_${eventType}`, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Track download events with more context
|
|
||||||
trackDownload(photoId: string | number, gallerySlug: string, isBulk: boolean = false) {
|
trackDownload(photoId: string | number, gallerySlug: string, isBulk: boolean = false) {
|
||||||
this.track('photo_download', {
|
this.track('photo_download', {
|
||||||
photo_id: photoId,
|
photo_id: photoId,
|
||||||
@@ -111,7 +175,6 @@ class AnalyticsService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Track expiration warning views
|
|
||||||
trackExpirationWarning(gallerySlug: string, daysRemaining: number) {
|
trackExpirationWarning(gallerySlug: string, daysRemaining: number) {
|
||||||
this.track('expiration_warning_viewed', {
|
this.track('expiration_warning_viewed', {
|
||||||
gallery: gallerySlug,
|
gallery: gallerySlug,
|
||||||
@@ -120,7 +183,6 @@ class AnalyticsService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Track search usage
|
|
||||||
trackSearch(query: string, resultsCount: number, context: 'gallery' | 'admin') {
|
trackSearch(query: string, resultsCount: number, context: 'gallery' | 'admin') {
|
||||||
this.track('search_performed', {
|
this.track('search_performed', {
|
||||||
query_length: query.length,
|
query_length: query.length,
|
||||||
|
|||||||
@@ -68,6 +68,14 @@ export interface PublicSettings {
|
|||||||
umami_url: string | null;
|
umami_url: string | null;
|
||||||
umami_website_id: string | null;
|
umami_website_id: string | null;
|
||||||
umami_share_url: string | null;
|
umami_share_url: string | null;
|
||||||
|
// Pluggable trackers (#663 Phase 1). The backend always surfaces these;
|
||||||
|
// missing fields fall back via the existing umami_* shape so older
|
||||||
|
// builds keep working.
|
||||||
|
analytics_tracker_provider?: 'none' | 'umami' | 'rybbit' | 'custom';
|
||||||
|
rybbit_url?: string | null;
|
||||||
|
rybbit_website_id?: string | null;
|
||||||
|
// Custom-mode HTML snippet, already sanitised server-side.
|
||||||
|
analytics_custom_head_html?: string;
|
||||||
// Upload settings
|
// Upload settings
|
||||||
allowed_file_types?: string;
|
allowed_file_types?: string;
|
||||||
// #613 — per-batch file count limit, surfaced so the guest UserPhotoUpload
|
// #613 — per-batch file count limit, surfaced so the guest UserPhotoUpload
|
||||||
|
|||||||
Reference in New Issue
Block a user