Sådan sporer du forskellige iPhone-modeller i Google Analytics

8. juni, 2017. Skrevet i: Dataindsamling
Tags: Tilpasning, Google Analytics, Google Tag Manager

Sidst opdateret 20. november 2018: iPhone XR og XS Max er nu også understøttet.

Denne artikel antager, at du er fortrolig med javascript. Det anbefales, at du tester grundigt på eget miljø. Eller, at du får en udvikler til at assistere.

Jeg har været grænseløst irriteret over Apple nærmest siden iPhone 4 kom på gaden. iPhones er nemlig notorisk usynlige i Google Analytics. Eller rettere, det er nemt nok at se, at brugerne bruger iPhones - bare ikke hvilke.

For at gøre en lang historie kort, så har Apple-enheder det med blot at identificere dem selv som iOS-enheder. De fortæller dog intet mere specifikt end det. Det eneste, de faktisk fortæller Google Analytics, er “Hej, jeg er en iPhone”. Selvom de burde sige noget i stil med “Hej, jeg er en iPhone 8”. Men det fixer vi da bare!

Hvordan Google Analytics overhovedet identificerer mobiltelefoner

Det er som regel nemt nok at identficere en mobil enhed - herunder både mærke og model. Browsere på alle enheder inkluderer nemlig altid en såkaldt User Agent. Det er i grunden en information, der fortæller lidt af hvert om browseren, versionen og ganske ofte også enheden.

For eksempel er dette den User Agent, som en Samsung Galaxy S7 bruger:

Mozilla/5.0 (Linux; Android 6.0.1; SAMSUNG SM-G930F/XXS1APG3 Build/MMB29K) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/4.0 Chrome/44.0.2403.133 Mobile Safari/537.36

Næsten skjult i det stykke kode ligger informationen om, at vi har med en Samsyng SM-G930F at gøre. Det er tilfældigvis Samsungs modelnavn for denne Galaxy S7. Det er den information (og andet ganske vist), som Google Analytics bruger til at vise faktiske modelnavne for mobiltelefoner.

Problemet er så, at User Agents fra Apple-enheder ikke indeholder nogle modelinformationer overhovet. De indeholder udelukkende information om styresystemets version og browserens version. Det kan hverken vi eller Google Analytics bruge til noget.

Men sådan spores iPhone-modeller i Google Analytics

Jeg går ud fra, at du er interesseret i en rapport som vist herunder. Mest fordi du allerede er godt inde i denne artikel.

Identificer og spor iPhone-modeller i Google Analytics]

Som du nok kan se, så er dette faktisk helt muligt. Der er det ene aberdabei, at fx iPhone 6, iPhone 6S og iPhone 7 står på samme række. Det kan vi desværre ikke gøre mere præcist. Men det er trods alt noget bedre end hvis der bare stod “iPhone”.

Hvordan identificerer man overhovedet en iPhone?

Man skal faktisk kun bruge nogle ganske få ingredienser for at nå i mål:

En Custom Dimension i Google Analytics, hvor modelnavnet skal gemmes
Et javascript (gemt som en variabel i Google Tag Manager)
En justering til dit Pageview tag (eller Google Analytics Settings variable i GTM)

Det meste af trylleriet sker i javascriptet. Det handler om at læse nogle af de informationer, som - i kombination med hinanden - adskiller forskellige iPhones fra hinanden.

For det første henter vi (pixel)bredden og (pixel)højden på den pågældende skærm. Og for det andet henter vi den såkaldte Device Pixel Ratio. Den går vi ikke i dybden med, men det er bl.a. den Apple justerer på for at lave Retina-opløsninger.

De informationer sammenligner vi så bare med alle de ting, vi allerede ved om forskellige iPhone-modeller. Og baseret på det, ved vi rimelig præcist, hvilken iPhone en given bruger har i hånden.

#1 En Custom Dimension

Det første skridt er også det nemmeste. Med mindre du har brugt alle dine custom dimensions. Så kan jeg ikke hjælpe. Men i Google Analytics skal du:

Gå til Admin
Klik på Custom Definitions i Property-kolonnen
Vælg Custom Dimension
Klik på +New Custom Dimension
Indtast et navn på dimensionen (“iPhone Model” virker oplagt)
Indstil Scope til Session
Klik på Create og notér det index-nummber, dimensionen har fået

Super. Og så til javascriptet:

#2 Konfigurer en GTM-variabel

Opret en ny variable i GTM af typen “Custom Javascript” og navngiv det fx “iPhone Model”. Og kopier og indsæt så nedenstående kodestykke:

function() {

	// Check if we are seeing an iPhone at all by looking at the user agent
    if(/iPhone/.test(navigator.userAgent) && !window.MSStream) {

		// Get details about the current device
        var currentDeviceInfo = JSON.stringify({
            'width' : (window.screen.width > window.screen.height) ? window.screen.height : window.screen.width,
            'height': (window.screen.width > window.screen.height) ? window.screen.width : window.screen.height,
            'ratio' : window.devicePixelRatio
        });

		// This is our "database" of possible device configurations
        var database = {
            '2G/3G/3GS': {
                'width' : 320,
                'height': 480,
                'ratio' : 1
            },
            '4/4S': {
                'width' : 320,
                'height': 480,
                'ratio' : 2
            },
            '5/5S/5C/SE': {
                'width' : 320,
                'height': 568,
                'ratio' : 2
            },
            '6/6S/7/8': {
                'width' : 375,
                'height': 667,
                'ratio' : 2
            },
            '6+/6S+/7+/8+': {
                'width' : 414,
                'height': 736,
                'ratio' : 3
            },
            'X/XS': {
                'width' : 375,
                'height': 812,
                'ratio' : 3
            },
            'XR': {
                'width' : 414,
                'height': 896,
                'ratio' : 2
            },
            'XS Max': {
                'width' : 414,
                'height': 896,
                'ratio' : 3
            }
        };

		// Loop through our database and compare configurations to our current device
		// Return the device name if a match is found
        for(var model in database) {
            if( JSON.stringify(database[model]) == currentDeviceInfo ) {
                return 'iPhone ' + model;
            }
        }

        return;

    }

    return;

}

Så kører vi! Ovenstående script er min egen produktion. Scriptet finder først den aktuelle User Agent, så vi lige kan tjekke, at vi har med en iPhone at gøre.

Hvis det er tilfældet, så læser vi højden og bredden på skærmen, samt den mytiske Device Pixel Ratio. Derefter sammenligner vi de værdier med en lille JSON-database, der indeholder tilsvarende værdier for forskellige iPhones. Når/hvis vi finder et match, returnerer vi så bare modelnavnet. Voila!

Nogle modeller (fx iPhone 4 og 4S) har nøjagtigt samme specifikationer på skærmen. Så dem kan vi altså ikke adskille. Og det er som sagt også derfor, at vi ikke kan gøre det 100% præcist. Men ret tæt på.

#3 Send informationen videre til Analytics

Vi skal lige huske at sende informationen til Google Analytics. Ellers er det lige meget. Hvis du bruger en Google Analytics Settings-variable i GTM er det den, du skal redigere. Hvis ikke, så skal du redigere dit generelle Pageview-tag.

Så åbn variablen - eller tag’et. Scroll så ned til “More Settings”-sektionen og find “Custom Dimensions”-sektionen - og tilføj én.

I første kolonne indtaster du index-nummeret (som du noterede tidligere) og i anden kolonne indsætter du referencen til din nyligt oprettede javascript-variabel {{iPhone Model}}.

Når du har gemt, så sørg lige for at teste, om det virker. Du er vel bekendt med både Preview-funktionen i GTM samt GA Debuggeren i konsollen, ikke? I hvert fald bør du ikke publishe noget som helst, før du lige har tjekket de to. Og brug (selvfølgelig) konsollen i Chrome til at emulere en iPhone-model eller to.

Og det er det! Som altid, så er implementering af mine hjemmebryggede koder på eget ansvar. Så igen: Husk at teste :)