Integrating FreeWheel Ads with Player V3

Overview

The following documentation describes the FreeWheel integration with Player V3. For documentation on the FreeWheel integration with Player V4, see FreeWheel Ad Plugin.

You can associate FreeWheel ads with your videos for V3 Flash and V3 HTML5 players. You have two options for making this association:

  1. Via player embedded parameters. Specify embedded parameters at the page level of your Flash or HTML5 player.
  2. Via ad sets. Create an ad set with one FreeWheel ad setting in Backlot which contains some movie details but does not contain the position at which an ad will play. This sets up data that then tells FreeWheel to decide which ads to play.

Each of these options is described below.

Prerequisites

Before you can use Ooyala's FreeWheel ad integration, you need to log into the Customer Portal and submit a ticket requesting to add the FreeWheel ad source to your account. Once the ad source is enabled you'll be able to create an ad set for integrating with FreeWheel.

Option 1: Integrate the FreeWheel Ad Manager with the Ooyala Player via Player Embedded Parameters

Follow the steps below to integrate FreeWheel ads with a player via player embedded parameters.
  1. Log into your Backlot account.
  2. Go to the PUBLISH page.
  3. Find the player branding name for the HTML5 or Flash player. This is the value you will include on your web page.
  4. Use the Player V3 OO.Player.create function to create the player. See Assigning an Ad Set with OO.Player.create for instructions on how to use OO.Player.create.
  5. Pass FreeWheel ad tags to the Ooyala player using the freewheel-ads-manager parameter, as shown in the example below.
  6. If you are creating an HTML5 player, provide an AdServer URL. You can use either:
    1. a page-level override "html5_ad_server".
    2. a third_party_module_parameters with a name "html5_ad_server". In the following example, we use "html5_ad_server."
  7. Set the fw_mrm_network_id on either the player third party module parameter level or at the page level.
  8. (Optional) Specify additional embedded parameters. See FreeWheel Ad Set Fields for the list of fields you can use with FreeWheel.
Note: When you work with FreeWheel ad manager, you must provide an AdServer URL for HTML5 either via a page-level override "html5_ad_server" or via third_party_module_parameters with a name "html5_ad_server".
Note: The values in the following example are only used to illustrate how to use the freewheel-ads-manager. You need to replace them with your own profiles, ids, and URLS.
<head>
<script src='http://player.ooyala.com/v3/1234fake2b914bc58e425795abf3cd6c?version=1234fake09bb8939e930f888b2b9e23627b20ea6&'></script>
<script>
    OO.ready(function() {
      var videoPlayer = OO.Player.create('container','1234Fakeoi5Xv3Dav6uuEIeVJto9Ju7R', {
        "freewheel-ads-manager": {
          // Flash-specific
        adServer : 'http://1b656.v.fwmrm.net',
          adManager : 'http://adm.fwmrm.net/p/example/AdManager.swf',
          flash_ssl_ad_server : 'https://1b656.v.fwmrm.net',
          flash_ssl_ad_manager : 'https://m.v.fwmrm.net/p/example/AdManager.swf',

   // HTML5-specific
          fw_ad_module_js: “http://adm.fwmrm.net/p/exampleprovider_live/AdManager.js",
          html5_ad_server: "http://1b656.v.fwmrm.net/ad/g/1",
   html5_ssl_ad_server: "https://1b656.v.fwmrm.net/ad/g/1",
          html5_player_profile: "123400:exampleprovider_live_html5",
          
   // Parameters that should be set on each page on the actual site
          fw_site_section_id: "EXAMPLEVIDEO_EXAMPLEVIDEO_SHOWS",
          fw_video_asset_id: 1234567,
   fw_player_profile: "123400:exampleprovider_live",
          fw_mrm_network_id: 123400
        }
      });
    });
</script>
</head>
<body>
  <div id="container" style="width:480px;height:360px;"></div>
</body>

Option 2: Integrate with FreeWheel via Ad Sets

Follow the steps below to integrate FreeWheel ads via ad sets.

  1. Create a FreeWheel ad set.

    Backlot UI: For instructions on how to create an ad set using the Backlot UI, see Creating Ad Sets for Integrating with Ad Sources.

    Backlot API: For instructions on how to create an ad set programmatically, see Ad Sets. For the Ad Source, select the FreeWheel OPF Module.

    The required ad set fields for creating a FreeWheel ad set are:
    • Ad Set name: A name for the ad set.
    • MRM network ID: Provided by your FreeWheel account.
    • Player Profile: Provided by your FreeWheel account.
    • Video Asset network ID: Provided by your FreeWheel account.
    • Site Section ID: Provided by your FreeWheel account.
    Note: The Tracking Pixel URL field is not relevant to the FreeWheel ad manager and should be left blank.
  2. Assign an ad set to an asset or multiple assets using the Backlot UI, Player API, or Backlot API.

    Backlot UI: For instructions on how to assign your FreeWheel ad set to a single asset, see Managing Monetization. For instructions on how to assign your FreeWheel ad set to multiple assets, see Bulk Applying Settings.

    Note: If the ad manager is defined using Backlot it will only apply to your Flash Players.

    Player API: With the Player API you can only associate an ad set with an asset on your web page. To associate an ad set with an asset on multiple players you must replicate the code for each player. To associate an ad set with an asset using the Player API, see Assigning Ad Sets Dynamically.

    Backlot API: With the Backlot API you can associate an ad set with an asset more concretely. That is, when you associate an asset with an ad set using the Backlot API the asset and the ad set will be paired together on any player and page you play the asset on. To associate an asset with an ad set using the Backlot API, see Associate Ad Set with Asset.

FreeWheel Ad Set Fields

The fields described here pertain to Ooyala's FreeWheel ad manager integration. The last two columns of the table note if the field is supported for Flash and/or HTML5
Note: Always check your ad source's documentation for exact meaning of a field.
Field Name Description Flash HTML5
adManager The ad manager is the location from which the player will load the FreeWheel AdManager.swf from. The value assigned to this key must be HTTP. This is a Flash-specific override, used when the site is loaded over HTTP. X  
adServer The ad server is the location from which the player will request ads from. The value assigned to this key must be HTTP. This is a Flash-specific override, used when the site is loaded over HTTP. X  
html5_ad_server The ad server is the location from which the player will request ads from. The value assigned to this key must be HTTP. This is a HTML5 player-specific override, used when the site is loaded over HTTP.   X
html5_ssl_ad_server The ad server is the location from which the player will request ads from. The value assigned to this key must be HTTPS. This is a HTML5 player-specific override, used when the site is loaded over HTTPS.   X
flash_ssl_ad_manager The ad manager is the location from which the player will load the FreeWheel AdManager.swf asset. The value assigned to this key must be HTTPS. This is a Flash-specific override, used when the site is loaded over HTTPS. X  
flash_ssl_ad_server The ad server is the location from which the player will request ads from. The value assigned to this key must be HTTPS. This is a Flash-specific override, used when the site is loaded over HTTPS. X  
fw_ad_module_js The ad module is the location from which the player will load the FreeWheel AdManager.js from. The value assigned to this key must be HTTP. This is a HTML5 player-specific override, used when the site is loaded over HTTP.   X
fw_mrm_network_id A unique identifier assigned by FreeWheel that identifies a company. Clients are assigned their own Network ID during integration, and the player passes this value to the AdManager before making an ad request. X X
fw_player_profile A set of configurations that define what ads will be playable given the player environment and framework. For example, profiles ensure that the Ad Server does not try to return Silverlight ads for a Flash player. This is set up in the back end during integration, and the correct profile for the player to set will be provided by FreeWheel. X X
fw_site_section_id

The site section tag is a string that identifies the site section, similar to the custom video ID for a video asset. This is the site section tag as specified by you in the Network Module.

While the player does not directly interact with BVI, this is the system by which the Custom Asset ID that it will supply is entered into the FreeWheel system. Consequently, the player will need access to at least some of the same CMS information so it can provide this identifier.

X X
fw_site_section_id_type Type of Site Section ID. X X
fw_site_section_network_id Unique identifier of site section network to segment ad retrieval. X X
fw_tracking_pixel_url URL for tracking pixels to monitor the delivery of your ad assets. X X
fw_video_asset_id The piece of content a user is viewing. The player will need to identify the asset to the AdManager for targeting purposes, using the custom asset ID provided via FreeWheel’s Bulk Video Ingestion (BVI).

This field can be set on the page-level or by movie metadata (configured via Backlot UI or Backlot APIs). If neither are set, the value for this field will fall back to an externalID or an embed_code (whichever is used to embed our player).

X X

FreeWheel Example

The following example illustrates the use of the FreeWheel ad manager for video assets that are played back in a Flash player.

<head>
<script src='http://player.ooyala.com/v3/1234fake2b914bc58e425795abf3cd6c?version=1234fake09bb8939e930f888b2b9e23627b20ea6'></script>
<script>
    OO.ready(function() {
      var videoPlayer = OO.Player.create('container','1234Fakeoi5Xv3Dav6uuEIeVJto9Ju7R', {
        "freewheel-ads-manager": {
          fw_ad_module_js: "http://adm.fwmrm.net/p/exampleprovider_live/AdManager.js",
          flash_ad_server: "https://1b656.v.fwmrm.net/ad/g/1",
          flash_player_profile: "112214:exampleprovider_live_html5",
          fw_player_profile: "112214:exampleprovider_live",
          fw_mrm_network_id: 123400,
          // Parameters that should be set on each page on the actual site
          fw_site_section_id: "EXAMPLEVIDEO_EXAMPLEVIDEO_SHOWS",
          fw_video_asset_id: 123FAKE
        }
      });
    });
</script>
</head>
<body>
  <div id="container" style="width:480px;height:360px;"></div>
</body>

FreeWheel Companion Ads

FreeWheel companion ads don’t use Ooyala’s standard Player V3 WILL_SHOW_COMPANION_ADS event. This is because FreeWheel itself is responsible for parsing and generating the companion ad.

Note: You can only use companion ads with JavaScript ad tags, as iFrames do not render in order on a page while JavaScript does render in order.
You can use the following values to display FreeWheel ads, including companion ads:
  fw_video_asset_id: 'ooyala_test_video_with_bvi_cuepoints',
  fw_site_section_id: 'ooyala_test_site_section',
  fw_mrm_network_id: 90750,
  fw_player_profile:'90750:ooyala_html5',
  adServer: 'http://demo.v.fwmrm.net'
  adManager: 'http://adm.fwmrm.net/p/vitest-as3/AdManager.swf',  // HTML5 specific:
  fw_ad_module_js: "http://adm.fwmrm.net/p/vitest-js/AdManager.js",
  html5_ad_server: "http://demo.v.fwmrm.net",
  html5_player_profile: "90750:ooyala_html5",      
With these values, you will also see pre-roll, mid-roll, post-roll, and overlay ads on the ad response. For a description of each field see "FreeWheel Ad Set Fields" later in this topic. In order to display companion ads, you would need to include the following HTML content on your demo:
<span id="300x250" class="_fwph" >
<form id="_fw_form_300x250" style="display:none">
<input type="hidden" name="_fw_input_300x250" id="_fw_input_300x250" value="w=300&h=250&slau=300x250&ptgt=p&flag=+cmpn"/>
</form>
<span id="_fw_container_300x250">Advertisement</span>
</span>

The following example shows the web page or client view for a FreeWheel ad.  In this example we use the FreeWheel Ad Set Field values to display FreeWheel ads, including companion ads.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <title>FreeWheel Ad Demo</title>
    <script src='http://player.ooyala.com/v3/5223f32c73414af78e8dc59988fcee6f?'></script>
</head>
<body>

    <div id='player_container' style='width:640px;height:480px'>
    </div> 

    <span id="300x250" class="_fwph" >
<form id="_fw_form_300x250" style="display:none">
<input type="hidden" name="_fw_input_300x250" id="_fw_input_300x250" value="w=300&h=250&slau=300x250&ptgt=p&flag=+cmpn"/>
</form>
<span id="_fw_container_300x250">Advertisement</span>
</span>

    </br>

    <script>

    freewheelSettings = { 
        fw_video_asset_id: 'ooyala_test_video_with_bvi_cuepoints',
        fw_site_section_id: 'ooyala_test_site_section',
        fw_mrm_network_id: 90750,
        fw_player_profile: '90750:ooyala_html5',
        adServer: 'http://demo.v.fwmrm.net',
        adManager: 'http://adm.fwmrm.net/p/vitest-as3/AdManager.swf',
                // HTML5 specific:
        fw_ad_module_js: "http://adm.fwmrm.net/p/vitest-js/AdManager.js",
        html5_ad_server: "http://demo.v.fwmrm.net",
        html5_player_profile: "90750:ooyala_html5",
    };

    var flash_player = OO.Player.create('player_container', 'RlODZyZDr93PAbk-a9fY7Phq93pA-Uwt',{
        "freewheel-ads-manager": freewheelSettings
    });
    </script>

</body>
</html>

해당 내용이 도움 되었습니까?