prebid/Prebid.js

View on GitHub
integrationExamples/gpt/afpExample.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prebid.js Banner Example</title>
  <script src="../../../build/dev/prebid.js"></script>
  <script>
    var adUnits = [
      {
        code: 'iib-target',
        mediaTypes: {
          banner: {
            sizes: [[0, 0]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "In-image",
            placeId: "613221112871613d1517d181", // id from personal account
            placeContainer: '#iib-container',
            imageUrl: "https://rtbinsight.ru/content/images/size/w1000/2021/05/ximage-30.png.pagespeed.ic.IfuX4zAEPP.png",
            imageWidth: 1000,
            imageHeight: 524,
          }
        }]
      },
      {
        code: 'iimb-target',
        mediaTypes: {
          banner: {
            sizes: [[0, 0]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "In-image Max",
            placeId: "6139ae472871613d1517dedd", // id from personal account
            placeContainer: '#iimb-container',
            imageUrl: "https://rtbinsight.ru/content/images/size/w1000/2021/05/ximage-30.png.pagespeed.ic.IfuX4zAEPP.png",
            imageWidth: 1000,
            imageHeight: 524,
          }
        }]
      },
      {
        code: 'icb-target',
        mediaTypes: {
          banner: {
            sizes: [[0, 0]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "In-content Banner",
            placeId: "6139ae082871613d1517dec0", // id from personal account
            placeContainer: '#icb-container',
          }
        }]
      },
      {
        code: 'ics-target',
        mediaTypes: {
          banner: {
            sizes: [[0, 0]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "In-content Stories",
            placeId: "6139ae292871613d1517ded3", // id from personal account
            placeContainer: '#ics-container',
          }
        }]
      },
      {
        code: 'as-target',
        mediaTypes: {
          banner: {
            sizes: [[0, 0]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "Action Scroller",
            placeId: "6139adc12871613d1517deb0", // id from personal account
            placeContainer: '#as-container',
          }
        }]
      },
      {
        code: 'asl-target',
        mediaTypes: {
          banner: {
            sizes: [[0, 0]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "Action Scroller Light",
            placeId: "6139adda2871613d1517deb8", // id from personal account
            placeContainer: '#asl-container',
          }
        }]
      },
      {
        code: 'jb-target',
        mediaTypes: {
          banner: {
            sizes: [[100, 100], [300, 250], [40, 50]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "Just Banner",
            placeId: "6139ae832871613d1517dee9", // id from personal account
            placeContainer: '#jb-container',
          }
        }]
      },
      {
        code: 'icv-target',
        mediaTypes: {
          video: {
            playerSize: [[480, 320]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "In-content Video",
            placeId: "6139ae182871613d1517deca", // id from personal account
            placeContainer: '#icv-container',
          }
        }]
      },
      {
        code: 'ocv-target',
        mediaTypes: {
          video: {
            playerSize: [[480, 320]],
          }
        },
        bids: [{
          bidder: "afp",
          params: {
            placeType: "Out-content Video",
            placeId: "6139ae5b2871613d1517dee2", // id from personal account
            placeContainer: '#ocv-container', // only the "body" tag is used as a container
          }
        }]
      }
    ];
    
    var pbjs = pbjs || {};
    pbjs.que = pbjs.que || [];
    
    pbjs.que.push(function() {
      pbjs.addAdUnits(adUnits);
      pbjs.requestBids({
        bidsBackHandler: function (e) {
          if (pbjs.adserverRequestSent) return;
          pbjs.adserverRequestSent = true;
          
          var targets = ['iib-target', 'iimb-target', 'icb-target', 'ics-target', 'as-target', 'asl-target', 'jb-target', 'icv-target', 'ocv-target']
  
          targets.forEach(function(target) {
            var params = pbjs.getAdserverTargetingForAdUnitCode(target);
            var iframe = document.getElementById(target);
  
            if (params && params['hb_adid']) {
              pbjs.renderAd(iframe.contentDocument, params['hb_adid']);
            }
          })
        }
      });
    });
  </script>
</head>
<body id="ocv-container">
  <h2>In-image</h2>
  <div class="container-wrapper">
    <div id="iib-container" style="max-width: 600px;">
      <img src="https://creative.astraone.io/files/default_image-1-600x400.jpg" width="100%" />
    </div>
    <iframe id="iib-target" style="display: none;"></iframe>
  </div>
  
  <h2>In-image Max</h2>
  <div class="container-wrapper">
    <div id="iimb-container" style="max-width: 600px;">
      <img src="https://creative.astraone.io/files/default_image-1-600x400.jpg" width="100%" />
    </div>
    <iframe id="iimb-target" style="display: none;"></iframe>
  </div>
  
  <h2>In-content Banner</h2>
  <div class="container-wrapper">
    <div id="icb-container"></div>
    <iframe id="icb-target" style="display: none;"></iframe>
  </div>
  
  <h2>In-content Stories</h2>
  <div class="container-wrapper">
    <div id="ics-container"></div>
    <iframe id="ics-target" style="display: none;"></iframe>
  </div>
  
  <h2>Action Scroller</h2>
  <div class="container-wrapper">
    <div id="as-container"></div>
    <iframe id="as-target" style="display: none;"></iframe>
  </div>
  
  <h2>Action Scroller Light</h2>
  <div class="container-wrapper">
    <div id="asl-container"></div>
    <iframe id="asl-target" style="display: none;"></iframe>
  </div>
  
  <h2>Just Banner</h2>
  <div class="container-wrapper">
    <div id="jb-container"></div>
    <iframe id="jb-target" style="display: none;"></iframe>
  </div>
  
  <h2>In-content Video</h2>
  <div class="container-wrapper">
    <div id="icv-container"></div>
    <iframe id="icv-target" style="display: none;"></iframe>
  </div>
  
  <!-- Out-content Video -->
  <iframe id="ocv-target" style="display: none;"></iframe>
</body>
</html>