Retina display checking on GTM

Question

I've tried to look for a way to analyze retina display vs normal display conversion rate but I can't find the correct variables to check if a device uses retina display or not. I've searched in many forums and the posts are either too old (since 2010) or outdated due to changes in GTM. Does anyone know if it's possible to track device resolution in GTM?

Please if you are to answer referring to a link, please make sure you read the whole description of the solution since I have gone through many ones and they all prove to be wrong or not possible to implement due to the reasons I mentioned before.

I found this answer but unfortunately the last comment says it stopped working.

Answer 1

GTM itself does not measure anything, but you can use any value that can be obtained via javascript.

One suggestion I found to detect retina displays is to use devicepixelratio, where apparently a ratio equal to or higher than 2 suggests a retina display. devicepixelratio does not work on IE (works with Edge, though), but here's a link to a suggested polyfill.

So if you create a custom JS variable in GTM you can use this (I admit I havent tested it myself, but it seems to work for other people).

Answer 2

Google Analytics tracks screen resolution - you can access it in custom reports, as a secondary dimension, or by navigating to: Audience>Technology>Browser & OS>Screen Resolution (Screen Resolution is a selectable Primary Dimension just below the chart).

This chart gives you Goal Conversion Rates, but if you wanted you could also create a Segment with resolutions that you like, and another with the rest, and compare the two across any other report.

However, 'Retina Display' is a marketing term used by Apple (it's actually a registered trademark of theirs). Although the term does make sense, higher pixel density than the human retina is capable of observing, you'll find that their use of it varies, as you are expected to hold different devices at different distances from your face. Therefore a 'retina' iPhone is expected to have a higher pixel density than an 'retina' iPad.

Answer 3

You can also change the function to work with matchMedia and resolutions with dpi instead of devicePixelRatio to detect if it's retina or not:

Create Custom JavaScript variable, pixel_ratio:

function () {
    //Configure resolutions here, will return value of ratio:
    var pixel_ratio = [
    {'pixel_ratio': 'all', 'ratio': 1},
    {'pixel_ratio': '(min-resolution: 144dpi)', 'ratio': 1.5},
    {'pixel_ratio': '(min-resolution: 192dpi)', 'ratio': 2}
    ];
    var result;
    pixel_ratio.forEach(function (element) {
        var ratio = 1;
        //If browser support matchMedia, use it
        if (window.matchMedia) {
        // return current media query
            if (window.matchMedia(element.pixel_ratio).matches) {
                result = element.ratio;
            }
            } else { //matchMedia not supported
                if (window.screen.systemXDPI !== undefined 
                    && window.screen.logicalXDPI !== undefined 
                    && window.screen.systemXDPI > window.screen.logicalXDPI) {
            // Only allow for values > 1
            ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
            } else if (window.devicePixelRatio !== undefined) {
                ratio = window.devicePixelRatio;
            }
            if (element.ratio === (Math.round(ratio * 100) / 100)) {
                result = element.ratio;
            }
        }
    });
    return result + 'x';
}

Create custom dimensions in GA for pixel_ratio. Select scope as “Hit”. Note the index value for each dimension. In GTM, configure the custom dimensions in your base GA pageview tag, matching the dimension index value from GA.