• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

How to: 51Degrees + Google Analytics

Published on Friday, November 15, 2019

How to: 51Degrees + Google Analytics

Great choice, you want to reap the rewards of using device detection on your Google Analytics. Let us show you how to set it up!


Step 1: Set up JavaScript API on your website

Firstly, you will need to connect your website with our device detection database.

Add script below to your website, make sure you add your license key...

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
    // Create an AJAX XMLHttpRequest
    var xmlhttp = new XMLHttpRequest();
    // Insert Cloud key here 
    var key = "*YOUR_LICENCE_KEY*" 
    // Receives UserAgent from clients connection
    var ua = window.navigator.userAgent; 
    // Lists the properties required 
    var url = ("https://cloud.51degrees.com/api/v1/" + key + "/match?user-agent=" 
		+ ua + "&Values=HardwareVendor+HardwareModel+DeviceType+ScreenPixelsHeight+ScreenPixelsWidth");
    // Empty object to store 51Degrees feature values
    var fodf = {};

    // Parses the JSON object from 51Degrees cloud and returns values 
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            // Store the response values 
            var match = JSON.parse(xmlhttp.responseText);
            // Add them to the feature object
            fodf["DeviceType"] = match.Values.DeviceType;
            fodf["HardwareVendor"] = match.Values.HardwareVendor;
            fodf["HardwareModel"] = match.Values.HardwareModel;
            fodf["ScreenPixelsHeight"] = match.Values.ScreenPixelsHeight;
            fodf["ScreenPixelsWidth"] = match.Values.ScreenPixelsWidth;
        }
    } 
    // Send the AJAX request
    xmlhttp.open("GET", url, true);
    xmlhttp.send(); 
</script>


Step 2:Test the API works on your website

It is essential to test the API is working, you can do this by adding a quick data value using the below...

<div id="id01"></div>

document.getElementById("id01").InnerHTML = fodf["DeviceType"]


Step 3: Add device custom dimensions to your Google Analytics

To benefits from the new device properties you now have you need to...

  • Sign in to Google Analytics.
  • Click Admin, and navigate to the property to which you want to add custom dimensions.
  • In the PROPERTY column, click Custom Definitions > Custom Dimensions
  • Click New Custom Dimension.
  • Add a Name.
  • This can be any string, but use something unique so it’s not confused with any other dimension or metric in your reports.
  • Select the Scope.
  • Choose to track at the Hit, Session, User, or Product level.
  • Check the Active box to start collecting data and see the dimension in your reports right away. To create the dimension but have it remain inactive, uncheck the box.
  • Click Create.


Step 4: Add device custom dimensions to your GA code on your website

Add script below to your website...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!--Global site tag(gtag.js) - Google Analytics-->
<script async src = "https://www.googletagmanager.com/gtag/js?id=UA-#########-#" > </script> 
<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag('js', new Date());
 
    // Map the custom dimensions
    gtag('config', 'UA-#########-#', {
        'custom_map': {
            'dimension1': 'device_type',
            'dimension2': 'hardware_vendor',
            'dimension3': 'hardware_model',
            'dimension4': 'screen_pixels_height',
            'dimension5': 'screen_pixels_width'
        }
    });
    
    // Add the custom dimension values from the features object
    gtag('event', 'device_metric', {
        'device_type': String(fodf["DeviceType"]),
        'hardware_vendor': String(fodf["HardwareVendor"]),
        'hardware_model': String(fodf["HardwareModel"]),
        'screen_pixels_height': String(fodf["ScreenPixelsHeight"]),
        'screen_pixels_width': String(fodf["ScreenPixelsWidth"])
    }); 
</script>


Step 5: Test device custom dimensions are pushing to your Google Analytics

GA Secondary Dimensions
Comments (0)

Author: Josh Grew

Categories: Development

Tags:

JoshGrew
>

Josh Grew

Other posts by Josh Grew
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE