Finn brukernes favorittstilling 8

Jeg har undersøkt hva som er den vanligste måten å holde mobilen eller nettbrettet på når folk surfer. På forhånd hadde jeg to hypoteser:

Her kan du se hvordan sporingen fungerer:

Jeg har sjekket dette på to store norske nettsteder og vår egen webdagene.no. Alle de tre nettstedene er laget med responsiv design.

Hypotesene stemmer

Desktop og nettbrett er dominert av landskapsmodus, mens mobil er dominert av portrett.

Tallene er basert på antall sidevisninger som startet i landskaps- eller portrettmodus fordelt på type enhet. På desktop er det bredde x høyde på vinduet som avgjør.
Tallene er basert på antall sidevisninger som startet i landskaps- eller portrettmodus fordelt på type enhet. På desktop er det bredde x høyde på vinduet som avgjør.

Resultatene er basert på til sammen 660 000 sidevisninger fra de tre nettstedene.

Nettbrett-brukere med små skjermer er mer tilbøyelig til å bruke portrett enn de med store skjermer. Takk til Vidar Falkenberg som stilte spørsmålet i kommentarfeltet under, slik at jeg kunne lage denne grafen:

Nettbrett-brukere med lav oppløsning (små skjermer) bruker oftere portrettmodus enn dem med større skjermer.
Nettbrett-brukere med lav oppløsning (små skjermer) bruker oftere portrettmodus enn dem med større skjermer.

Etter hvert som oppløsningen på skjermen øker, blir det mer vanlig å ha nettbrettet i landskapsmodus.

Bytter sjelden stilling

Det er ikke så ofte at brukerne bytter stilling underveis i besøket.

Ganske få endrer fra portrett til landskap (eller motsatt).
Ganske få endrer fra portrett til landskap (eller motsatt).

Mobiltelefoner er vanligst å snu: i under 11% av besøkene har brukerne endret stilling én eller flere ganger. En teori kan være at brukerne oftere snur på mobiltelefonen uten at de egentlig mener det.

Konsekvenser for design

Etter min mening bør resultatene ha små konsekvenser for hvordan vi designer responsive nettsteder. Mangfoldet av enheter, skjermstørrelser og oppløsninger er så stort at det er umulig å si at én spesifikk oppløsning er mest vanlig.

Du må sørge for at nettsidene fungerer på de enhetene du har tilgjengelig, og teste i nettleseren hvordan de oppfører seg når skjermstørrelsen endrer seg. Du må også innse at du ikke kan bestemme hvordan nettsiden skal se ut ned til hver minste piksel. Vi har en devicelab som du kan låne gratis hvis du trenger flere enheter å teste på.

Sjekk ditt eget nettsted

Sporingen er implementert med Google Tag Manager og Google Analytics.

Sporingen baserer seg på Javascript-funksjonen window.matchMedia, som lar deg sjekke om ulike media queries er aktive eller ikke. I dette tilfellet sjekker vi om «orientation: portrait» eller «orientation: landscape» er aktiv.

Det er ikke mulig å bruke skjermoppløsning for å finne ut av hvilken vei brukeren holder enheten. Som regel er oppløsningen som rapporteres den samme uansett hvilken vei brukeren holder enheten. Jeg har bare kommet over ett Windows-nettbrett som bytter om på høyde/bredde når man snur på enheten.

Hvis du vil sette opp sporingen selv i Google Tag Manager, så trenger du dette oppsettet:

Tagger

Regler

Makroer

Tagg: Listener Device Orientation

Dette er taggen som sjekker hvilken vei brukeren holder enheten.

Javascript-kode som registrerer hvilken vei brukeren holder enheten, og som lytter etter endringer.
Javascript-kode som registrerer hvilken vei brukeren holder enheten, og som lytter etter endringer.

Klipp- og lim-vennlig Javascript-kode for denne taggen:


// Listeners
function portraitListener (mediaQueryList) {
	if (mediaQueryList.matches) {
		orientationEvent ('Change', 'Portrait');
	}
}
function landscapeListener (mediaQueryList) {
	if (mediaQueryList.matches) {
		orientationEvent ('Change', 'Landscape');
	}
}

// Function for pushing orientation events to the data layer
function orientationEvent (eventAction, eventLabel) {
	dataLayer.push({'event': 'orientation',
    				'eventAction': eventAction,
        			'eventLabel': eventLabel});
}

// Check if window.matchMedia is supported. Browser support: http://caniuse.com/#feat=matchmedia
if (typeof window.matchMedia != "undefined") {
	portraitOrientationCheck = window.matchMedia("(orientation: portrait)");
	landscapeOrientationCheck = window.matchMedia("(orientation: landscape)");

	// Add listeners
	portraitOrientationCheck.addListener(portraitListener);
	landscapeOrientationCheck.addListener(landscapeListener);
	
	// Log initial portrait/landscape mode
	if (portraitOrientationCheck.matches) {
		orientationEvent ('Initial', 'Portrait');	
	}
	else if (landscapeOrientationCheck.matches) {
		orientationEvent ('Initial', 'Landscape');	
	}
}
else {
	orientationEvent ('Initial', 'Unknown (window.matchMedia not supported)');	
}

Tagg: UA Event – Device Orientation

I denne taggen skjer selve sporingen i Google Analytics.

Oppsett av sporingen som events i Google Analytics
Oppsett av sporingen som events i Google Analytics

eventAction vil være «Initial» eller «Change», alt etter om det er stillingen ved innlasting av siden eller endringer etter at siden er lastet som skal spores.

eventLabel vil være «Portrait» eller «Landscape», alt etter hvilken vei enheten holdes.

Regel: Event – Device Orientation

Denne regelen bestemmer når sporingen i Google Analytics skal skje.

Regelen bestemmer når sporingen skal skje, altså på datalayer-eventen «orientation»
Regelen bestemmer når sporingen skal skje, altså på datalayer-eventen «orientation»

Makro: eventAction

Makro som henter verdien av eventAction-variabelen fra datalayeret
Makro som henter verdien av eventAction-variabelen fra datalayeret

eventAction vil være «Initial» eller «Change», alt etter om det er stillingen ved innlasting av siden eller endringer etter at siden er lastet som skal spores.

Makro: eventLabel

Makro som henter verdien av eventLabel-variabelen fra datalayeret
Makro som henter verdien av eventLabel-variabelen fra datalayeret

eventLabel vil være «Portrait» eller «Landscape», alt etter hvilken vei enheten holdes.

Rapporter

Her er to rapporter du kan importere til Google Analytics-kontoen din etter at du har satt opp sporingen:

Audun Rundberg

Flere artikler av Audun CV

8 kommentarer

  1. Kult, takk for at du deler?
    Har du også sett på skjermstørrelse for nettbrett? Jeg vil tro at det er forskjell på små og store brett, og at det er høyere andel portrett på 7”.

  2. Supert spørsmål, Vidar! Du har helt rett. Nettbrett med lav oppløsning er dominert av portrett, og etter hvert som oppløsningen øker blir det mer vanlig å ha landskap. Jeg har laget en graf og puttet inn i bloggposten.

    Analytics inneholder ikke skjermstørrelsen på dingsene i tommer, men om man vil vite om Samsung Galaxy Tab er en portrett- eller landskapsdings, så er det lett å finne ut av.

  3. Artig forskning! Vi skulle til å kjøre ut tilsvarende script på en av våre større kunder da det har vært en del snakk internt om hva som er “korrekt” og som fungerte best. Jeg mente det var en SELVFØLGE å surfe stående på et nettbrett, men da spesielt på de store nettavisene og finn.no. Men jeg fikk masse motstand av «de liggende» som nå storkoser seg når de kan vise til tall. Ja ja, slaget er ikke tapt ennå og «vi stående» fortsetter arbeidet med få folk til å endre til det bedre ;)

  4. Takk for tilbakemelding. Beklager at jeg har snudd, om ikke opp ned, så i alle fall 90 grader, på din virkelighetsforståelse. :-)

  5. Interessant! Har selv hatt de samme hypotesene, men kult å få det bekreftet. Så du noen forskjell på de ulike nettstedene, eller var resultatene stort sett det samme? Tipper ellers at den ene prosenten som bruker stående på desktop må være utviklere eller de med små barn som av en eller annen mystisk grunn alltid klarer å treffe hurtigtasten for å endre skjermretning (hvorfor finnes egentlig den?) når de små klåfingrene treffer tastaturet.

  6. Det var helt likt på alle tre. De to nettstedene jeg sjekket utenom webdagene.no retter seg mot allmenheten, ikke noe teknologi-orientert publikum, men de er likevel i forskjellig bransje.

    Desktop-nettlesere rapporterer stående retning når vinduet er høyere enn det er bredt. Tror stående på desktop kanskje er vanligere hvis du har skikkelig svær skjerm (som jo utviklere gjerne har), sånn at du har nettleseren litt smalere enn vanlig for å få plass til flere vinduer. Har en teori om at det kanskje er vanligere på Mac, der “maksimer”-knappen forsøker å tilpasse til innholdet mer enn å fylle hele skjermen, i alle fall noen ganger.

  7. Hei,
    Takk for flott eksempel og detaljert informasjon. Har forsøkt å følge denne planen til punkt og prikke og har gått gjennom 2 ganger for å være sikker på at vi har satt det opp riktig. Har også laget ny versjon og publisert container et par ganger for å være helt sikker. Men det måles ingenting. Det dukker ikke opp som event. Vi må ha gjort noe galt et sted? Eller er det noe som av en eller annen grunn mangler i oppsettet her?

  8. Hei Erik, jeg har dobbelsjekket i kontoene jeg har satt dette opp, og de tracker fremdeles med samme oppsett som her. Har du mulighet til å maile meg skjermdumper av oppsettet på audun@netliferesearch.com? Så kan jeg ta en titt.

Skriv en kommentar

  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>