Navigation überspringen

Webanalytics: »Dark Mode«-Nutzung mit Matomo messen

24.10.2019·Kommentare:  0Retweets:  0 1

2019 ist das Jahr des »Dark Mode«, dessen Unterstützung heuer auch in alle Browser Einzug gehalten hat. Wer, wie ich, Aufwand in die Erstellung eines eigenen dunklen Themes gesteckt hat oder das in Erwägung zieht, möchte natürlich wissen, wie viele Nutzer den »Dark Mode« in ihrem OS tatsächlich aktiviert haben.

Egal, welche Lösung man für Webanalytics verwendet, sollte diese das Tracking der »Dark Mode«-Nutzung nicht von Haus aus unterstützen, so kann man sich meistens mit so genannten Custom Variables bzw. Dimensions (sollte meistens ähnlich heißen) behelfen.

Damit lässt sich nämlich mit der JavaScript-Funktion window.matchMedia pro Request bzw. Visit auch mitspeichern, ob der Client den »Dark Mode« präferiert. Abfragen kann man das bevorzugte Farbschema wie folgt:

if ( window.matchMedia("(prefers-color-scheme:dark)").matches) {
colorScheme="dark";
} else {
colorScheme="light";
}

Mit dieser Information lässt sich dann, wie in meinem Fall mit Matomo, das Farbschema wie folgt vor dem Aufruf von _paq.push([‚trackPageView‘]); messen:

_paq.push(['setCustomVariable', 1,
"prefers-color-scheme", colorScheme, "visit"]);

Hierbei handelt es sich natürlich nur um ein rudimentäres Code-Beispiel, das sich erweitern lässt. Interessant ist z.B. auch, welche Browser window.matchMedia überhaupt unterstützen und welche statt »light« oder »dark« den »mysteriösen« Wert »no-preference« zurückliefern.

Sinnvoll ist meiner Meinung nach zudem noch ein Variable, welche die Kombination mit der Plattform bzw. dem Betriebsystem übergibt:

if ( navigator.appVersion.indexOf("iPhone")!=-1 ) {
platform="iPhone";
}

»platform« kann man dann komibiniert mit »colorScheme« in einer weiteren Custom Variable übergeben.

Die Werte findet man dann im Menüpunkt Besucher → Benutzerdefinierte Variablen.


Neueste Artikel

Schlagwörter

· · · ·


Teilen & Favorisieren

Twitter (0 & 1) · Facebook (0 & 0)

Kommentieren

Am liebsten hier, gerne aber auch auf Twitter und Facebook. Ich freue mich über jeden Kommentar (Guidelines) & antworte immer (meist < 24h), HTML erlaubt.