© 2021 - The API Company
VAT NR: NL002318093B93 - DataClick
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.
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
- 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. There are two different methods available. The synchronous implementation and the asynchronous. To implement the first method, just copy-paste the following line in the <head> tags of your website:
<script src=“https://theapicompany.com/deviceAPI.js?id=XXX”></script>
Alternatively, the asynchronous is available to improve efficiency and reduce loading times. Just copy-paste the following code in the <head> tags of your website.
<script async src=“https://theapicompany.com/deviceAPI2.js?id=XXX”></script>
Once included several variables can be accessed to detect the device information of the user. These variables are described in the following paragraph.
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:
| Feature | Variable name | Example return |
| Device type | deviceAPI.deviceType | mobile |
| Device brand | deviceAPI.deviceBrand | Apple |
| Device name | deviceAPI.deviceName | iPhone XS |
| Screen height | deviceAPI.screenHeight | 800 |
| Screen width | deviceAPI.screenWidth | 400 |
| Pixel density / Screen Ratio | deviceAPI.screenRatio | 2 |
| GPU | deviceAPI.GPU | Apple GPU |
| Browser name | deviceAPI.browserName | Chrome |
| Browser version | deviceAPI.browserName | 71.0.3578.99 |
| OS name | deviceAPI.osName | OS X Yosemite 10.10 |
| OS version | deviceAPI.osCodeName | 10.10.5 |
| Touchscreen | deviceAPI.osCodeName | TRUE |
As you see it is very easy to implement the device detection API. Check our homepage to see how you can implement it for your website!
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.