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');
    });