Google Tag Manager Device Detection – tutorial

Google Tag Manager – JavaScript cookie example

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):

1. 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).
2. Create a “tag” that will be executed with the corresponding trigger. For example, you can set your JavaScript code to execute. In this case we want to set a cookie.
3. In GTM you can include your own JavaScript code as tag. To set a cookie you can paste the following code:

document.cookie = “user_id=XXX123; expires=Thu, 18 Dec 2019 12:00:00 UTC”;

So every time a user visits your site a trigger is fired. This trigger runs the tag. Subsequently, this tag includes the JavaScript code for placing a cookie with a unique ID. Thus, when the users visits your site the next time you can identify the unique user. Doing so, it is possible to identify the same user without asking the user for information. This enables us (web-developers) to optimise the UX (user experience) dramatically.

Device detection with GTM and JavaScript

From the example above you see that GTM is very useful for optimising the UX. Unexperienced web developers are able to use GTM as well. However, if you want to do some more advanced stuff it becomes harder. For example, detecting information about the device of the user on the website. This included things like detecting, the type of device, operating system (OS), and screen size. But, in many cases it is hard to detect this information with just JavaScript. For example, Apple does not enables us to see this information. However, after a lot of time I figured out a way to discover this information. To make this possible for all web-developers I created the device detection API. This API can easily be implemented in GTM. To do st, all you need is some basic JavaScript knowledge. In this tutorial I explain how to implement this in GTM.

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 tag to 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.

Conclusion

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.