Google Tag Manager Device Detection – tutorial
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 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.
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.