Sean Kim
Projektliste

Projektarchiv 05 · Data Engineering · Webverhaltensanalyse

Neugestaltung der Architektur von VODA, einem Dienst zur Analyse des Webverhaltens

Klick- und Scroll-Erfassung → SQS-Nachrichtenverarbeitung → Speicherung in Elasticsearch → periodische Aggregation → Heatmaps und Diagramme

PythonSeleniumDockerElasticsearchMySQLAWS SQS

Vorab berechnete Aggregationen beseitigten die Zeitüberschreitungen der Analyseansichten

VODA ist ein Analysedienst, der Seitenaufrufe, Klicks und Scrollbewegungen von Website-Besuchern sammelt und als Traffic-Diagramme und Heatmaps darstellt. Als immer mehr Websites ihn nutzten, stieß die bestehende Architektur an ihre Grenzen, und ein vierköpfiges TFT entwarf sie neu. Ich war für Ereigniserfassung, Nachrichtenverarbeitung, Aggregation und Seitenerfassung zuständig.

  • 5 FälleSelbst gelöste Probleme bei Erfassung und Aggregation
  • 4Von mir entwickelte Komponenten
  • 4 PersonenMitglieder des TFT für die Architektur-Neugestaltung
Bewegungs-Heatmap-Ansicht

Zeigt, wo die Maus der Besucher lange verweilte, über der Seite. Koordinatenerfassung und Aggregation liefern die Daten für diese Ansicht. Der Screenshot stammt aus dem Vorstellungsmaterial des Dienstes; der Firmenname wurde unkenntlich gemacht.

Übersetzte Referenz · Koreanisches Original ansehen
Zugewiesene Rolle
Ich habe die Erfassung der Klickkoordinaten korrigiert und die Verarbeitung entwickelt, die SQS-Nachrichten in Elasticsearch-Dokumente umwandelt, außerdem einen Aufbereiter, der Aggregationen vorab erstellt, und einen Crawler, der ganze Seiten erfasst.
Ergebnisse
Ich habe Klickkoordinaten korrigiert, die von Gerät zu Gerät abwichen, und verhindert, dass Nachrichten verloren gingen oder doppelt ankamen. Die Analyseansichten lesen jetzt vom Aufbereiter vorbereitete Ergebnisse, statt jedes Mal in Elasticsearch zu aggregieren; damit waren die Zeitüberschreitungen behoben.
  1. 1KoordinatenerfassungErfasst Koordinaten relativ zum obersten Element unter der Maus
  2. 2NachrichtenverarbeitungWandelt SQS-Nachrichten in das Elasticsearch-Dokumentformat um
  3. 3DatenaufbereiterAggregiert regelmäßig und speichert in RDS-Tabellen
  4. 4Seiten-CrawlerErfasst ganze Seiten, auch bei Full-Page-Scrolling

Alte und neue Architektur

Vorher

  1. Web AgentErfasst Seitenaufrufe, Klicks und Scrollbewegungen der Besucher

  2. voda-serverEin einziger Server speicherte die Daten in MySQL und übernahm auch Aufbereitung und Antworten an die Ansichten

  3. AnalyseansichtenTraffic-Diagramme und Heatmaps

NachherVon mir entwickelt

  1. Erfassung

    • Web AgentErfasst Seitenaufrufe, Klicks und Scrollbewegungen der BesucherKoordinatenerfassung verbessert
    • API Gateway, SQSHält Maus- und Scroll-Ereignisse in einer Warteschlange
    • pv-recorder, mouse-recorderSpeichert Nachrichten als Elasticsearch-DokumenteNachrichtenaufbereitung, parallele Erfassung, Duplikatentfernung
    • page-crawlerErfasst Seitenbilder und ElementpositionenErfassung ganzer Seiten

  2. Speicher

    • ElasticsearchEreignisprotokolle und Aggregationen
    • MySQLKundenkonten, Seitendaten, Berichte

  3. Aufbereitung

    • Aggregations-AufbereiterAggregiert Maus- und Scrolldaten regelmäßigAufbereiter aufgebaut
    • forecastPrognostiziert Besuchsverläufe

  4. Visualisierung

    • presenterAPI, die die Analyseansichten mit Daten versorgtLiefert Aggregationsergebnisse
    • voda-analyticsAnalyseansichten für Administratoren

Von dieser Technologie erwartete Änderungen

Erfassung ohne verlorene Ereignisse

Weil der Sammler auf mehrere Container verteilt ist, werden Nachrichten rechtzeitig aus der Warteschlange geholt, und eine doppelt eintreffende Nachricht wird nur einmal gespeichert.

Heatmaps, die auf jedem Gerät stimmen

Koordinaten werden relativ zu Webelementen erfasst, sodass Klicks auf dieselbe Schaltfläche unabhängig von der Bildschirmgröße an derselben Stelle landen.

Analyseansichten ohne Wartezeit

Aufwendige Aggregationen werden vorab erledigt, sodass Administratoren Diagramme und Heatmaps ohne Zeitüberschreitung sehen.

Problem und Lösung

  1. ProblemKlicks wurden als absolute Seitenkoordinaten gespeichert, sodass dieselbe Schaltfläche je nach Bildschirmgröße an unterschiedlichen Positionen landete.

    Gelöst.Ich habe das oberste Webelement unter der Maus ermittelt und die Koordinaten innerhalb dieses Elements gespeichert.

  2. ProblemWeil bei jedem Öffnen einer Analyseansicht mit Elasticsearch Aggregation aggregiert wurde, kamen die Antworten so spät, dass Zeitüberschreitungen auftraten.

    Gelöst.Ich habe einen neuen Aufbereiter gebaut, der regelmäßig aggregiert und in RDS-Tabellen speichert, sodass die Ansichten nur noch fertige Ergebnisse lesen.

  3. ProblemBei dem auf Behördenseiten verbreiteten abschnittsweisen Full-Page-Scrolling erfasste ein normaler Screenshot nur den ersten Abschnitt.

    Gelöst.Statt der Selenium-API habe ich Anfragen direkt an Chrome gesendet, die Aufnahmehöhe auf die gesamte Scrolllänge erweitert und im Mobilmodus erfasst.

  4. ProblemWurden SQS-Nachrichten eine Minute lang nicht abgeholt, überschritt die Warteschlange ihr Limit und Daten gingen verloren.

    Gelöst.Über eine asynchrone Task-Queue habe ich die Erfassungsbefehle auf mehrere Docker-Container verteilt, sodass Nachrichten parallel abgeholt werden.

  5. ProblemMit dem parallelen Abholen kam dieselbe Nachricht teils zweimal an, und Logs wurden doppelt gespeichert.

    Gelöst.Ich habe die Dokument-ID aus Nachrichtenzeit und Benutzer-ID gebildet, sodass eine wiederholte Nachricht den vorhandenen Eintrag überschreibt.

Ansichten des Analysedienstes

Ansicht der Nutzerzahlanalyse

Zeigt Besuchsverläufe nach Uhrzeit und Wochentag samt Prognosewerten. Der Screenshot stammt aus dem Vorstellungsmaterial des Dienstes; der Firmenname wurde unkenntlich gemacht.

Übersetzte Referenz · Koreanisches Original ansehen