Javascript code to detect device category

Question

For purposes of Google Tag Manager, I need a javascript code to return if the visitor is using mobile, tablet or desktop as identified in adwords, analysis, etc.

I have written 2 codes but I wonder if there is a better way to do it or what option is best

//Option A: Using User Agent & touch feature
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 'm'; }
  if('ontouchstart' in window || 'onmsgesturechange' in window) {return 't'};
  return 'd';
}

//Option B: Using matchMedia & device-with
function () {
    if (window.matchMedia('only screen and (max-device-width: 1024px)').matches) {
        return 't';
    } else if (window.matchMedia('screen').matches) {
        return 'd';
    }
    return 'm';
}

Duplicate of this? http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery — mplungjan, Jun 09 '16 at 17:08
It looks like you already answered your own question with your code — Richard Hamilton, Jun 09 '16 at 17:13
Match media just gives you classification based on the screen size, if that is what you are expecting then it is the most optimal code to use. Just want to highlight the device classification might not be accurate at all — David Chelliah, Jun 09 '16 at 17:21

David Chelliah · Answer 1 · 2016-06-09T17:30:09.280

0

Since you are using user agent to find out a device, then I would recommend https://github.com/Skookum/categorizr.js, which will cover far more cases.

The actual project was scrapped because it is not more reliable solution with new tablet browser useragents, that doesn't distinguish them from the desktops ones. And also with an intend to urge people to move towards progressive enhancements in their website, rather than looking at the device type using user agents.

But for your case, where you use this just for analytics. This solution will be more reliable and also offers much more detection capabilities.

Categorizr allows following detection

categorizr.isTv {Bool}
categorizr.isDesktop {Bool}
categorizr.isTablet {Bool}
categorizr.isMobile {Bool}

edited Jun 09 '16 at 17:30

answered Jun 09 '16 at 17:11

David Chelliah

1,294
1
12
20

Thanks. I may update question to clarify this code is intended for GTM and I'm looking for minimal code. – jrosell Jun 09 '16 at 17:13
Just to add the context on how the active development came to an end http://brettjankord.com/2013/01/10/active-development-on-categorizr-has-come-to-an-end/ – David Chelliah Jun 09 '16 at 17:15
1

@jrosell 3.1 KB minimized and may be ever more less if gZipped https://raw.githubusercontent.com/Skookum/categorizr.js/master/categorizr.min.js – David Chelliah Jun 09 '16 at 17:17
I would prefer not to load external resource. If I decide to use userAgent option, I would prefer to copy categorizr methods in my custom javascript variable. – jrosell Jun 09 '16 at 17:22

Javascript code to detect device category

1 Answers1