API demo: discover your device information

API demo: discover your device information

To discover device information of your device we created a tool. The snippet above showes your device properties. This demo is based on a few lines of Javascript code. Based on the characteristics the API finds your corresponding device. The following steps are performed to discover this information:

  1. Important properties of the device are collected. For example: the screen size or CPU information.
  2. This API combines these data and finds the corresponding device. For example: iPhone XS or Samsung Galaxy S9.
  3. The device information is accessible in a JavaScript variable. For example: deviceAPI.deviceName.

The snippet above displays key information. However, there are more device properties available. More specifically, the following information is available:

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

In this tutorial I explain how to implement the device detection API in Javascript!

Use-case of the device detection API

A simple use-case is personalising page content. For example, an iPhone user is sent to a specific page. Alternatively, a Samsung user sees a Samsung designed page. Before the page is loaded the device detection API is accessed. Subsequently, the type of device is identified. A simple if-else javascript code routes the user to the matching page. The image below shows how this could look like.

Device discovering and page personalisation for iPhone and Samsung.

Currently, users need to browse website to find the matching product. However, when using the device detection API this process is history. This saves a lot of time. Moreover, the user experience improves dramatically. Imagine not having to search for your product anymore! 😀

Conclusion

The device detection API is a JavaScript tool to discover device information. The API needs just one line of JS code to work. However, to implement some more logic on my website I often use GTM. Therefore I wrote a tutorial for the device detection API for GTM. Check it here!

Please leave a comment if the information is (in)correct! Because we love feedback 🙂

 

Leave a Reply

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