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...

  
<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...

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...

<!--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