As a web-developer I often used Google Tag Manager (GTM). With GTM it is easy to discover information about your visitors. With the device detection API it becomes ever more easier. Therefore, I wrote this google tag manager device detection tutorial for you. With GTM you can detect a dozen of things. For example, you can discover how much time the user spends on each page. Even more interesting is the ease GTM offers for us to set cookies. All of this GTM logic can be implemented with so called 'tags',' triggers', and 'variables'. An example of setting a cookie on your website could be the following (conceptual):
Create a "trigger" that fires on every page. More specifically, each time a user visitors a page you can execute/fire a tag (run a piece of code).
document.cookie = "user_id=XXX123; expires=Thu, 18 Dec 2019 12:00:00 UTC";
Implementation in Google Tag Manager (GTM)
Let's say that we want to detect the name of device on each page. Using this information we want to set an alert per device name. The following steps are needed:
1. Set-up a trigger to fire on each page
2. Set-up a tagto run the device detection API
Click on the Tags tab and click new in the upper right corner.
Click on the trigger field. A pop-up will open. Then you can click on the trigger we just created.
Then, click on the tag field and choose custom HTML.
Include the following code. This code can be found here.
3. Publish to your website and test
The only this left is to publish the created tag and trigger. To do so, just click the upper right button with Submit.
As expected: An alert will show which type of device the user has when he visits your page.
From the tutorial above you see that is very easy to implement the device detection API. Even better is to use it in combination with GTM. Of course it is possible to detect more information using the API. All features of the API are listed here.
What features are available:
Currently, it is possible to detect 13 different device characteristics. However, we are constantly updating our API to detect even more information. Until this moment, the following features can be detected:
The type of device
Pixel density / Screen Ratio
OS code name
The version of the OS
Let us know if you have more features you want to be added to this list.
Once included in your HTML code you can access the features above. Each piece of information is stored in a variable. These variables have the following names:
Pixel density / Screen Ratio
Apple A12 GPU
OS X Yosemite 10.10
OS code name
As you see it is very easy to implement the device detection API. You are able to use unlimited amount of requests. Even more important is that it can be used for free!
Conclusion and future blog posts
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
So, you see that it is very hard to see what type of device is related to output of the userAgent. There is not clear structure in the userAgent of different devices. Thus, it is a hard job to discover the right device from each individual string. In the case of iOS devices it is not even possible to detect the specific name of device.
Device detection with our API
The screen height
The screen Width
The pixel density
The CPU performance of the device
Instead of just returning type: "iPhone" (other API's) it is possible to detect type: "iPhone XS MAX". However, this is just one functionality of the device detection API. In this blogpost I describe all the different functionalities of the API.
The first API: the device detection API
Using the device detection API it will be possible to detect all kind of features about the user's device on your website. Moreover, it is possible to detect the name of the device. And yes… even for iOS devices! With this information it will be possible to optimise your website to tailor the user's needs. All the features are outlined here. In a future blog post more information about this API will be outlined! The API will be updated so it will be possible to use it with PHP, node.js, and more… If you have any ideas about other ideas please leave a comment below!
The reason for starting The API Company
The API Company is a small startup from the Netherlands. The idea about setting up an API company rose when we worked as data science / web developers. During this work we found out that there are many technical possible implementations. However, to implement this was a hard and painful job. We thought that more developers are having the same problems. Using simple API's it would be possible to share your insights.
So now your job as a developer will become easier and easier… Go on and let's develop some cool applications!