SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES

FORGOT YOUR PASSWORD?

FORGOT YOUR DETAILS?

AAH, WAIT, I REMEMBER NOW!

The API CompanyThe API Company

  • Home
  • API’s
    • Device detection API
    • IP Location API
  • FAQ
  • Contact
  • Blog
  • My account
SIGN IN
  • No products in cart.
  • Home
  • Blog
  • Device detection
  • How to (precisely) detect the device model with JS
Sunday, 09 February 2020 / Published in Device detection, JavaScript

How to (precisely) detect the device model with JS

Tweet
Pin
Share
Personalisation using device model detection

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 🙂

Tweet
Pin
Share
Tagged under: device detection, device type, javascript, theapicompany

Recent Posts

  • REST & SOAP API USAGE IN 2020

    This infographic illustrates REST and SOAP API ...
  • What is API: Application programming interface

    What is an API API stands for Application progr...
  • What is an IP address: concept & technology

    IP-address is short for “Internet protoco...
  • What is geolocation: History and use-cases

    A brief history For already thousand of years p...
  • New: Geolocation detection API

    Today we launched a new API for our platform: T...

Archives

  • April 2020
  • March 2020
  • February 2020
  • March 2019
  • February 2019

Categories

  • API
  • AWS
  • browser detection
  • Company information
  • Device detection
  • geolocation
  • IP-address
  • JavaScript
  • new devices
  • User-Agent String
Links
Blog
Device Detection API
IP Location API
Privacy Policy
Information
Contact
About
FAQ
Sitemap

© 2021 - The API Company

VAT NR: NL002318093B93 - DataClick

TOP