Im Wartungs-Abo enthalten. Zu Verträge
'
+ else action = `
${svg(icon)}Kommt bald
@@ -109,9 +144,10 @@ export async function initFunktionen(root) {
${newsTile(projects)}
${soonTile('calendar', 'Terminplaner', 'Deine Kundschaft bucht Termine direkt über deine Website.')}
- ${soonTile('chart', 'Analyse', 'Sieh, wie viele Besucher deine Website hat und was sie sich ansehen.')}
+ ${analyseTile(projects)}
`
- root.querySelector('.fn-tile-cta')?.addEventListener('click', (ev) => { selection.projectId = ev.currentTarget.dataset.project })
+ root.querySelector('[data-fn-tile="news"] .fn-tile-cta')?.addEventListener('click', (ev) => { selection.projectId = ev.currentTarget.dataset.project })
+ root.querySelector('[data-fn-tile="analyse"] .fn-tile-cta')?.addEventListener('click', (ev) => { analyseSel.projectId = ev.currentTarget.dataset.project })
}
/* ---------------------------------------------------------------- News --- */
@@ -505,3 +541,231 @@ function renderEditor(stage, project) {
sync()
return loadList()
}
+
+/* -------------------------------------------------------------- Analyse --- */
+const analyseSel = { projectId: '', range: 30 }
+const PRESET_COLORS = ['#111111', '#1d4ed8', '#047857', '#b91c1c', '#7c3aed', '#c2410c']
+const HEX_RE = /^#[0-9a-f]{6}$/i
+const nf = new Intl.NumberFormat('de-DE')
+const KPI_NOTE = '* Besucher, Verweildauer und Klicks zählen nur Besucher, die zugestimmt haben. Seitenaufrufe sind vollständig.'
+
+export async function initAnalyse(root, { projectId } = {}) {
+ if (!root) return
+ if (projectId) analyseSel.projectId = projectId
+ const { projects = [] } = await request('/api/funktionen')
+ const usable = projects.filter((p) => !analyseOf(p).comingSoon)
+ if (!usable.length) {
+ root.innerHTML = 'Die Analyse ist für deine Websites noch nicht freigeschaltet.
'
+ return
+ }
+ const project = usable.find((p) => p.projectId === analyseSel.projectId) || pickAnalyseProject(usable)
+ analyseSel.projectId = project.projectId
+ root.innerHTML = `
+ ${usable.length > 1 ? `
+
+ Website
+ ${usable.map((p) => `${esc(p.projectName)} `).join('')}
+
` : ''}
+
`
+ root.querySelector('#an-project')?.addEventListener('change', (ev) => {
+ analyseSel.projectId = ev.target.value
+ initAnalyse(root).catch((err) => { root.innerHTML = `${esc(err.message)}
` })
+ })
+ const stage = root.querySelector('#an-stage')
+ const a = analyseOf(project)
+ const reload = () => initAnalyse(root).catch((err) => { root.innerHTML = `${esc(err.message)}
` })
+ if (a.state === 'active') renderAnalyseStats(stage, project, reload)
+ else if (a.state === 'disabled') stage.innerHTML = 'Analyse ist abgeschaltet Für diese Website ist die Analyse im Moment gesperrt. Schreib uns im Chat , dann klären wir das.
Analyse nicht verfügbar ${esc(a.reasonText || 'Für diese Website gerade nicht verfügbar.')}${a.reason === 'kein_abo' ? ' Zu Verträge ' : ''}
+
Wir möchten mit deiner Zustimmung anonym auswerten, wie unsere Website genutzt wird (keine Cookies, keine Weitergabe). Details: Datenschutz
+
Ablehnen Annehmen
+
+
Analyse für ${esc(project.projectName)} einschalten
+
Du siehst, wie oft deine Website aufgerufen wird, woher die Besucher kommen und was sie sich ansehen. Wir speichern keine IP-Adressen und setzen keine Cookies . Alles läuft auf einem eigenen Server in Deutschland.
+
+ Ohne Zustimmung zählen wir nur, wie oft eine Seite aufgerufen wird – anonym, ohne Wiedererkennung.
+ Mit Zustimmung kommen Besucher, Verweildauer, Klicks und Heatmaps dazu.
+ Auf deiner Website erscheint dafür ein Hinweis-Banner mit „Ablehnen“ und „Annehmen“.
+
+
Farbe des Banners
+
+
+
${PRESET_COLORS.map((c) => `
+
+
Diese Farbe ist für weiße Schrift zu hell. Der Banner nutzt dann Schwarz (#111111).
+
+
Ich beauftrage WEBklar mit der Verarbeitung der Analysedaten gemäß Auftragsverarbeitungsvertrag (Fassung ${esc(a.avvVersion)}). AVV lesen
+
+
Analyse einschalten
+
Noch keine Daten.
'
+ const total = m.points.reduce((sum, p) => sum + p.pv, 0)
+ const first = m.points[0].day
+ const last = m.points[m.points.length - 1].day
+ return `
+
+ Seitenaufrufe pro Tag vom ${esc(first)} bis ${esc(last)}, insgesamt ${esc(nf.format(total))}
+ ${m.yTicks.map((t) => `${esc(t.label)} `).join('')}
+ ${m.xLabels.map((l) => `${esc(l.label)} `).join('')}
+ ${esc(p.day)}: ${esc(nf.format(p.pv))} `
+}
+
+function barList(title, items, labelOf, { html = false } = {}) {
+ const rows = barRows(items, labelOf)
+ return `
+
+ ${esc(title)}
+ ${rows.length ? `` : 'Noch keine Daten.
'}
+ `
+}
+
+const COUNTRY_ROW = (key) => `${flagEmoji(key) ? `${flagEmoji(key)} ` : ''}${esc(countryName(key))}`
+
+async function renderAnalyseStats(stage, project, reload) {
+ const range = [7, 30, 90].includes(analyseSel.range) ? analyseSel.range : 30
+ const pid = project.projectId
+ stage.innerHTML = `
+ ${[7, 30, 90].map((r) => `${r} Tage `).join('')}
+
+
+
+ Länderdaten: IP-Geolocation by DB-IP
`
+ stage.querySelectorAll('.an-tab').forEach((b) => b.addEventListener('click', () => { analyseSel.range = Number(b.dataset.range); renderAnalyseStats(stage, project, reload) }))
+ renderAnalyseOff(stage.querySelector('#an-off'), pid, reload)
+
+ const data = stage.querySelector('#an-data')
+ let stats
+ try {
+ stats = await request(`/api/funktionen/analyse/stats?projectId=${encodeURIComponent(pid)}&range=${range}`)
+ } catch (err) {
+ if (!stage.isConnected) return
+ data.innerHTML = `${esc(err.status === 503 ? 'Auswertung gerade nicht erreichbar' : err.message)}
`
+ return
+ }
+ if (!stage.isConnected) return
+ const t = stats.totals || {}
+ const rate = Math.round((Number(t.consentRate) || 0) * 100)
+ const kpi = (label, value) => `${label} ${esc(value)}
`
+ const b = stats.banner || {}
+ data.innerHTML = `
+ ${kpi('Seitenaufrufe', nf.format(t.pv || 0))}${kpi('Besucher*', nf.format(t.visitors || 0))}${kpi('Kontakt-Klicks*', nf.format(t.contacts || 0))}${kpi('Zustimmung', `${rate} %`)}
+ Seitenaufrufe pro Tag ${lineChart(stats.series)}
+ ${barList('Meistbesuchte Seiten', stats.pages, (k) => k || '/')}
+ ${barList('Herkunft', stats.refs, refLabel)}
+ ${barList('Länder', stats.countries, COUNTRY_ROW, { html: true })}
+ ${barList('Geräte', stats.devices, (k) => DEVICE_LABELS[k] || 'Unbekannt')}
+ ${barList('Kontakt-Klicks', stats.contacts, (k) => CONTACT_LABELS[k] || k)}
+ ${barList('Banner', [{ key: 'shown', count: b.shown }, { key: 'accept', count: b.accept }, { key: 'reject', count: b.reject }], (k) => ({ shown: 'Angezeigt', accept: 'Angenommen', reject: 'Abgelehnt' }[k]))}
+
+ ${esc(KPI_NOTE)}
`
+ renderAnalyseHeat(stage.querySelector('#an-heat'), pid, stats.pages || [])
+}
+
+function renderAnalyseHeat(box, projectId, pages) {
+ if (!box) return
+ if (!pages.length) {
+ box.innerHTML = 'Heatmap Sobald Besucher zugestimmt haben und Seiten aufgerufen wurden, kannst du hier sehen, wo geklickt und gescrollt wird.
'
+ return
+ }
+ box.innerHTML = `
+ Heatmap
+ Sieh auf deiner Website, wo Besucher klicken und wie weit sie scrollen.
+
+ Seite${pages.map((p) => `${esc(p.key || '/')} `).join('')}
+ Gerät${Object.entries(DEVICE_LABELS).map(([k, v]) => `${v} `).join('')}
+
+
+ Auf meiner Website ansehen
`
+ const go = box.querySelector('#an-heat-go')
+ const error = box.querySelector('#an-heat-error')
+ go.addEventListener('click', async () => {
+ go.disabled = true
+ error.classList.add('hidden')
+ try {
+ const { url } = await request('/api/funktionen/analyse/heatmap-link', { method: 'POST', body: { projectId, path: box.querySelector('#an-heat-page').value || '/', vp: box.querySelector('#an-heat-vp').value } })
+ if (safeUrl(url)) window.open(url, '_blank', 'noopener')
+ } catch (err) {
+ error.textContent = err.status === 503 ? 'Auswertung gerade nicht erreichbar' : err.message
+ error.classList.remove('hidden')
+ } finally {
+ go.disabled = false
+ }
+ })
+}
+
+// Ausschalten mit Bestaetigung in der Seite (zweiter Klick), ohne Browser-Dialog
+function renderAnalyseOff(box, projectId, reload) {
+ box.innerHTML = `
+ Analyse ausschalten
+ Danach werden keine neuen Daten mehr gesammelt und der Banner verschwindet von deiner Website. Die bisherigen Daten bleiben noch 60 Tage erhalten.
+
+ Analyse ausschalten
`
+ const actions = box.querySelector('#an-off-actions')
+ const error = box.querySelector('#an-off-error')
+ box.querySelector('#an-off-ask').addEventListener('click', () => {
+ actions.innerHTML = 'Wirklich ausschalten? Ja, ausschalten Abbrechen '
+ actions.querySelector('#an-off-no').addEventListener('click', () => renderAnalyseOff(box, projectId, reload))
+ actions.querySelector('#an-off-yes').addEventListener('click', async (ev) => {
+ ev.currentTarget.disabled = true
+ try {
+ await request('/api/funktionen/analyse/deactivate', { method: 'POST', body: { projectId } })
+ reload()
+ } catch (err) {
+ renderAnalyseOff(box, projectId, reload)
+ const e2 = box.querySelector('#an-off-error')
+ e2.textContent = err.message
+ e2.classList.remove('hidden')
+ }
+ })
+ })
+}
diff --git a/test/analyseView.test.js b/test/analyseView.test.js
new file mode 100644
index 0000000..c1d70c6
--- /dev/null
+++ b/test/analyseView.test.js
@@ -0,0 +1,59 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { contrastOk } from '../analytics/client/core.js'
+import { bannerColor, chartModel, countryName, flagEmoji, niceMax, shortDay, barRows, refLabel } from '../public/analyse-view.js'
+
+test('contrast und bannerColor stimmen mit core.js ueberein', () => {
+ for (const c of ['#000000', '#ffffff', '#1d4ed8', '#047857', '#b91c1c', '#7c3aed', '#c2410c', '#ffcc00', '#9d3dfe', 'x', '#12']) {
+ const { contrastOk: portal } = { contrastOk: bannerColor(c) !== '#111111' || c.toLowerCase() === '#111111' }
+ assert.equal(portal, contrastOk(c) || c.toLowerCase() === '#111111', c)
+ }
+ assert.equal(bannerColor('#ffcc00'), '#111111')
+ assert.equal(bannerColor('#1D4ED8'), '#1d4ed8')
+ assert.equal(bannerColor('nonsense'), '#111111')
+})
+
+test('Land und Flagge', () => {
+ assert.equal(countryName('DE'), 'Deutschland')
+ assert.equal(countryName(''), 'Unbekannt')
+ assert.equal(flagEmoji('de'), '🇩🇪')
+ assert.equal(flagEmoji(''), '')
+ assert.equal(flagEmoji(''), '')
+ assert.equal(refLabel(''), 'Direkt')
+})
+
+test('Diagramm-Skalierung', () => {
+ assert.equal(niceMax(0), 1)
+ assert.equal(niceMax(7), 10)
+ assert.equal(niceMax(130), 200)
+ assert.equal(shortDay('2026-10-01'), '01.10.')
+ const series = Array.from({ length: 30 }, (_, i) => ({ day: `2026-09-${String(i + 1).padStart(2, '0')}`, pv: i }))
+ const m = chartModel(series)
+ assert.equal(m.points.length, 30)
+ assert.equal(m.top, 50)
+ assert.ok(m.points[0].x < m.points[29].x)
+ assert.ok(m.points.every((p) => p.x >= m.pad.l && p.x <= m.width - m.pad.r && p.y >= m.pad.t && p.y <= m.height - m.pad.b))
+ assert.ok(m.xLabels.length <= 7 && m.xLabels.length >= 2)
+ assert.equal(chartModel([]).points.length, 0)
+ assert.equal(chartModel([{ day: '2026-10-01', pv: 3 }]).points.length, 1)
+})
+
+test('Balkenzeilen', () => {
+ assert.deepEqual(barRows([{ key: 'a', count: 4 }, { key: 'b', count: 2 }], (k) => k.toUpperCase()), [
+ { key: 'a', label: 'A', count: 4, pct: 100 },
+ { key: 'b', label: 'B', count: 2, pct: 50 },
+ ])
+ assert.deepEqual(barRows(undefined, String), [])
+})
+
+test('Portal: Analyse-Ansicht ist verdrahtet', () => {
+ const app = readFileSync(new URL('../public/app.js', import.meta.url), 'utf8')
+ const html = readFileSync(new URL('../public/dashboard.html', import.meta.url), 'utf8')
+ assert.match(app, /analyse: 'analyse'/)
+ assert.match(app, /APP_PARENT = \{ news: 'funktionen', analyse: 'funktionen'/)
+ assert.match(html, /id="view-analyse"/)
+ assert.match(html, /id="analyse-body"/)
+ const fn = readFileSync(new URL('../public/funktionen.js', import.meta.url), 'utf8')
+ assert.doesNotMatch(fn.slice(fn.indexOf('Analyse ---')), /\bconfirm\(/)
+})