integrationExamples/postbid/bidViewabilityIO_example.html from prebid/Prebid.js

integrationExamples/postbid/bidViewabilityIO_example.html
Summary

Maintainability

Test Coverage

Issues
<html>
<head>
<script>
  var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];

  (function() {
    var pbjsEl = document.createElement("script");
    pbjsEl.type = "text/javascript";
    pbjsEl.async = true;
    pbjsEl.src = '../../build/dev/prebid.js';
    var pbjsTargetEl = document.getElementsByTagName("head")[0];
    pbjsTargetEl.insertBefore(pbjsEl, pbjsTargetEl.firstChild);
  })();

  pbjs.que.push(function() {
    var adUnits = [
      {
        code: 'regular_iframe',
        mediaTypes: {
          banner: {
            sizes: [[300, 250]]
          }
        },
        bids: [
          {
            bidder: 'appnexus',
            params: {
               placementId: 13144370
            }
          }
        ]
      },
      {
        code: 'large_iframe',
        mediaTypes: {
          banner: {
            sizes: [[970, 250]]
          }
        },
        bids: [
          {
            bidder: 'appnexus',
            params: {
               placementId: 13144370
            }
          }
        ]
      },
    ];

    pbjs.setConfig({
      bidderTimeout: 1000,
      bidViewabilityIO: {
        enabled: true,
      }
    });

    pbjs.onEvent('adRenderSucceeded', ({bid}) => {
      var p = document.createElement('p');
      p.innerHTML = bid.adUnitCode + ' was rendered';
      document.getElementById('notes').appendChild(p);
    });

    pbjs.onEvent('bidViewable', (bid) => {
      var p = document.createElement('p');
      p.innerHTML = bid.adUnitCode + ' was viewed';
      document.getElementById('notes').appendChild(p);
    });

    pbjs.addAdUnits(adUnits);

    pbjs.requestBids({
      bidsBackHandler: function(bidResponses) {
        Object.keys(bidResponses).forEach(adUnitCode => {
          var highestCpmBids = pbjs.getHighestCpmBids(adUnitCode);
          var winner = highestCpmBids.pop();
          var iframe = document.getElementById(adUnitCode);
          var iframeDoc = iframe.contentWindow.document;
          if (winner && winner.mediaType === 'banner') {
            pbjs.renderAd(iframeDoc, winner.adId);
          } else if (winner) {
            iframe.width = 300;
            iframe.height = 300;
            iframeDoc.write('<head></head><body>unsupported mediaType</body>');
            iframeDoc.close();
          } else {
            iframe.width = 300;
            iframe.height = 300;
            iframeDoc.write('<head></head><body>no winner</body>');
            iframeDoc.close();
          }
        });
      }
    })
  });

</script>

</head>

<body>
    <div id="notes" style="position: fixed; right: 0; width: 50%; height: 100%;"></div>

    <div style="height: 100%"></div>

    <iframe id='regular_iframe'
            FRAMEBORDER="0"
            SCROLLING="no"
            MARGINHEIGHT="0"
            MARGINWIDTH="0"
            TOPMARGIN="0"
            LEFTMARGIN="0"
            ALLOWTRANSPARENCY="true"
            WIDTH="0"
            HEIGHT="0">
    </iframe>

    <div style="height: 100%"></div>

    <iframe id='large_iframe'
            FRAMEBORDER="0"
            SCROLLING="no"
            MARGINHEIGHT="0"
            MARGINWIDTH="0"
            TOPMARGIN="0"
            LEFTMARGIN="0"
            ALLOWTRANSPARENCY="true"
            WIDTH="0"
            HEIGHT="0">
    </iframe>

    <div style="height: 100%"></div>

</body>
</html>