5 Steps to Add iPhone Models to Google Analytics with WURFL.js

Add iPad and iPhone Models to Google Analytics

Do you want to add information on iPhone models to Google Analytics? Then check out our infographic and follow the guide below.

Ever wonder why Google Analytics can’t give you more detail about iPhones and iPads?  After all, an iPhone 4, iPhone SE 2nd Generation, and iPhone 16 Pro Max are different phones representing VERY different markets. Wouldn’t it be great to drill down into that detail?

Why Doesn’t Google Analytics Show iPhone and iPad Models?

It is a long story, but Apple has gone out of its way to make detection of individual models difficult. The most common method for detecting mobile devices uses a tool like WURFL to evaluate the User Agent String. Google Analytics uses this method. However, to accurately detect iPads and iPhone models in Google Analytics, you need an extra step of detection analysis that Google Analytics does not provide.

ScientiaMobile has iPhone device detection available in a product called WURFL.js. And we make the basic level of detection available to anyone who signs up for the WURFL.js Lite account. When you insert the WURFL.js script on your Web page, it will detect and return a minimum of 3 WURFL Device Capabilities in a json object.  These are

• complete_device_name (e.g. "Apple iPhone 16e")
• is_mobile
• form_factor (e.g. Desktop, App,Tablet, Smartphone, Feature Phone, Smart-TV, Robot, Other non-Mobile, Other Mobile)

You can add these into Google Analytics. The guide below will outline two easy methods to integrate WURFL.js with Google Analytics 4 (GA4). One way is to use the Google Tag Manager (GTM) and the alternative is via the Google Tag (aka gtag.js or simply gtag).

Regardless of the method in which you choose to feed WURFL.js capability data into Google Analytics, you will first need to define the set of custom dimensions that GA4 should make available in your reports.

Define custom dimensions in Google Analytics 4 to accept WURFL capability values

Google Analytics 4 (GA4) offers the option to create custom dimensions. These dimensions have a small set of characteristics that need to be populated initially. The most important of these fields is the scope. Since the device data returned from WURFL.js is mostly tied to the user, the User scope is recommended to be used. However, the Event scope can also be used if appropriate.

Custom dimensions, for all WURFL.js capabilities that you would like to track, must be individually created in GA4 like so:

1. In GA4 go to Administration -> Custom Definitions and add a custom dimension. A suggested naming convention for the dimension name is wurfl_<capability_name>.
2. Save and repeat this process to add a custom dimension for every WURFL.js capability that you wish to track in your Google Analytics reports.

Sign up to use WURFL.js

Sign up for the Business Edition with more than 20 capabilities, or start out with the WURFL.js Lite with only three capabilities. WURFL.js Lite is good for trying it out and get a feel of the real potential. You cannot download the JavaScript and serve it from your own server or localhost. The WURFL.js script file need to be served from our hosts as described below. You can however develop a site on localhost which includes the script reference to our servers. When you sign up, you’re asked for the hostnames which will be using WURFL.js. This is how traffic is linked to your account.

Using Google Tag (gtag)

When you’re using gtag directly on your website (i.e. not via GTM), a function called gtag() is exposed. This gtag() function can be used to populate the newly created custom dimentions in GA4 with the capability values from WURFL.js.

Hint: If your websites includes a script with this source https://www.googletagmanager.com/gtag/js?id=G-XXXXXX, you’re using the gtag directly on your website.

1. Insert this code into your page’s body element:

<script>
document.addEventListener("WurflJSDetectionComplete", function () {
    gtag('set', 'user_properties', {
        'wurfl_form_factor': WURFL.form_factor,
        'wurfl_pointing_method': WURFL.pointing_method,
        'wurfl_marketing_name': WURFL.marketing_name,
        'wurfl_model_name': WURFL.model_name
    });

});
</script>Code language: JavaScript (javascript)

Customize the user_properties object in the snippet above with the WURFL.js capabilities you need. Note that the key name must match the custom dimension names created in GA4 in the previous steps.

2. Include the WURFL.js script tag:

<script src="https://wjs.wurflcloud.com/wurfl.js" async></script>Code language: JavaScript (javascript)

Note: If you are using WURFL.js Lite, use this script tag instead:

<script src="https://wurfl.io/wurfl.js" async></script>Code language: JavaScript (javascript)

Please ensure that the script tag to include WURFL.js is placed after the event listener code from the first step.

3. Once WURFL.js has completed loading, the WurflJSDetectionComplete event will fire and desired capabilities from the WURFL object can be pushed to Google Analytics. The integration is now functional.

Using Google Tag Manager (GTM)

If you’re using Google Tag Manager (GTM) to include scripts, including the GA4 tag, you can also use GTM to manage WURFL.js’ integration with GA4.

1. Assuming that you’ve added GA4 through GTM, the first step is to add a tag for WURFL.js:

1a. Click Tags -> new and choose Custom HTML. Insert the following script tag:

<script src="https://wjs.wurflcloud.com/wurfl.js" async></script>Code language: JavaScript (javascript)

Note: If you are using WURFL.js Lite, use this script tag instead:

<script src="https://wurfl.io/wurfl.js" async></script>Code language: JavaScript (javascript)

1b. Under Triggering, choose, Initialization - All Pages

1c. Give the tag a descriptive name like “insert wurfl.js” and save

2. The next step is to create variables for each of the WURFL.js capabilities, whose values need to be sent to GA4. Note that the number and name of the variables created must match those defined in GA4 custom dimensions:

2a. Go to Variables, in the User-Defined Variables section and click on New.

2b. Choose Custom Javascript as the type.

2c. In the text field some code is expected. Here is an example for the pointing_method capability:

function(){
  return WURFL.pointing_method;
}Code language: JavaScript (javascript)

Hint: Give the variable a name that is easily recognizable. For example, use the name of the WURFL.js capability. Here’s a sample naming template: WURFL.<capability_name>

2d. Save and repeat this process until you’ve defined all variables to match the custom dimensions from the Defining Custom Dimensions in Google Analytics 4 (GA4) section.

3. Now, we need to create an event in GTM to send the WURFL.js data to GA4:

3a. Click on Tags -> new and choose Google Analytics: GA4 Event

3b. Next, expand the User Properties section and add rows for each WURFL.js capability to track. Note that the Property Name must match the names as defined in the custom dimensions, as done in the Defining Custom Dimensions in Google Analytics 4 (GA4) section.

Each property is assigned its value from the variables created in the previously.

3c. Click the icon and select the variable that the property is for

3d. Repeat and add rows to the event until you have all the desired WURFL.js capabilities covered

3e. Finally, make sure to sequence this event after the insertion of WURFL.js. Expand the Tag Sequencing section and select the WURFL.js insertion event to fire before this GA4 Event.

3f. Save and then publish the configuration

The data is now flowing from WURFL.js via GTM to GA4. Please note that the GA4 custom dimensions will not have data usable for reporting in GA4 due to a 24 hour delay on the GA4 side. However, you can see the data flowing on the real time reports and even in the debug view, if you have that enabled.

After 24 hours the data will be available in the reports as user properties, for inclusion in any reports.