Skip to main content
All CollectionsObservePoint Custom Tag
OP Custom Tag - 404 Image Status Codes
OP Custom Tag - 404 Image Status Codes
Luiza Gircoveanu avatar
Written by Luiza Gircoveanu
Updated over a week ago

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');
});
Did this answer your question?