How to (precisely) detect the device model with JS

In 2020 we live in a more personalised world than ever before. To make web pages transform to the personal needs of the user, information about the visiter is needed. As a data scientist and web developer I struggle a lot with gathering data about the visitors on my website. One of theses struggles is determining the device type. But there is a little help now…

Let’s envision a personalised web-shop that sells phone cases. Imagine that the web-shop could identify which mobile device the user has and then shows only relevant cases for that specific device! Wouldn’t that be awesome? The future is closer than you think with this cool device detection API! I’ll show you how to implement this API and what features it has!

Device detection API features:

Until now many JavaScript device detection API’s were not able to detect device models as specific as this one (e.g. iPhone 11 Pro). Once implemented — the following features are detected and accessible by the API

• deviceAPI.deviceType // e.g. Mobile
• deviceAPI.deviceBrand // e.g. Apple 
• deviceAPI.deviceName // e.g. iPhone XS
• deviceAPI.screenWidth // e.g. 1600
• deviceAPI.screenHeight // e.g. 800
• deviceAPI.screeenRatio // e.g. 2
• deviceAPI.GPU // e.g. Apple GPU 
• deviceAPI.browserName // e.g. Safari
• deviceAPI.browserVersion // e.g. 13.0.1
• deviceAPI.osName // e.g. iOS
• deviceAPI.osVersion // e.g. 13.1
• deviceAPI.touchScreen // e.g. TRUE

Synchronous implementation:

In the paragraph hereafter you can find an explanation about how to implement the API asynchronously. But first I’ll explain how the API can be implemented synchronously:

1. Get a unique code for the trail version over here.
2. Place the <script src=”https://theapicompany.com/deviceAPI.js?id=deviceAPI-123456″></script> in your head tags of the website 
3. Replace the id with your unique id
4. Access the features from the deviceAPI variable as shown below

Subsequently, route the users with a specific device model to a specific page on your domain. Like this example: 

Asynchronous implementation:

To speed up the loading of your website there is also an asynchronous version available. To implement this you should do the following: 

1. Get a unique code for the trail version over here.
2. Place the <script async src=”https://theapicompany.com/deviceAPI2.js?id=deviceAPI-123456″></script> in your head tags of the website
3. Replace the id with your unique id
4. Access the features from the deviceAPI variable as shown below

That was easy right? 🙂

So when a user with an iPhone XS enters your website, they will be redirected to the page with cases just for the iPhone XS.

Conclusion

Personalisation and CXO (customer experience optimisation) are one of the hottest topics of web development these days. With this device detection API you’ll be able to personalise your website with just a single line of code. So go ahead and happy coding 🙂