in-renderer Integration (formerly known as “outstream”) Example

About this example:

  • in-renderer Integration is one of the integration methods for Prebid Video
  • In this example, to keep it simple, ad rendering is performed using `pbjs.renderAd`
  • InRenderer.js, an open-source renderer optimized for in-renderer integration, is used as the renderer for in-renderer integration. For more information, see InRenderer.js documentation

Example

in-renderer Integration Example


<h1>in-renderer Integration Example</h1>

<div id="ad-unit-1"></div>

var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

var adUnit = {
  code: "ad-unit-1",
  mediaTypes: {
    video: {
      context: "outstream",
      playerSize: [640, 360],
      mimes: ["video/mp4", "video/webm", "video/ogg"],
      protocols: [2, 3, 5, 6, 7, 8],
      api: [2],
    }
  },
  bids: [
    {
      bidder: "michao",
      params: {
        placement: "inbanner",
        site: 1,
        test: true
      },
    },
  ],
  renderer: {
    url: `https://cdn.jsdelivr.net/npm/in-renderer-js@1/dist/in-renderer.umd.min.js`,
    render: (bid) => {
      var inRenderer = new window.InRenderer();
      inRenderer.render("ad-unit-1", bid);
    },
  },
};

pbjs.que.push(function() {
  pbjs.addAdUnits(adUnit);
  pbjs.requestBids({
    timeout: 5000,
    bidsBackHandler: function () {
      const highestCpmBids = pbjs.getHighestCpmBids("ad-unit-1");
      pbjs.renderAd('ad-unit-1', highestCpmBids[0].adId);
    },
  });
})

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>in-renderer Integration Example</title>

    <!-- required scripts -->
    <script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  </head>
  <body>
  
  <!-- javascript -->
  <script>var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];

var adUnit = {
  code: "ad-unit-1",
  mediaTypes: {
    video: {
      context: "outstream",
      playerSize: [640, 360],
      mimes: ["video/mp4", "video/webm", "video/ogg"],
      protocols: [2, 3, 5, 6, 7, 8],
      api: [2],
    }
  },
  bids: [
    {
      bidder: "michao",
      params: {
        placement: "inbanner",
        site: 1,
        test: true
      },
    },
  ],
  renderer: {
    url: `https://cdn.jsdelivr.net/npm/in-renderer-js@1/dist/in-renderer.umd.min.js`,
    render: (bid) => {
      var inRenderer = new window.InRenderer();
      inRenderer.render("ad-unit-1", bid);
    },
  },
};

pbjs.que.push(function() {
  pbjs.addAdUnits(adUnit);
  pbjs.requestBids({
    timeout: 5000,
    bidsBackHandler: function () {
      const highestCpmBids = pbjs.getHighestCpmBids("ad-unit-1");
      pbjs.renderAd('ad-unit-1', highestCpmBids[0].adId);
    },
  });
})
</script>

  <!-- html -->
  
<h1>in-renderer Integration Example</h1>

<div id="ad-unit-1"></div>

  </body>
</html>
This example includes all available adapters and modules. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters and modules are included.

Further Reading