OP Custom Tag - 404 Image Status Codes

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 (a good rule would be to check if failures contains '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');

});

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us