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 unintentionally) 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. Most 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 modification to your existing pageview tag in GTM that will store the iPhone model name in your Custom Dimension
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 with 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 is really easy. In Google Analytics…:
- Navigate to the Admin panel
- Click on Custom Definitions in the Property column
- Select Custom Dimensions
- Click +New Custom Dimension
- Enter a name for the Custom Dimension (“iPhone Model” would be a good name)
- Set the Scope to Session
- Click Create, and note the index number of the dimension (e.g. “1” if this is your first custom dimension)
#2 Setup the GTM Variable
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.
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).