Detect and track iPhone models in Google Analytics

June 8, 2017. Posted in: Data Collection
Tags: Customization, Google Analytics, Google Tag Manager

Ever since the iPhone 4 came out, I’ve been a bit annoyed with the way mobile (Apple) devices are tracked in Google Analytics. While we get plenty of device information for other brands, Apple has (perhaps intentionally) made it difficult to detect and track iPhone models.

To make a long story short, Apple devices usually only identify themselves as iOS devices without any specific model information. Basically, iPhones introduce themselves to Google Analytics by saying “Hi, I’m an iPhone” instead of “Hello, I’m an iPhone 5”. Which is what we’re going to change with this post.

How Google Analytics detects mobile devices

It should be easy enough to identify a mobile device (brand and model) - and it usually is. Browsers include a so-called user agent string, which is just a type of background information about the browser’s operating system, browser, browser version and other stuff.

For instance, the user agent string for a Samsung Galaxy S7 can look like this:

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

Buried inside that piece of garble is the actual brand and model of the device - in this case Samsung SM-G930F, which coincidentally means “Samsung Galaxy S7”. Google Analytics captures this information and translates it into something readable in your Devices report (you can find that report in the Audience section under Mobile).

The problem, however, with Apple devices is that the user agent string doesn’t contain one bit of information about the actual device model. It only contains information about the operating system and the browser and the fact that it’s an iPhone. And that’s not sufficient to correctly ‘guess’ the actual iPhone model.

Track iPhone models in Google Analytics

Since you’re here, I’m guessing that you’re looking for a report like this:

Well, you’re in luck, because this is entirely possible. But how come iPhone 6, iPhone 6s and iPhone 7 appear on the same row? Good question, but it will not get any better than that, but it’s still a big step up from just “iPhone”. Using the information at hand, it’s simply not possible to do a more precise detection.

The basics of iPhone model detection

In order to track and detect iPhone models, our basic ingredients are:

• A Custom Dimension in Google Analytics, in which to store the improved iPhone model name
• A custom javascript variable in Google Tag Manager that will do the actual detection and output the iPhone model name
• A modification to your existing pageview tag in GTM that will store the iPhone model name in your Custom Dimension

As you might have guessed, the magic mostly happens in the custom javascript. Basically, we’ll be combining different types of information to identify the different iPhone models.

First, we’ll be using the number of on screen pixels - specifically the width and height of the screen measured in pixels. (I did something similar in a previous post about detecting the screen orientation of mobile devices). Secondly, we’ll use the Device Pixel Ratio, which I won’t explain in detail - but suffice to say this is what Apple uses to do Retina resolutions. And that’s it.

By comparing the height and width as well as the Device Pixel Ration against what we know about different iPhone models, we can guess the iPhone model in question.

#1 Setup a Custom Dimension

This step should be easy, unless you’ve used all your custom dimensions. In Google Analytics…:

1. Navigate to the Admin panel
2. Click on Custom Definitions in the Property column
3. Select Custom Dimensions
4. Click +New Custom Dimension
5. Enter a name for the Custom Dimension (“iPhone Model” would be a good name)
6. Set the Scope to Session
7. Click Create, and note the index number of the dimension (e.g. “1” if this is your first custom dimension)

Okay, great. And now for the javascript magic.

#2 Setup the GTM Variable

In Google Tag Manager, create a new User-Defined Variable of the type “Custom JavaScript” and name it “iPhone Model”. Then copy and paste this code:

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;

}

So, now we’re talking. This script starts by grabbing the user agent string when we can see it’s an iPhone.

If that’s the case, we simply read the width and height of the device as well as the Device Pixel Ratio. These values are then compared to the actual values of the different known iPhone models. If a match is found, then the script returns the corresponding iPhone model name.

Now, since some iPhone models (such as the iPhone 4 and 4s) have the exact same specifications regarding screen size and resolution, it’s not possible to distinguish between the two. Which is also the reason that multiple models appears on the same line in the report screenshot shown in the beginning of this post.

#3 Modify the Pageview tag

So, the last thing to do is to simply make a tiny modification to your existing pageview tag in Google Tag Manager. Open up and edit the tag, expand the “More Settings” section, and then expand the “Custom Dimensions” section.

Enter the dimension index (which you, of course, wrote down earlier) and set the value to {{iPhone Model}} which refers to the javascript variable:

Once you’ve saved the tag, you’re good to go. Make sure to test the setup using the Preview feature before you publish (you can use the Chrome developer console to emulate different iPhone models).