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) { let 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) => { let failures = []; images.forEach((imageResponse, index) => { let 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'); });