AdSense for Flowplayer

Example setup

Example code

See the code of above example

VIDEO tag based alternative

Prerequisites

Sign up to the Flowplayer AdSense partnership program to obtain your own AdSense plugin.

The ASF progranm only makese sense if you have a lot of video traffic (at least 1000 video views per day). Your content must comply with the Google policies.

Load the required IMA SDK and ASF JavaScripts in the HEAD section of your page:

<!-- the player skin -->
<link rel="stylesheet" href="https://releases.flowplayer.org/7.2.6/skin/skin.css">

<!-- jQuery is required for video tag based setups only -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Flowplayer -->
<script src="https://releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>

<!-- load the AdSense assets after the Flowplayer assets -->
<!-- the IMA SDK -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<!-- your AdSense plugin (at your server) -->
<script
    src="//releases.flowplayer.org/asf/flowplayer.com/2.1.9/asf.min.js">
</script>

The IMA SDK must be loaded exactly as above, not from your own server.

Flowplayer 6.x is required since version 1.1.0 of the plugin. From 2.1.11 on, only Flowplayer 7 is supported.

Preparation

ads.txt requirement

Google now requires you to add an ads.txt file to the root of each site using Google ads with ASF which must contain the line below:

google.com, pub-1256482085642647, RESELLER, f08c47fec0942fa0

See the Google docs for details.

Plugin initialization

The plugin is automatically loaded into each player unless disabled explicitly.

Pure JavaScript

The above example is a JavaScript installation into an empty container element:

<!-- custom styling for this demo -->
<style>
.flowplayer {
  background-color: #fff;
  background-image: url("//flowplayer.com/media/img/logo-blue.png");
  -webkit-background-size: 95%;
  -moz-background-size: 95%;
  background-size: 95%;
  -webkit-box-shadow: 0 0 20px #b8b8b8;
  -moz-box-shadow: 0 0 20px #b8b8b8;
  box-shadow: 0 0 20px #b8b8b8;
}
</style>
<div id="image_text" class="flowplayer"></div>

<!-- install the player with ima AdSense configuration -->
<script>
flowplayer("#image_text", {
  // configure the AdSense plugin for this player
  ima: {
    // must be set when testing your installation, remove or set to false in production
    // adtest: true,

    // make the Google robots crawl the current page
    description_url: location.href,

    // adverts configuration
    ads: [{
      // mandatory: schedule ad time
      // here: 3 seconds into the video
      time: 3,

      // request an advert of type image or text type
      ad_type: "image_text"
    }]
  },

  splash: true,
  ratio: 5/12,
  clip: {
    sources: [
      { type: "application/x-mpegurl",
        src:  "//edge.flowplayer.org/bauhaus.m3u8" },
      { type: "video/mp4",
        src:  "//edge.flowplayer.org/bauhaus.mp4" }
    ]
  }
});
</script>

Video tag based

flowplayer_ima.conf

The plugin provides the flowplayer_ima.conf() command for AdSense configuration of VIDEO tag based installations. As nested JSON syntax would be too complex to translate into HTML data attributes this method can be used in an inline SCRIPT tag instead. Especially useful with automatic installations where you still want to address specific players.

Automatic installation

The above example would look roughly like this in an automatic installation:

<div class="flowplayer is-splash"
     id="image_text" data-ratio="0.4167">

    <!-- configure AdSense plugin for this player inline -->
    <script>
    // use special method instead of data attributes
    flowplayer_ima.conf({
        // set adtest to false in production
        adtest: true,
        description_url: location.href,
        ads: [{
            time: 3,
            ad_type: "image_text"
        }]
    });
    </script>

    <video>
       <source type="application/x-mpegurl"
               src="//edge.flowplayer.org/bauhaus.m3u8">
       <source type="video/mp4"
               src="//edge.flowplayer.org/bauhaus.mp4">
    </video>

</div>

Manual installation with jQuery

When installing into jQuery-selected container elements the plugin can be set up either way:

  • by specifying ima in the argument to the flowplayer() jQuery plugin or
  • by scripting flowplayer_ima.conf() inside the container

Plugin configuration

The plugin configuration is simple, flexible and powerful. All settings are specified in the ima (Interactive Media Adverts) configuration object. ima can be specified

in ascending order of precedence. Higher level configuration persists, unless overridden.

option type description syntax
ima object AdSense configuration on this level (global, player, clip). JSON
HTML data attribute equivalent: as argument to a flowplayer_ima.conf()inline script
ima boolean If set to falsedisables the plugin for a specific player. JSON or HTML data attribute

Configuration options

These are the top-level plugin configuration options:

option type description
ads array A list of advert objects describing timed advert requests, one per advert, for one feature clip.
ads null Setting ads to null on the clip level explicitly prevents adverts for this clip. Useful to override defaults given on a higher level or inside the playlist array.
playlist array A list of clip level ima configuration objects, corresponding to each clip of aplaylist.
Handy forVIDEO tag based playlist installations, as alternative to inliningflowplayer_ima.conf into each playlist item.
redirects integer Maximum number of redirects to try before ad load is aborted.
Default value: 4 - higher values may affect performance.
Redirects integer Deprecated. Use redirects.
showTitle boolean v2.0.1 For Flowplayer version 6.x only. Whether to display official linear advert title while advert is shown.
Default value: false.

Ads options

Each object of an ads array accepts the following options to compose an advert request:

option type description
time integer Where the advert should be positioned.
In terms of a video advert:
0, pre-roll: before the feature begins.
Positive int, mid-roll: at int seconds into feature.
-1, post-roll: after the feature finishes.
Setting time is mandatory for an ad request to take effect.
Note: time cannot be set outside an ads list.
ad_type string The type of advert to show.
Accepts the following values:
image: image overlay
skippablevideo: trueview skippable video, only allowed at pre-roll position
standardvideo: linear video advert
bumpervideo: six second non-skippable pre-roll
text: text overlay
Types can be combined by concatenating them with underscores.
Shorthand:
video: standardvideo_skippablevideo_bumpervideo
Default value: video_image_text
adsafe string How adverts are filtered by their content.
Accepted values:
high: family safe (default)
medium: allows also non-family-safe ads (gambling, prescription drugs), but no adult content
adtest boolean Set this to true while testing your installation.
Set to false in production.
Accepts also String values "on"/"off"
cust_age integer The prefered age target group of the advert.
Accepts an exact value, and also an age group as per AdWord docs on demographic targeting.
cust_gender integer The prefered gender target group of the advert, as per AdWord docs on demographic targeting.
Accepted values:
1: male
2: female
description_url string Full URL of a HTML page describing the feature content.
Default value: site given on signup for our AdSense program.
Giving specific locations is recommended.
hl string The desired language of the ad content.
Accepts two or three letter language code.
max_ad_duration integer Maximum video advert length in milliseconds.
Default value: 100 seconds.
min_ad_duration integer Minimum video advert length in milliseconds.
Default value: 0 seconds.
overlay string / boolean Whether full-slot graphical adverts are allowed.
Accepted values are:
"any" or 0: Overlay adverts of any size are allowed. This is the default.
"bottomThird" or 1: Only bottom-third sized non-linear overlays are eligible.
sdmax integer Maximum skippable video advert length in milliseconds.
Default value: unlimited.

It is recommended to create metadata pages for each video and supply them as description_url. Please check the best practices and optimization tips.

Global JavaScript configuration

ima can be configured in the global configuration for all players on the page.

Example:

// set the description url for all adverts on this page
// to the current page
flowplayer.conf.ima = {
  description_url: location.href
};

Global options

The following option customizes all players on the page and should only be set once in the global configuration:

option type description
enableFlashAds boolean v2.1.6 Flash adverts are disabled by default. Setting this to true may lead to erratic behavior. Only use this as a measure of last resort, if your publisher has not upgraded to HTML5 compatible adverts yet, while urging them to do so.
locale string The language used by the IMA SDK for UI elements: can be any2 letter code.
Locale string Deprecated. Use locale.

Disabling the plugin

The plugin can be disabled for specific players by setting ima to false in the player configuration, or adding the the data-ima="false" attribute to the player container element.

Embed code with adverts

To offer embed code which will show adverts on the embedding site you must set up iframe embedding. Try it with this player. Its embed code will show an iframe of this page. The result can be found here.

Wordpress

If you are using our Wordpress plugin, you can upload the asf plugin assets, specify the paths in the Worpdress plugin settings, and configure ad type and time in the video settings.

CSS classes

The plugin assigns the following CSS class names to the container element as state indicators when adverts are shown: is-ad-visible while an advert is shown is-ad-nonlinear while a non-linear (bottom third overlay) advert is shown

JavaScript API

The plugin provides listeners to all events of the IMA SDK and and easy interface to the AdError event.

Ad events

All events give access to the advert via the third argument given in the callback. Information on the ad can be retrieved using the IMA methods listed here.

Example:

flowplayer(function (api) {
  // listen to the Ad LOADED event
  api.on("ima_ad_loaded", function (e, api, ad) {
    // is this a linear ad?
    console.info(ad.isLinear());
  });
});

As per above the notation of Flowplayer ad event types (names) is:

ima_ad_{lower cased IMA SDK ad event type}

Ad Error

The third argument of the ima_ad_error event gives direct access to the error message and error code:

flowplayer(function (api) {
  api.on("ima_ad_error", function (e, api, err) {
    console.info("Ad error message: " + err.message);
    console.info("Ad error code: " + err.code);
  });
});

Debugging

To turn on the IMA SDK’s debug logging to the browser console load its debug version ima3_debug.js instead of ima3.js:

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_debug.js"></script>

Known constraints

  • Does not work with manual jQuery installations into multiple containers using a class selector
  • Internet Explorer 9 and below is not supported by the Google IMA API
  • The plugin only supports the IMA3 HTML5 API
  • the Google IMA3 SDK currently does not support skippable ads on iOS

Rules

  • You must own copyright or licenses for your streams
  • Skippable video ads may only be served in the pre-roll positon (time: 0) or in mid-rolls, provided the duration of the feature exceeds the sum duration of video ads and the feature is at least 10 minutes.
  • To show a video advert the feature must have a duration of at least 1 minute.
  • To show a non-linear advert the feature must have a duration of at least 30 seconds.
  • For further details check your site and setup for compliance with the Google Adsense for Video policies.
  • If you’re in the EU, make sure to comply with the Google / EU user consent policy

As a publisher, you receive 70% of the Google payout. You will be paid monthly if your accumulated revenue exceeds EUR 100.

Note: Google pays us at the end of a month for the previous month and additionally reserves the right to chargeback within 60 days in case of invalid traffic, so there will be a 60 day delay in payout at the end of a monthly period.

If you want to use your own video ad network or your own ad server, you can use our VAST plugin.

Video advert examples

Mid-roll

<div id="standardvideo" class="flowplayer"></div>

<!-- install the player with ima AdSense configuration -->
<script>
flowplayer("#standardvideo", {
  // configure the AdSense plugin for this player
  ima: {
    // must be set when testing your installation, remove or set to false in production
    // adtest: true,

    // make the Google robots crawl the current page
    description_url: location.href,

    // adverts configuration
    ads: [{
      // mandatory: schedule ad time
      // here: 3 seconds into the video
      time: 3,

      // request an advert of type video ads
      // note: features must be at least 1 minute long for video adverts
      //       so be careful when setting this globally
      ad_type: "standardvideo"
    }]
  },

  splash: true,
  ratio: 9/16,
  clip: {
    sources: [
      { type: "application/x-mpegurl",
        src:  "//edge.flowplayer.org/drive.m3u8" },
      { type: "video/mp4",
        src:  "//edge.flowplayer.org/drive.mp4" }
    ]
  }
});
</script>

Standalone page

VIDEO tag based alternative

Skippable pre-roll

<div id="skippablevideo" class="flowplayer"></div>

<!-- install the player with ima AdSense configuration -->
<script>
flowplayer("#skippablevideo", {
  // configure the AdSense plugin for this player
  ima: {
    // must be set when testing your installation, remove or set to false in production
    // adtest: true,

    // make the Google robots crawl the current page
    description_url: location.href,

    // adverts configuration
    ads: [{
      // mandatory: schedule ad time
      // skippable video must be pre-roll
      time: 0,

      // request an advert of type youtube like skippable ads
      // note: features must be at least 1 minute long for video adverts
      //       so be careful when setting this globally
      ad_type: "skippablevideo"
    }]
  },

  splash: true,
  ratio: 9/16,
  clip: {
    sources: [
      { type: "application/x-mpegurl",
        src:  "//edge.flowplayer.org/FlowplayerHTML5forWordPress.m3u8" },
      { type: "video/mp4",
        src:  "//edge.flowplayer.org/FlowplayerHTML5forWordPress.mp4" }
    ]
  }
});
</script>

Standalone

Alternative using global configuration

Migration from version 1.1.x

  • The plugin does not require the loading of a CSS stylesheet

Migration from version 1.0.x

  • The plugin requires Flowplayer version 6.x
  • The plugin does not depend on the jQuery library anymore
  • The plugin does not need to be initialized explicitly anymore
  • The configuration is less complex and slimmed down
  • The adsense, request, and no_ads parameters are gone
  • Simply specify an ads array inside an ima configuration object and possibly some common options on a higher configuration level