Google DFP Video ads and Setup for Advertising with the Bitmovin Adaptive Streaming Player

This tutorial provides a step-by-step guide for making use of Bitmovin’s advertising support for DFP video ads and VAST/VPAID in your application. It covers solutions for video advertising across all platforms, including mobile video advertising, through the Bitmovin HTML5 Player. The solution uses VAST, VPAID and Google DoubleClick for Publishers  and can be used to deliver a wide variety of ad types including pre-roll ads. The ad tag(s), created within this guide, will be built on DFP Ad Units. An introduction to Ad Units, as well as more detailed information and how they can be created, can be found in the DFP Small Business Help Center.

Generating Ad Tags, using Google DFP

Once one or more Ad Units have been created, they can then be used to generate the ad tag, which will be needed for the player configuration later on. To do so, login to the DFP Admin Console and switch to the Generate tags page, like shown in the screenshot below.

 

DFP video ads integrated with the Bitmovin Player
 

As you can see, we’ve selected two different Ad Units, which we will use for a pre- and mid-roll ad, respectively. In general you can use as many Ad Units as needed for your use case. It is possible to both group them (e.g.playing two pre-roll ads before the actual video) or to use them separately at different points in time. In the next steps you will be asked to choose the tag type; we recommend to use ‘Google Publisher Tag’ for now, and step over the tag options. In the final view of the wizard the ad tag(s), corresponding to the selected Ad Unit(s) will be generated, as shown in the screenshot below.

 

dfp02
 

The example shows the paths to the two tags, which we will use in the player configuration later on. Notice that three of the query parameters are covered by placeholders and should be replaced with the dedicated values.

'https://...&url=[referrer_url]&description_url=[description_url]&correlator=[timestamp]'

The url parameter indicates the address of the page where the ad will appear. So, in our case we use https://www.bitmovin.com. Please note, that the URL should be single-encoded. The description_url is the URL of the page that contains the player that is making the request; we use https://www.bitmovin.com as well. The last parameter, named correlator indicates a random number, typically the timestamp of the page view. Considering the above, the query parameters will be:

'https://...&url=https://www.bitmovin.com&description_url=https://www.bitmovin.com&correlator=1454061748879'

More information about ad tags and how the URL is compounded can be found in the related documentation.

Player Setup and Ad Related Configuration Options

Now, it’s time to prepare the player and point it to the generated tags. The Bitmovin Adaptive Streaming Player utilizes the browser built-in HTML5 Media Source Extensions (MSE) to playback multimedia content natively through the browser decoding engine.

 

portal-player
 

To get an overview of all relevant information in context of the player, click on the player overview menu item. As you can see in the above screenshot, the overview shows your personal player key, the CDN path of the player files and how many impressions have already been generated this month. You can use our fully featured player for free when used for 5,000 (or less) impressions per month. For testing and evaluation purposes, video views on localhost does not increase the impressions count. You can also use the player on multiple domains, just add them to the list of approved domains. To add a domain, enter the domain name and click the ‘Add new Domain(s)’ button, as indicated in the figure below.

 

add-domain
 

In the ‘Embed’ tab of the player part, you can download a prepared code snippet, and use this to embed the player in an existing page (or simply download a pre-configured sample page). Regardless of which option you prefer, the player configuration will be the same. You can point the player to any MPEG-DASH and/or HLS stream, by changing the source part of the configuration object of the player. To generate MPEG-DASH and HLS content, you can simply use our cloud based encoding system.

A simple configuration, using just one pre-roll ad sequence in combination with a DASH stream might look as follows:

var conf = {
  key:    'YOUR-KEY-HERE',
  source: {
    dash:           'https://path/to/your/stream.mpd'
  },
  advertising: {
    client : 'vast', 
    tag:     'http://your.ad.provider/manifest.xml'
  }
}

The key attribute takes the player license key from the player overview tab, the used DASH manifest is referenced by the DASH tag. The additional advertising attribute includes different advertising related options, which are explained in more detail in our online documentation.

Within this tutorial, we want to make use of a VAST based pre-roll ad and one additional VPAID mid-roll ad after 50% of the video has been played. The above config contains only one ad manifest, which will be played as pre-roll ad, as no other information is specified. To achieve the desired behavior, the advertising block has to be modified as follows:

{
  advertising: { 
    admessage : 'This ad will end in xx seconds',
    schedule : {
      'pre-roll-ad': {
        client    : 'vast',
        offset : 'pre',
        tag    : 'https://link.to.adserver.com/vast/preroll/ad/admanifest.xml'
      },
      'mid-roll-ad': {
        client    : 'vpaid',
        offset : '50%',
        tag    : 'https://link.to.adserver.com/vpaid/midroll/ad/admanifest.xml'
      }
    }
}




As you can see, a schedule has been added, which tells the player when the playback of the dedicated tag (and thereby its embedded ad) will start. In context of pre- and post-roll ads, a simple keyword (pre, or post) is sufficient. For mid-roll ads several different indications can be used. In this case, a percental notation is used (50%), indicating that the ad will start in the middle of the video. The tag attribute contains the path to the generated ad tags from the first part of this guide.

Once the player is initiated, the referenced pre-roll ad will be presented. As it was defined as skippable, only the first part of the entire ad has to be viewed. One can resume the content video, by pressing the ‘skip ad’ button, as indicated in the below screenshot. During ad playout, the remaining time for ad sequence is displayed instead of the progress bar. The corresponding text can be specified within the admessage attribute in the configuration of the player. Like specified within the schedule, the mid-roll ad will start automatically in the middle of the content video.

 

skippable
 

A working demo, with a similar configuration can be seen in our new video ads demo. Please make sure to disable any ad blocker, as this might hinder the playout. For more information on other possible options, please have a look at our online documentation.

The Bitmovin Adaptive Streaming Player is compatible with all commonly used ad standards, namely VPAID, VMAP, VAST and IMA. Before starting to implement an advertisement policy in the player configuration, you have to subscribe to an ads insertion service. As with Google Double Click for Publisher, the advertisement service will provide you a manifest URL. This manifest will be set as “tag” parameter in the configuration object.

In order to configure the player according to an advertising technology, the “client” parameter has to be adapted as below (this configuration object is configured for working with VPAID manifest).

Example:

advertising: {
  admessage: 'This ad will end in xx seconds',
  skipmessage: {
    countdown: 'Skip in xx seconds...',
    skip: 'SKIP'
  },
  schedule: {
    'pre-roll-ad': {
      client: 'vpaid',
      offset: 'pre',
      tag: 'http://your.vpaid.ad.provider/pre-roll-ad-manifest.xml'
    },
    'mid-roll-ad': {
      client: 'vpaid',
      offset: '50%',
      tag: 'http://your.vpaid.ad.provider/mid-roll-ad-manifest.xml'
    }
  }
}

A dedicated method of our API can be used in order to schedule dynamically some advertisements after the player has been initialized.
Example:

bitmovin.player('player').scheduleAd("//ads-Manifest.xml", "vast", {"timeOffset": "10%", 'pertistent':true});

As we see, the third parameter called “options” is an optional object that can contains many parameters. A complete list of those parameters is provided in the dedicated section of our API documentation. The time offset’s role is to define when the advertisement has to be played. It can be a percentage, a duration in seconds or the key words ‘pre’ or ‘post’ (for scheduling a pre-roll or a post-roll advertisement).

Customization of the player’s appearance

Thanks to our API, a complete customization of the player’s appearance is possible while your customers are watching an advertisement. Indeed, you can apply a custom skin, change the messages that has to be displayed during the advertisement, customize the countdown and the skip button. All the parameters related to the graphical customization in the context of advertising can be changed via the “options” object of the method scheduleAd.

Example:

bitmovin.player('player').scheduleAd("http://manifestURL.mpd", "vast",{"adMessage":"you're watching an advertisement", "skipMessage":"Skip Now", "skin":"adSkin.json"})

The customization can also be set in the player’s configuration object as below :

{
  key: 'YOUR KEY HERE',
  source:{
    dash:'https://path/to/your/stream/manifest.mpd'
  },
  advertising: { 
    admessage : 'This ad will end in xx seconds',
    skipmessage : 'skip now"',
    skin : 'http://path/to/your/skin.json'
    schedule : {
      'mid-roll-ad': {
        client    : 'vast',
        offset : '10%',
        tag    : 'https://...adManifest.xml'
      }
    }
}

Conclusion

Bitmovin’s Adaptive Steaming Player offers an easy and straightforward way to introduce pre-, mid,- and post-roll ads to any web application, using technologies like VAST, VPAID, IMA and VMAP. Within this how-to guide, we showed the configuration of our player implementation in combination with Google DFP. In general, the advertising support of our player implementation is not limited to the Google service and can be used with arbitrary ad providers.

More information on video advertising.

Back to Top
Simple Share Buttons