API demo: discover your device information

To discover device information of your device we created a Javascript tool. The snippet above showes your device properties. More specifically, the demo above is based on a few lines of Javascript code. Based on the characteristics of your device the API finds your corresponding type. 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. Specifically, the following information is available:

• Browser name
• Browser version
• OS name
• The version of the OS
• The type of device
• Device brand
• Device name
• Screen height
• Screen width
• Pixel density / Screen Ratio
• GPU
• 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. In contrast, 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. Finally, a simple if-else javascript code routes the user to the matching page. The image below shows how this could look like.

Currently, users need to browse website to find the matching product. However, device detection API eliminates this time-consuming process. A personalised landing-page is presented to the user. On the one hand, it reduces a lot of time for the users on your website. On the other hand, your conversion rates increase for sure. Additionally, the user experience improves dramatically. Consequently, it increases the website and SEO performance. 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. So, ahead and check it here!

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