Wie man die Nutzung des Dark Mode mit dem Google Tag Manager trackt

Dark Mode für alles ist heutzutage der letzte Schrei, und wenn du keine schwach beleuchtete Version deiner Website oder App anbietest, bist du out. Anscheinend. Obwohl ich Dark Mode auf meinem Handy benutze (wo es erheblich Strom sparen und damit die Akkulaufzeit verbessern kann), denke ich, dass die meisten anderen Verwendungen der Matrix-Regen-Code-Bildschirmschoner unserer Zeit sind und die aktive Unterstützung davon eine Verschwendung von Entwicklungsressourcen ist.

Wenn du diese Behauptung ebenfalls unterstützen oder widerlegen möchtest, erfährst du hier, wie du die Nutzung des Dark Mode auf deiner Website mit dem Google Tag Manager und Google Analytics als benutzerdefinierte Dimension tracken kannst:

Erstelle eine Google Tag Manager-Variable

Mit der matchMedia-Schnittstelle des window-Objekts können wir die prefers-color-scheme-Media-Feature abfragen, um zu erkennen, ob der Benutzer das System mit einem hellen oder dunklen Farbschema konfiguriert hat.

Diese benutzerdefinierte JavaScript-Variable gibt dark zurück, wenn der Dark Mode aktiv ist, und light, wenn er es nicht ist.

…javascript function(){ return (window.matchMedia && window.matchMedia(’(prefers-color-scheme: dark)’).matches) ? “dark” : “light” } …

Füge dies in den GTM wie folgt ein:

Google Analytics-Konfiguration aktualisieren

Stelle zunächst sicher, dass du eine freie benutzerdefinierte Dimension in Google Analytics hast und notiere dir den Index der Variable, die du verwenden möchtest (rot markiert):

Wenn du dir nicht sicher bist, welchen Scope du wählen sollst, verwende “Hit”.

Bearbeite nun im Google Tag Manager dein Google Analytics-Tag oder deine Google Analytics-Einstellung, um den Wert dark oder light in deine Tracking-Anfrage zu integrieren:

Super, das war’s, du kannst nun deinen GTM-Container veröffentlichen! Wenn du sofort überprüfen möchtest, ob deine Implementierung erfolgreich war, prüfe deine Google Analytics-Anfrage, um den benutzerdefinierten Dimensionsparameter zu sehen:

Tracke den Wechsel zwischen Dark / Light Mode

Wenn du wirklich alles mitnehmen willst, kannst du auch Änderungen am bevorzugten Farbschema tracken und ein Ereignis in die dataLayer pushen, falls der Benutzer seine Einstellungen aktualisiert:

…javascript window.matchMedia(’(prefers-color-scheme: dark)’).addEventListener(‘change’, e => { var newColorScheme = e.matches ? “dark” : “light”; window.dataLayer = window.dataLayer || [] window.dataLayer.push({ event: “colorScheme”, newColorScheme: newColorScheme }) }); …

Da dies jedoch fast nie vorkommt, ist es ziemlich sinnlos.

Wie viele deiner Benutzer verwenden den Dark Mode?