Responsive Test

Overview

This custom tag checks to see if the website has a responsive web design. If it does, all CSS rule 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 web 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();
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.