Was Klick-Tracking auf Websites erfasst und welche Klicks verloren gehen

Was ist Klick-Tracking auf einer Website?

Auf einer Website ist Klick-Tracking die Praxis, festzuhalten, welches Element ein Besucher auf welcher Seite zu welchem Zeitpunkt angeklickt hat, und diesen Datensatz an ein Analytics-Tool zu senden, damit sich Klicks zählen, vergleichen und Conversions zuordnen lassen. Ein kleines Skript lauscht auf das click-Event des Browsers, liest aus, was angeklickt wurde, und sendet eine kurze Nutzlast an einen Erfassungs-Endpunkt. Tracken Sie zuerst Klicks auf die Elemente, die darüber entscheiden, ob ein Besucher konvertiert, etwa den Anmeldebutton, den Preisumschalter und den Checkout-Link, bevor Sie irgendetwas anderes tracken.

Klick-Tracking ist die Datengrundlage unter mehreren Berichten, die unterschiedlich aussehen. Ein Ziel zählt Klicks auf einen Button. Eine Heatmap malt Klicks nach Position. Ein Funnel-Schritt kann ein Klick sein. Die gewählte Methode entscheidet, welche dieser Berichte die Daten speisen können.

Was zählt ein Browser als Klick?

Ein Browser löst ein click-Event aus, wenn eine Zeigertaste innerhalb desselben Elements gedrückt und losgelassen wird, wenn eine Touch-Geste darauf landet oder wenn ein Tastaturnutzer es aktiviert, ein einziger Listener deckt also Maus, Touch und Tastatur ab. Die Referenz von MDN hält fest: "click fires after both the mousedown and mouseup events have fired, in that order," und nennt "a touch gesture" sowie "pressing the Space key or Enter key while the element is focused" als Entsprechungen.

Die Tastaturregel hat einen Haken, der das Tracking auf eigenen Bedienelementen bricht. MDN merkt an, dass die Gleichwertigkeit von Enter und Leertaste "only applies to elements with a default key event handler, and therefore, excludes other elements that have been made focusable by setting the tabindex attribute." Ein als Button gestaltetes <div tabindex="0"> erhält über die Tastatur kein click, Tastaturnutzer verschwinden also aus seiner Klickzahl. Verwenden Sie für alles, was Sie tracken wollen, einen echten <button> oder ein <a>.

Das Event zählt auch Wiederholungen. MDN sagt, die Eigenschaft detail enthält "the number of times the target was clicked", sie steht also bei einem Doppelklick auf 2 und bei einem Dreifachklick auf 3. Dieser Zähler ist das Rohmaterial für die Erkennung von Rage Clicks.

Welche drei Wege gibt es, Klicks zu tracken?

Die drei Methoden sind ein benanntes Event auf ausgewählten Elementen, ein delegierter Listener, der jeden Klick auf der Seite erfasst, und die Erfassung von Koordinaten, die speichert, wo auf dem Bildschirm jeder Klick gelandet ist. Jede beantwortet eine andere Frage und scheitert auf eine andere Weise.

Benannte Events sind die Methode hinter dem Event-Tracking, bei dem der Event-Name die Aktion trägt und Eigenschaften die Details. Den delegierten Listener nennen Anbieter Autocapture. Die Koordinatenerfassung speist die Website-Heatmap, die Positionen aus vielen Besuchen zu einem Bild zusammenfasst. Eine praktische Aufteilung sind benannte Events für die Handvoll Klicks, die zählen, und Session Replay für den Rest.

Was sollte ein Klick-Event erfassen?

Ein Klick-Event sollte die stabile Kennung des Elements, die Seite, auf der es passiert ist, bei Links das Ziel und einen Zeitstempel erfassen, und nichts, was der Besucher eingetippt hat. Diese vier Felder beantworten "was, wo, wohin und wann", ohne etwas Persönliches zu speichern.

Lassen Sie den Linktext auf Seiten weg, die Kontodaten anzeigen, und lesen Sie niemals Werte aus benachbarten Formularfeldern aus, denn ein Button, der mit dem Namen eines Kunden beschriftet ist, sendet diesen Namen mit jedem Klick. Ein eigenes Attribut data-track ist die sicherste Kennung, denn es ändert sich nur, wenn jemand es absichtlich ändert.

Der folgende Listener nutzt einen einzigen Handler für das ganze Dokument, filtert auf Elemente mit data-track und sendet mit navigator.sendBeacon():

document.addEventListener(
  'click',
  (event) => {
    const el = event.target.closest('[data-track]');
    if (!el) return;
    navigator.sendBeacon(
      '/collect',
      JSON.stringify({
        name: el.dataset.track,
        path: location.pathname,
        href: el.getAttribute('href'),
        clicks: event.detail,
        ts: Date.now(),
      }),
    );
  },
  { capture: true },
);

Die Option capture: true führt den Handler auf dem Weg nach unten durch das DOM aus, vor jedem Handler am Button selbst. Eine Komponente, die in ihrem eigenen Klick-Handler event.stopPropagation() aufruft, kann den Klick dann nicht vor dem Tracker verstecken.

Warum erreichen manche getrackten Klicks nie den Bericht?

Klicks gehen verloren, wenn die Seite entladen wird, bevor die Anfrage gesendet ist, wenn ein Blocker die Anfrage verwirft oder wenn das angeklickte Element nie auf den Listener gepasst hat. Links tragen das zusätzliche Risiko der ersten Ursache, denn der Klick, der eine Navigation startet, ist auch der Klick, der die sendende Seite abbaut.

MDN beschreibt das Problem direkt: "the browser may be about to unload the page, and in that case the browser may choose not to send asynchronous XMLHttpRequest requests." Die Antwort ist navigator.sendBeacon(), das "asynchronously sends an HTTP POST request containing a small amount of data to a web server" und für genau diesen Fall gebaut ist. Der Vergleich sendBeacon vs. fetch keepalive behandelt die Größenlimits und wann fetch mit keepalive: true besser passt.

Gehen Sie die Ursachen in dieser Reihenfolge durch, wenn die Zahlen niedrig wirken:

1. Vergleichen Sie mit einer bekannten Gesamtzahl. Klicks auf einen Checkout-Button können die Aufrufe der Checkout-Seite nicht übersteigen. Ein Verhältnis weit unter der Erwartung deutet auf Verlust hin, nicht auf geringes Interesse.
2. Testen Sie den Link-Fall. Klicken Sie das Element bei geöffnetem Netzwerk-Panel und aktiviertem "Preserve log" an. Eine Anfrage, die als abgebrochen erscheint, ist das Entlade-Problem.
3. Testen Sie die Tastatur. Springen Sie mit Tab zum Element und drücken Sie Enter. Kein Event bedeutet ein fokussierbares div statt eines Buttons.
4. Testen Sie mit aktivem Blocker. Eine Anfrage, die unter einem Content-Blocker verschwindet, fehlt für diesen Anteil der Besucher in jedem Bericht.
5. Prüfen Sie den Selektor. Eine Definition, die auf einen Klassennamen geschrieben ist, passt nach einem Redesign nicht mehr, und die Zahl fällt ohne Fehlermeldung auf null.

Wie trackt GA4 Klicks ohne zusätzlichen Code?

GA4 trackt über Enhanced Measurement automatisch zwei Arten von Linkklicks, ausgehende Klicks und Datei-Downloads, und es trackt keine Klicks auf Buttons, die auf Ihrer eigenen Domain bleiben. Googles Hilfe sagt, das Event click feuert "each time a user clicks a link that leads away from the current domain and to another website" und erfasst "link_classes, link_domain, link_id, link_url, outbound (boolean)." Das Event file_download feuert "when a user clicks a link leading to a file (with a common file extension)."

Alles andere, einschließlich Anmeldebutton und Preisumschalter, braucht ein eigenes Event. Die Leitfäden dazu, wie Sie ausgehende Links tracken und Datei-Downloads erfassen, behandeln die beiden automatischen Fälle im Detail.

Was verraten Klickmuster über kaputte Seiten?

Wiederholte Klicks auf ein Element und Klicks ohne Reaktion sind die beiden Muster, die auf eine kaputte Seite hindeuten statt auf geringes Interesse. Ein Rage Click ist eine Salve von Klicks auf dasselbe Element, und ein Dead Click ist ein Klick, nach dem sich auf der Seite nichts ändert. Beide sehen in einer reinen Klickzahl wie Engagement aus, und deshalb überschätzt ein Klickbericht ohne Sitzungskontext, wie gut eine Seite funktioniert. Der Leitfaden Rage Clicks vs. Dead Clicks listet die Schwellenwerte auf, die die einzelnen Anbieter veröffentlichen.

Flowsery deckt beide Hälften der Aufgabe ab. Custom Events tracken jede Interaktion über einen Aufruf der JavaScript-API, darunter Buttonklicks, Formularübermittlungen und Datei-Downloads, und das Goal-Tracking macht aus diesen Events Conversion-Raten, wie die Seite zum Goal- und Event-Tracking zeigt. Session Recording spielt Cursorbewegungen, Klicks, Scrollen und Formulareingaben ab, und Flowserys KI markiert Rage Clicks, Dead Clicks und JavaScript-Fehler in jeder aufgezeichneten Sitzung und gruppiert sie zu Issues, sortiert danach, wie viele Sitzungen sie betroffen haben. Das Tracking läuft ohne Cookies und ohne Consent-Banner.

Häufig gestellte Fragen

Was ist der Unterschied zwischen Klick-Tracking und einer Heatmap?

Klick-Tracking ist das Sammeln von Klickdatensätzen, und eine Heatmap ist eine Art, sie darzustellen. Eine Klick-Map fasst die x- und y-Positionen vieler Klicks zu einem farbigen Overlay auf einem Bild der Seite zusammen. Benannte Klick-Events tragen gar keine Position und speisen stattdessen Ziele und Funnels.

Zählt Klick-Tracking auch Taps auf dem Smartphone?

Ja. Eine Touch-Geste auf einem Element löst dasselbe click-Event aus wie Drücken und Loslassen einer Maustaste, ein Listener zählt also beides. Mobile Klicks brauchen eine eigene Heatmap-Ansicht, weil sich die Koordinaten mit dem schmaleren Layout verschieben.

Warum werden meine Klicks auf ausgehende Links zu niedrig gezählt?

Die Seite beginnt zu entladen, sobald der Besucher dem Link folgt, und der Browser kann während des Entladens eine gewöhnliche Anfrage verwerfen. Wenn Sie das Event mit navigator.sendBeacon() oder fetch mit keepalive: true senden, überlebt die Anfrage die Seite. Content-Blocker entfernen einen weiteren Anteil, den keine Sendemethode zurückholt.

Sollte ich jeden Klick tracken oder nur die wichtigen?

Tracken Sie die Klicks, die an eine Conversion gebunden sind, als benannte Events und überlassen Sie den Rest Session Replay oder einer Heatmap. Benannte Events auf jedem Element erzeugen ein Schema, das niemand pflegt. Ein delegierter Listener auf allem erzeugt Masse mit Selektoren, die beim nächsten Redesign brechen.

Erfasst Klick-Tracking personenbezogene Daten?

Ein Klickdatensatz enthält eine Elementkennung, einen Seitenpfad und einen Zeitstempel, und nichts davon identifiziert eine Person. Personenbezogene Daten kommen hinzu, wenn die Nutzlast Linktexte oder Formularwerte enthält, die Details eines Kunden zeigen, oder wenn Klicks mit einer dauerhaften Kennung verknüpft werden. Senden Sie einen festen Wert data-track statt sichtbaren Texts, damit der Datensatz anonym bleibt.

Kann GA4 Buttonklicks automatisch tracken?

Nein. Enhanced Measurement in GA4 erfasst Klicks auf Links, die Ihre Domain verlassen, und auf Links zu gängigen Dateitypen. Ein Button, der auf Ihrer eigenen Website bleibt, braucht ein eigenes Event, das Sie mit eigenem Code oder über einen Tag Manager senden.

Warum registriert ein <div tabindex="0"> keine Klicks über die Tastatur?

Die Tastatur-Entsprechung für Enter und Leertaste gilt laut MDN nur für Elemente mit einem eigenen Standard-Tastaturhandler, wozu Elemente, die nur über tabindex fokussierbar gemacht wurden, nicht zählen. Ein <div tabindex="0">, das wie ein Button gestylt ist, feuert kein Klick-Event, wenn ein Tastaturnutzer Enter oder die Leertaste drückt, sodass diese Nutzer aus der Klickzählung verschwinden. Verwenden Sie für alles, was getrackt werden soll, einen echten <button> oder <a>.

Was misst die detail-Eigenschaft des Klick-Events?

Die detail-Eigenschaft enthält, wie oft das Ziel angeklickt wurde, also steht dort 2 bei einem Doppelklick und 3 bei einem Dreifachklick. Dieser Zähler ist die Rohdaten-Grundlage für die Rage-Click-Erkennung. Ein benanntes Event, das detail mitloggt, kann wiederholte Klicks auf ein Element ohne zusätzlichen Listener markieren.

Was unterscheidet einen Rage-Click von einem Dead-Click?

Ein Rage-Click ist eine Serie von Klicks auf dasselbe Element, ein Dead-Click ist ein Klick, nach dem sich nichts auf der Seite ändert. Beide sehen in einer reinen Klickzahl wie Interaktion aus, weshalb ein Klickbericht ohne Session-Kontext eine kaputte Seite als beliebte Seite lesen kann.

Was bewirkt die Option capture: true bei einem Klick-Listener?

Sie lässt den Tracking-Handler auf dem Weg nach unten durch das DOM laufen, bevor irgendein Klick-Handler am Element selbst ausgeführt wird. Eine Komponente, die in ihrem eigenen Handler event.stopPropagation() aufruft, wird trotzdem erfasst, weil der Tracker bereits vorher gelaufen ist.