Låt Matomo spåra dina användares darkmode-preferenser (genom custom dimension)

Har du koll på om dina användare föredrar ett ljust eller mörkt läge i sin mobil eller dator? Om du är intresserad att få koll på detta går det att fånga upp via ditt webbanalys-verktyg. Här följer en guide hur du kan göra detta i Matomo.

Uppdatering 2022-10-27: Läsanvisning
Se nedan exempel om darkmode som enbart just ett exempel på vad man kan spåra med en custom dimension. Det är inte en rekommendation att välja just custom dimension, både för att det kan finnas bättre alternativ i din IT-miljö och att man ska vara varsam med vilka saker som kvalificerar sig för att spåras med just en custom dimension. Välj inte en custom ifall en eller flera av följande punkter känns beskrivande:

Ett fåtal finner dimensionen användbar till något agerbart i ert webbanalysarbete.
Dimensionens nyttighet har en begränsad livslängd i ert arbete.
Dimensionen besvarar en i sammanhanget obetydlig frågeställning.
Det finns andra system eller metoder som kan fånga samma signal vilket kan ge mindre långsiktiga konsekvenser. Ett sådant exempel är om det går att använda Matomos händelsespårning lika gärna eller skriva värdet till någon logg från ditt webbsystem.

En långtida bekant i webbranschen hörde av sig i somras och frågade hur man kunde låta Matomo fånga upp om besökare på en webbplats har valt darkmode, lightmode eller ingetdera i sitt operativsystem. Det värkte i bakhuvudet på mig i ett knappt dygn innan jag kände mig tvungen att testa själv. Och ja, det går att fånga upp detta.

Till inspiration plockade jag lite Javascript från en artikel om hur man gör samma sak i Google Analytics (GA) / Google Tag Manager (GTM). Om du kör GA eller GTM och vill göra detta kan du antingen kolla i bloggpostens avslutande länkar eller helt sonika skriva om de tre kodraderna i mitten som börjar med _paq.push till vad ditt verktyg behöver.

Du som var med i Whitespace-webbinariet i förra veckan känner igen detta då jag tog darkmode / lightmode som ett av flera exempel på UX-fråga man kan besvara med egeninsamlade data. Man kan också använda dessa egeninsamlade data för att skapa knivskarpa segment i Matomo.

Videoklippet från webbinariet är inte släppt när den här bloggposten publiceras, men fyll i dina uppgifter i detta formulär så får du ett mejl när inspelningen är publicerad.

Vad är det här med darkmode / lightmode?

Man kan se det som ett designtema i din tekniska pryl. Att man kan ha som preferens att ha en ljus eller mörk bas i den här lysande skärmen de flesta av oss stirrar in i timmar varje dag. Fördomen om oss utvecklare är att vi jublar så fort något släpps där vi kan välja att växla till ett mörkt designläge. Åtminstone jag och många med mig lever upp till den fördomen.

Men att det enbart handlar om en personlig preferens är inte den fulla sanningen. De av oss som designat tillgängliga webbplatser har genom åren byggt anpassningar av design där användarna av tillgänglighetsskäl kunnat välja mörk eller ljus bakgrundsfärg på webbplatsen. Man kan säga att det fanns den förvalda designen och för de som har svårt att läsa erbjöds att invertera – att skifta från ljus till mörk, och vice versa.

Byt automatiskt: Ljust på dagen, mörkt på kvällen…

Jag personligen använder ofta Apples produkter och de har valmöjligheten att man under dagtid har ljust läge och att prylen växlar till mörkt läge automatiskt senare på dagen. Med andra ord kan preferensernas variera för en och samma användare på samma pryl.

Ha det i åtanke när du läser igenom nedan lösningsförslag; när på dygnet dyker dessa besökare upp? Exempelvis om ett nyhetsbrev är väldigt drivande av trafik så spelar det roll när den trafiken kommer. Som alltid behöver man jobba lite med analysen innan man börjar dra slutsatser och en av de första grejerna jag tar upp under webbanalys-kurserna jag håller är att man behöver ha lite koll på förutsättningarna för alla dessa data man samlar in.

Inte en perfekt metod…

Jag fick dock inte till att alla besökares preferenser samlas in och har inte listat ut varför. Kommer uppdatera bloggposten när jag vet. Kanske att du som läsare har tips på något jag behöver ändra? Hör gärna av dig i så fall.

Det är cirka en fjärdedel av vad Matomo räknar som unika användare som inte syns i min custom dimension, så lägg detta till felmarginalen om du nu skulle ta beslut baserat på nedan metod.

Förberedelser i Matomo

Om du vill testa detta själv är det en Custom Dimension du behöver skapa i Matomos admin-gränssnitt. Du behöver ha skriv- eller admin-behörighet i webbplatsegendomen för att få lov.

Inne i Matomo gör du så här:

Klickar du på kugghjulet uppe till höger.
Klicka på “Webbsidor”, välj “Anpassade dimensioner”
Se till att rätt webbplats är vald uppe till vänster.
Under rubriken “Besök dimensions” klickar du på knappen “Konfigurera en ny dimension”
Välj ett namn på din dimension, gör den aktiv och klicka på “Create”

Nu kommer du få reda på vilket ID-nummer din dimension har, vilket du använder i nedanstående kod.

Var kommer jag hitta min darkmode-rapport i Matomo

När allt är igång kommer dina data att visas upp i det ordinarie Matomo-gränssnittet under menyvalen “Besökare”. Där under kommer namnet du valde på din dimension att visas. Bara att klicka på den.

Rapporten kommer även ha den inbyggda funktionaliteten du vanligen hittar i Matomo, exempelvis som den varianten nedan där jag kan se konverteringsfrekvens på webbplatsens mål uppdelat efter ljust eller mörk preferens.

Och ja, du kan lägga till detta som en schysst visualisering direkt på din instrumentpanel så det är det första du ser när du loggar in i Matomo. Det är praktiskt för frågeställningar du för en tid återkommer ofta till. Se nedan bild.

Kod för att logga darkmode i Matomo

Nedan har du den kod jag utvärderade här på Webperf.se, jag lämnar inga garantier att den är särskilt bra, dock verkar den spåra information. Jag är ingen som någonsin skrivit Javascript professionellt utan bara råkar kunna få till det för att jag har erfarenhet av liknande språk.

Koden är alltså en inline-variant av spårning. Det går också att använda Matomos Tag Manager för detta men principen är densamma.

Kolla på koden i mitten av blocket, det som börjar med kommentaren /* test av darkmode-preferenser */ och avslutas några rader senare. I nedan kod ser du en tvåa och det är alltså den siffra / identitet du fick tidigare när du skapade din custom dimension. Värdet mellan apostrofer efter är den textsträng du i respektive scenario vill skicka in till Matomo. Mer förklaring av koden kommer efter kodblocket.

<!-- Matomo -->
    <script type="text/javascript">
        var _paq = _paq || [];
        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
        _paq.push(["setCookieDomain", "*.webperf.se"]);


        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);


        /* test av darkmode-preferenser */
        (function () {
        _paq.push(['setCustomDimension', 2, 'No preference']);


        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            _paq.push(['setCustomDimension', 2, 'Darkmode']);
        }
        else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
            _paq.push(['setCustomDimension', 2, 'Lightmode']);
        }
        })();
        /* slut på test av darkmode-preferenser */


        (function() {
            var u = "//stats.tba.nu/";
            _paq.push(['setTrackerUrl', u + 'piwik.php']);
            _paq.push(['setSiteId', '8']);
            var d = document,
                g = d.createElement('script'),
                s = d.getElementsByTagName('script')[0];
            g.type = 'text/javascript';
            g.async = true;
            g.defer = true;
            g.src = u + 'piwik.js';
            s.parentNode.insertBefore(g, s);
        })();
    </script>
    <noscript><p><img src="//stats.tba.nu/piwik.php?idsite=8&rec=1" style="border:0;" alt="" /></p></noscript>
    <!-- End Matomo Code -->

Vad gör koden?

Den frågar webbläsaren om den har några inställda preferenser om ljust eller mörkt läge. Först utgår koden från att inga sådana inställningar existerar och kollar sedan först om mörkt eller ljust läge finns och ändrar sig därefter.

_paq.push(['setCustomDimension', 2, 'Darkmode']); innebär att du preparerar ett paket till Matomo. Du anger att du vill stoppa in ett värde i en Custom Dimension, närmare bestämt den med ID-numret 2. Om du inte sedan tidigare har någon custom dimension fick du säkert siffran 1 istället. Det som står sist, ’Darkmode’, är den textsträng vi skickar in till Matomo, det som beskriver vad vi vill spara undan. Det kunde i ett annat scenario varit ’chef' eller 'inte chef’ om vi loggade användarnas roll på ett intranät. Det är samma princip men då hade vi fått hämta fram den egeninsamlade datan från ett verksamhetssystem och pushat det via intranätets gränssnittskod.

Skapa användarsegment i Matomo för mörkt vs ljust läge

Japp, när du väl har denna data inne i Matomo kan du skapa segment och inspektera respektive användargrupp var för sig. Eller som i nedan bild jämföra dem mot varandra. Att jämföra dem kan i just det här fallet ge ledtrådar om frågeställningen om ljust läge dominerar dagtid och mörkt kvällstid. Det ser inte ut som att skillnaden mellan de brandgula staplarna (ljust läge) och blå staplar (mörkt läge) varierar enormt under dygnets timmar. Men visst, mörkt läge har nog några tiondelar fler besökare av totalen på kvällen, åtminstone i den jämförelsen från november.

Custom dimension som datainsamling för att skapa segment. Segment som kan jämföras i webbanalysen.

Nästa steg?

Låt användarnas darkmode-preferens styra om din webbplats är mörk eller ljus. Lästips:

How to make a dark theme for your blog that adjusts for your visitors (Grant Winney)

Dark mode in 5 minutes, with inverted lightness variables (Lea Verou)

Eller latmaskens variant på darkmode i CSS, föreslagen av David Walsh:

html {
  filter: invert(1);
}

…och sen då?

Ovanstående exempel om vad användarens preferenser är faller in under kategorin vilka data vi kan fiska fram från användarens webbläsare. En bra tjänst för att kolla vilka saker man kan fråga en webbläsare om (och hur utbrett stödet för den tekniken är) finner du i Can I use… Support tables for HTML5, CSS3, etc