OP Custom Tag - Responsive Test

Overview

This custom tag checks to see if the website has a responsive web design. If it does, all CSS rules for every width of the display is sent.

Under Variable Summary reports in the ObservePoint data, click the Responsive Test account for the relevant variables.

• cssRules: Shows the number of CSS rules present for each URL.
• page: Shows the page name URL.
• responsive: Displays true if the URL is responsive and false if it is not.

To capture these details in an Audit or Journey, paste the snippet below into an Execute Action:

function opReqGetAsync(paramObject, acct, callback) {
    var baseURL = "https://opreq.observepoint.com/?acct=" + acct;
    var opReq = new XMLHttpRequest();
    opReq.onreadystatechange = function() {
        if (opReq.readyState == 4 && opReq.status == 200) {
            callback(opReq.responseText);
        }
    }
    opReq.open("POST", baseURL, true);
    opReq.send(JSON.stringify(paramObject));
}
var responseTest = function() {
    var meta = document.querySelector('meta[name*="viewport"]'),
        object = {};
    object.page = location.href;
    object.responsive = false;
    if (meta) {
        var styles = document.styleSheets,
            responsiveRules = [];
        object.responsive = true;
        for (var i = styles.length - 1; i >= 0; i--) {
            try {
                if (styles[i].cssRules) {
                    for (var j = styles[i].cssRules.length - 1; j >= 0; j--) {
                        if (styles[i].cssRules[j].cssText.search(/^@media+.+\((min|max)-width: /g) !== -1) {
                            responsiveRules.push(styles[i].cssRules[j].cssText)
                        }
                    };
                }
            } catch (e) {
                continue;
            }
        };
        object.cssRules = responsiveRules.length;
    }
    opReqGetAsync(object, 'Responsive Test');
};
responseTest();