Overview
This custom tag will find all of the <img> tags and report if the image response status code is 404. Under variable summary, select ObservePoint Data and under 404 Images you can find the relevant information.
img-#-status: Collects the response code for the image. If there is no response, "Response blocked by CORS".
img-#-sourceUrl: Collects the source of the page.
failures: Any 404 status code errors are appended (We recommend a rule with the following condition: 'failures' does not contain 'img').
function opReqGetAsync(paramObject, acct, callback) {
var baseURL = window.location.protocol+"//"+window.location.hostname+"/observepointcustomtag?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 obj = {};
var allImages = document.querySelectorAll('img');
var promises = [].slice.call(allImages).map(function(img, index) {
var newIndex = index + 1;
var imageUrl = img.src;
obj['img' + newIndex + '-sourceUrl'] = imageUrl;
return fetch(imageUrl).then((r) => r).catch((err) => null)
}
);
Promise.all(promises).then((images) => {
var failures = [];
images.forEach((imageResponse, index) => {
var newIndex = index + 1;
if(imageResponse !== null) {
if(imageResponse.status == 404) {
obj['img' + newIndex + '-status'] = imageResponse.status;
failures.push('img' + newIndex);
} else {
obj['img' + newIndex + '-status'] = imageResponse.status;
}
} else {
obj['img' + newIndex + '-status'] = 'Response blocked by CORS';
}
});
obj['failures'] = failures.join(', ');
opReqGetAsync(obj, '404 Images');
});