Heatmap – Entwurf

Alle Seiten von Experiment 3 nutzen dasselbe Skript common/heatmap.js. Es hält fest, wie Besucherinnen und Besucher mit den Inseraten umgehen. Diese Seite zeigt, was erfasst wird, lässt es ausprobieren und wertet exportierte Daten aus.

Die gemeinsamen Dateien (common/) werden geladen …

1. Was wird erfasst?

Automatisch, auf jeder Seite

Klicks: die Stelle auf der Seite und im angeklickten Element (zum Beispiel einem Inserat).
Mauszeit: wie lange der Mauszeiger auf einem Inserat liegt (ab 0,25 s, nur mit Maus).
Sichtzeit: wie lange ein Inserat mindestens zur Hälfte im Bild ist (ab 0,25 s, auch auf dem Handy).
Scrolltiefe: wie weit jemand nach unten gescrollt hat.

Von der Seite gemeldet

Spielereignisse wie Antworten («echt» oder «fake»), die Selbsteinschätzung vor dem Karten-Quiz, das Ergebnis am Schluss, Klicks auf Knöpfe wie «Ich will EthiCart testen».

Nicht erfasst: Namen, IP-Adressen, Browser-Kennung, Text, der in ein Feld getippt wird (zum Beispiel in die Suche).

Wohin gehen die Daten?

Wird geladen …

Heatmap auf jeder Seite anzeigen

Hinten an die Adresse der Seite ?hm=1 anhängen oder auf der Seite Shift + H drücken (nicht in einem Eingabefeld). Unten rechts erscheint eine Leiste mit Datenquelle, Import, Export und «Lokale Daten löschen»; Esc oder «Schliessen» blendet sie aus.

2. Ausprobieren

Klicke auf die Inserate, fahre mit der Maus darüber, markiere eines. Dann die Heatmap einblenden: Blau zeigt die Klicks (je dunkler, desto mehr), der orange Rahmen die Sicht- und Mauszeit, das Etikett die Zahlen.

Diese Sitzung: noch keine Ereignisse.

Alle Inserate sind erfunden. Ob ein Inserat echt oder gefälscht ist, wird hier nicht verraten.

3. Auswertung

Klicks in diesem Abschnitt werden nicht aufgezeichnet.

So kommen Daten von einer anderen Seite hierher

Die Seite (zum Beispiel das Karten-Quiz) mit ?hm=1 öffnen.
In der Leiste «Alle Sitzungen in diesem Browser» wählen und «Exportieren» drücken.
Die heruntergeladene Datei hier unten importieren. Mehrere Dateien auf einmal sind möglich; dieselbe Sitzung zählt nur einmal, auch wenn sie in mehreren Dateien steckt.

Ein Export enthält nur die Besuche, die in diesem einen Browser gemacht wurden (höchstens die letzten 30 pro Seite). Die Daten fremder Besucherinnen und Besucher bleiben in deren Browser, solange in heatmap.js kein SINK eingestellt ist.

JSON-Exporte importieren

oder Dateien hierher ziehen. Auch CSV (zum Beispiel aus Google Forms) geht, wenn eine Spalte die Sitzungsdaten enthält. Die Dateien bleiben in diesem Fenster und werden nicht gespeichert.

Nur zum Anschauen

Erzeugt 60 erfundene Sitzungen, damit man sieht, wie die Diagramme aussehen. Sie werden nicht gespeichert und nie mit echten oder importierten Daten gemischt.

Datenquelle Dieser Browser Importiert Testdaten (erfunden)

Seite

4. Datenformat

Ein Export ist eine JSON-Datei. Eine Sitzung ist ein Seitenaufruf. Zeiten in Millisekunden, Positionen als Anteil von 0 bis 1 (drei Nachkommastellen). t ist die Zeit seit Beginn der Sitzung. Beispiel (Werte erfunden):

{
  "format": "ethicart-heatmap", "v": 1, "exportedAt": "2026-11-14T15:00:00.000Z",
  "sessions": [{
    "v": 1, "id": "3f9a0c5be21d47a8c09e6f12", "page": "colin-3", "variant": null,
    "startedAt": "2026-11-14T14:00:00Z", "vw": 400, "vh": 850, "device": "mobile",
    "events": [
      { "t": 1520, "type": "view",  "el": "card-l03", "ms": 2300 },
      { "t": 1800, "type": "click", "x": 0.412, "y": 0.233, "el": "card-l03", "ex": 0.5, "ey": 0.25 },
      { "t": 4200, "type": "custom", "name": "answer",
        "data": { "listing": "l03", "guess": "fake", "correct": true, "ms": 4200 } },
      { "t": 9000, "type": "scroll", "depth": 0.65 }
    ]
  }]
}

Felder einer Sitzung und der Ereignisse
Typ	Felder	Bedeutung
Sitzung	`id page variant startedAt vw vh device events`	zufällige ID, Seite, Variante (oder null), Beginn (auf die Stunde abgerundet), Fenstergrösse (auf 50 px gerundet), `mobile` unter 768 px Breite, sonst `desktop`; `dropped` = nicht mehr aufgezeichnete Ereignisse (Obergrenze 3000)
`click`	`x y el ex ey kb`	Stelle auf der ganzen Seite (`x y`) und im nächsten `[data-hm]`-Element (`el`, `ex ey`); `kb: 1` = per Tastatur ausgelöst, dann Mitte des Elements
`dwell`	`el ms`	Mauszeit auf einem Element, ab 250 ms; `t` = Ende
`view`	`el ms`	Zeit, in der das Element mindestens zur Hälfte sichtbar war, ab 250 ms; `t` = Ende
`scroll`	`depth`	grösste bisher erreichte Scrolltiefe
`custom`	`name data`	Ereignis der Seite, z. B. `answer`, `game_end`, `cta_click`, `signup` (Liste in `common/common.md`)