JavaScript Device Detection – Features

JavaScript Device Detection – Features

Last week we launched the device detection API. This API is a JavaScript device detection implementation to discover information about the users on your website. More specifically, you are able to detect the type of device, name of device, touchscreen information, and more. Additionally, it is possible to detect information about the user's browser. In the last post we described how the API is able to detect these device features. In this post we look at what features are available and how to implement them.

JavaScript snippet with code to detect the device name
What features are available:

Currently, it is possible to detect 13 different device characteristics. However, we are constantly updating our API to detect even more information. Until this moment, the following features can be detected:

  • The type of device
  • Device brand
  • Device name
  • Screen height
  • Screen width
  • Pixel density / Screen Ratio
  • GPU
  • Browser name
  • Browser version
  • OS name
  • OS code name
  • The version of the OS
  • Touchscreen capabilities

Let us know if you have more features you want to be added to this list.

Implementation in JavaScript

On our homepage you find the JavaScript code for implementing the device detection API. The API is free and no licence key is needed. The only requirement is jQuery. jQuery is also easy to implement. Just copy-paste the following line in the <head> tag of your website:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

In addition to the code above you need to include the following code. Place the line below in the <head> tag. But place it after the jQuery line.


<script src="https://theapicompany.com/deviceAPI.js"></script>


Device detection variables

Once included in your HTML code you can access the features above. Each piece of information is stored in a variable. These variables have the following names:

FeatureVariable nameExample return
Device typedeviceAPI.deviceTypemobile
Device branddeviceAPI.deviceBrandApple
Device namedeviceAPI.deviceNameiPhone XS
Screen heightdeviceAPI.screenHeight800
Screen widthdeviceAPI.screenWidth400
Pixel density / Screen RatiodeviceAPI.screenRatio2
GPUdeviceAPI.GPUApple A12 GPU
Browser namedeviceAPI.browserNameChrome
Browser versiondeviceAPI.browserVersion71.0.3578.99
OS namedeviceAPI.osNameOS X Yosemite 10.10
OS code namedeviceAPI.osCodeNameOS X
OS versiondeviceAPI.osVersion10.10.5
TouchscreendeviceAPI.touchScreenTRUE

As you see it is very easy to implement the device detection API. You are able to use unlimited amount of requests. Even more important is that it can be used for free!

Conclusion and future blog posts

The device detection API is a very easy JavaScript tool. This tool enables web developers to easily optimise the UX. For example, the API can be used to route mobile users to a specific page. More of these use-cases will be described in future blog posts. Additionally, we will cover tutorials with Google tag manager.

 

Leave a Reply

Your email address will not be published. Required fields are marked *