Nå, men hvor mange brugere sidder egentlig på retina skærme? Vi ved at nye smartphones og tables har retina skærme som er super fede at læse på, men desværre får grafikker til at se forfærdelige ud, medmindre de er optimeret til skærme med 2x opløsning. Men hvad med desktop? Hvor udbredt er det, udover de nyeste Macbook Pro? Lad os finde ud af det med Google Tag Manager.
Hent værdien af devicePixelRatio som variabel
Alle nyere browser har en global property på window objektet, som vi nemt kan snuppe med JavaScript i Tag Manager.
Værdien af devicePixelRatio angiver forholdet mellem fysiske pixels og CSS pixels som normalt er 1 for desktop skærme og ældre smartphones og 2 for nyere retina skærme som er dobbelt så mange CSS pixels på den samme fysiske plads. Du vil få det samme resultat hvis du zoomer 200% i din browser.
Værdien hentes ved at lave en JavaScript variabel som henter værdien af devicePixelRatio.
Derefter laves en custom dimension, som sættes til user scope, da værdien typisk ikke ændrer sig for den samme browser cookie.
Det normale Pageview Tag udvides så den sender værdien af devicePixelRatio til GA på alle pageviews.
Med de nye data kan vi bygge en Custom Report, som viser fordelingen og dermed kan vi analysere om desktop sitet også bør optimeres til retina skærme (det skal det nok).
Den bedste måde at optimere til retina på
Det er at bruge srcset til at angive de forskellige størrelser af billedet. Sådan her:
<img src="picture-1x.jpg"
srcset="picture-2x.jpg 2x,
picture-1x.jpg 1x"
sizes="100%"
alt="">
På den måde kan browsere selv vælge at hente det store retina optimerede billede, hvis skærmen er 2x men den kan også vælge at hente det almindelige billede, hvis den er på en langsom 3G forbindelse. Skide smart!
