Prebid Video | Instream Example with Akamai Adaptive Media Player (AMP)

An example of an instream pre roll ad with Akamai AMP and Prebid.js. Akamai AMP also provides a built-in prebid plugin wich simplifies and integrates the common prebid.js bidding workflow without extra efforts.

Important: This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.

Warning: Do not forget to exchange the placementId in the code examples with your own placementId!

Place this code in the page header.

<script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>

<script type="text/javascript" src="https://amp.akamaized.net/hosted/1.x/player?apikey=sample"></script>
<script>
  var pbjs = pbjs || {};
  pbjs.que = pbjs.que || [];
  var tempTag = false;
  var invokeVideoPlayer = function(url) {
      tempTag = url;
  }

  var videoAdUnit = {
      code: 'video1',
      mediaTypes: {
          video: {
                  context: 'instream',
                  playerSize: [640, 480],
                  mimes: ['video/mp4'],
                  protocols: [1, 2, 3, 4, 5, 6, 7, 8],
                  playbackmethod: [2],
                  skip: 1
          }
      },
      bids: [{
          bidder: 'appnexus',
          params: {
              placementId: 13232361 /* Add own placement id */
          }
      }]
  };

  pbjs.que.push(function() {
      pbjs.addAdUnits(videoAdUnit);
      pbjs.setConfig({
          debug: true,
          cache: {
              url: 'https://prebid.adnxs.com/pbc/v1/cache'
          }
      });

      pbjs.requestBids({
          bidsBackHandler: function(bids) {
              var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
                  adUnit: videoAdUnit,
                  params: {
                      iu: '/19968336/prebid_cache_video_adunit',
                      cust_params: {
                          section: 'blog',
                          anotherKey: 'anotherValue'
                      },
                      output: 'vast'
                  }
              });
              invokeVideoPlayer(videoUrl);
          }
      });
  });

</script>

Place this code in the page body.

<!--player container-->
<div style="width:604px; height:341px;">
    <div id="akamai-player" </div>
</div>
<script type="text/javascript">
  invokeVideoPlayer = function(url) {
    var config = {
        plugins: {
            ima: {
                resources: [
                    { src: "//imasdk.googleapis.com/js/sdkloader/ima3.js", type: "text/javascript", async: true },
                    { src: "${paths.plugins}ima/Ima.min.js", type: "text/javascript", async: true }
                ],
                adTagUrl: url
            }
        },
        autoplay: 'muted',
        media: {
            src: "https://mdtp-a.akamaihd.net/customers/akamai/video/VfE.mp4"
        }
    }

    akamai.amp.AMP.create('#akamai-player', config)
  };

  if (tempTag) {
    invokeVideoPlayer(tempTag);
    tempTag = false;
  }
  </script>

Using Prebid Plugin for AMP

As an alternative an adUnit can be passed within the built-int prebid plugin for AMP. The prebid bid request will be handled by prebid plugin automatically just before the ad request takes place.

The plugin can be implemented by providing a prebid object to the player config as follows

    <head>
        <script type="text/javascript" src="https://amp.akamaized.net/hosted/1.x/player?apikey=sample"></script>
    </head>
    <body>
        <!--player container-->
         <div style="width:604px; height:341px;">
            <div id="akamai-player"/div> </div>
        </div>
        <script type="text/javascript">
        var config = {
            plugins: {
              prebid: {
                adServer: {
                  name: "dfp"
                },
                resources: [
                  { src: "https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js", type: "text/javascript", async: true },
                  { src: "${paths.plugins}prebid/Prebid.min.js", type: "text/javascript", async: true }
                ],
                adUnits: {
                  code: "video-1",
                  mediaTypes: {
                    video: {
                      playerSize: [640, 480],
                      context: 'instream',
                      mimes: ['video/mp4'],
                      protocols: [1, 2, 3, 4, 5, 6, 7, 8],
                      playbackmethod: [2]
                    }
                  },
                  bids: [
                    {
                      bidder: "appnexus",
                      params: {
                        placementId: 13232361 /* Test placementId not for prod */
                      }
                    }
                  ]
                },
                options: {
                  cache: {
                    url: "https://prebid.adnxs.com/pbc/v1/cache"
                  },
                  enableSendAllBids: true
                }
              },
              ima: {
                resources: [
                  { src: "//imasdk.googleapis.com/js/sdkloader/ima3.js", type: "text/javascript", async: true },
                  { src: "${paths.plugins}ima/Ima.min.js", type: "text/javascript", async: true }
                ],
                adTagUrl: {
                  params: {
                    sz: "640x480",
                    iu: "/19968336/prebid_cache_video_adunit",
                    output: "vast",
                    correlator: "#{now}"
                  }
                }
              }
            },
            autoplay: 'muted',
            media: {
                src: "https://mdtp-a.akamaihd.net/customers/akamai/video/VfE.mp4"
            }
          };

        akamai.amp.AMP.create('#akamai-player', config)
      </script>
    </body>