Personalised page content – Device detection API

The era of data enabled web-developers to optimise the user experience dramatically. In the last year websites keep pushing to personalise their pages. For example, when you visit a clothing website it often knows whether you are a male or female. Accordingly, the site shows only the clothes of your gender. With the device detection API we can take this personalisation to the next level. Specifically, we will look at personalised page content in this blog post!

Use case: phone cases

Let’s say you are a e-commerce website and you sell phones cases. Nowadays the user has to find his specific type of phone. The device detection API automated this process. Once the user enters the website the type of device is detected. With the output of the API you will be able to redirect the users to a specific page. For example users with an iPhone XS will be sent to the page containing iPhone cases. In the image below you can see this process in a conceptual overview.

Implementation in Javascript

From the example above you see it is powerful to implement the device detection API. Below I will explain how to implement this in JavaScript.

The example shows we use just a few lines of JS code. Specifically, the first line of the code we import the device detection code. Using the device variables you discover a lot of information about the user. The ‘devicename’ is used to route the user to the personalised page. This will optimise the user experience a lot!

Conclusion

This blogpost showed how easy it is to implement the device detection API. In just a few minutes of work this JS tool enables you to create personalised page content. Additionally, GTM is an easy way to impement the device detection API. If you want to implement this in Google Tag Manager check out this blogpost! Even more important, if you like this post please share it with your network 🙂