How to detect mobile device on Google Tag Manager, DTM & Tealium

Wwwhhhooaaaa this form looks perfect AF! Lemme check how it looks on mobile ???

Mobile responsiveness is a task, isn’t it? The most beautiful features on desktop, might sometimes appear disastrous on a mobile device. If a similar situation is ruining the mobile experience of your website, and you’re looking for a way to show certain features only to your desktop audience or vice versa, here’s how you can do it.

I’ll be helping you detect the device type of your visitors and use that data to serve different (and pleasant) experience on different devices (desktop and mobile).

Following is a detailed procedure on how you can achieve it using Google Tag Manager, but we will also talk about how you can do it on Dynamic Tag Manager by Adobe, and Tealium. Let’s get started!

Detecting a Mobile Device on Google Tag Manager

We’re going to divide the job into three parts.

I – Variable creation
II – Trigger creation
III – Application

I – Creating a variable

We’re creating a variable which returns the value true for a mobile device, and false otherwise. This variable is our device detector!

1 – On your GTM dashboard, go to Variables and click on New.

2 – Give a relevant name to your variable, and under the Variable Configuration, choose Custom JavaScript. I’ve named my variable as Device Check.

3 – Thanks to http://detectmobilebrowsers.com, which is an open source for mobile detection scripts in various programming languages, we can get a JavaScript snippet for our variable. Choose JavaScript and save the .txt file. Then just copy the entire code from the file and paste it as the custom JavaScript of your variable.

Alternatively, you can also just copy the script from here.

function () {
 var a = navigator.userAgent || navigator.vendor || window.opera;
 if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) { return true; }
 return false;
 }

Paste the above code as the custom JavaScript of your variable and click Save. Our variable has been created!

II – Creating a Trigger

Now that we’ve detected the device type, this triggers our next action : Decide what our visitor gets to see! Based on the value returned by our variable, i.e., true for mobile and false for desktop, we’ll create a trigger.

1 – On your Google Tag Manager dashboard, go to Triggers and click New.

2 – Name your trigger and under Trigger Configuration, choose Custom Event.

3 – Since we want this trigger to fire at every page hit, under Event Name, type .* and check the checkbox to enable Use Regex Matching.

4 – Now is when our variable and trigger come together. From the two radio buttons, choose Some Custom, and apply condition to include or exclude a mobile device. To exclude a mobile device, we want to go ahead with devices that return false to our variable. This is what our condition must look like –

The above condition excludes mobile devices. If you want to exclude desktops/tablets, you can put the value true in the last field.

So now, we’re ready to finally achieve our goal of excluding/including mobile devices!

III – Application

The whole idea behind this article came from our own experience with a pop-up form that worked just fine on my laptop, but fucked up on mobile devices. We wanted to hide the form from our mobile audience, solved it and thought you might need the solution some time! And so the example application here, is a Mailchimp subscriber pop-up form that we added to our website by creating a tag on Google Tag Manager. Here’s the tag without any trigger exceptions –

We edited the Triggering settings of our Mailchimp tag, and of course employed the trigger we created in Step II. To add a trigger to your tag, click the Triggering tab and choose the trigger you created earlier for the task (Step II). That’s all!

DIY – Test our form on your desktop and mobile device! Open datavinci.com on private window of your browser.

So that’s how you can use Google Tag Manger to detect device types. Let’s see how you can achieve it on DTM (Adobe’s Dynamic Tag Manager)

Detecting a Mobile Device on Dynamic Tag Manager or Adobe Launch

On DTM or Launch, the process is much simpler. While creating any kind of rule, you get an inbuilt condition to select the device type. Just select the device for which you want to fire the tag from the drop down, as shown in the screenshot below :

DTM mobile device rule

You see? It’s that simple!

Detecting a Mobile Device on Tealium

In Tealium, it is not as straight forward as Adobe, but it’s still pretty simple. Following are the steps:

1 : Adding data source
Create 2 Data Layer elements:
  • device_mobile
  • device_tablet

(You can name them whatever you feel suits your business logic)

Step 2: Fill up your data layer values using a javascript extension

 

  • Select the add extension option -> Go to the ‘Advanced’ tab > Select ‘JavaScript Code’
  • Name your extension and paste the following code in the configuration field.
    // global var to detect mobile devices based on user agent
    utag_data.device_mobile = ((function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))return true})(navigator.userAgent||navigator.vendor||window.opera))?'true':'false';
    
    // global var to detect tablets based on user agent
    utag_data.device_tablet = ((function(a){if(/ipad|android.+\d safari|tablet/i.test(a))return true})(navigator.userAgent||navigator.vendor||window.opera))?'true':'false';
  • !!! IMPORTANT: Set the scope to ‘Pre Loader’ !!!

Step 3: Create your load rules

Detect Mobile device in Tealium Step 3
Build your load rules:
  • is Mobile true: device_mobile / equals / true (if you want to trigger things on mobile devices)
  • is Mobile false: device_mobile / equals / false (if you do NOT want to trigger things on mobile devices)
  • is Tablet true: device_tablet / equals / true (if you want to trigger things on tablet devices)
  • is Tablet false: device_tablet / equals / false (if you do NOT want to trigger things on tablet devices)

Step 4: Use your load rules / Save / Test / Publish / Have a drink (This is important)

How we can help

So that’s how you can take control of what your visitors see, depending on their device type. And there’s so much you can do with it! I hope this article was helpful. Feel free to reach out to us for any queries that you might have. Also, if you don’t have time to learn and apply the magic of analytics, that’s what we are here for! We are a crazy team of Google and Adobe Certified Analytics Experts who eat, breathe, sleep and dream Analytics. And we’ve made it our purpose and passion to electrify your business’s potential through Analytics.

Contact us here.

Found it informative? Leave a comment! You can also give us a thumbs up by sharing it with your community. Also did you know that you can light up our day by subscribing to our blog? Subscribe here –