Integrating FreeWheel Ads

You can integrate FreeWheel ads with Player V4 using the FreeWheel Ad Plugin (freewheel.min.js).
Note: Wherever you see url_where_hosted in sample code, replace this (in your code) with the URL that points to where the resource is hosted. For a list of Ooyala-hosted paths, see Ooyala-hosted Player V4 Resources. The URL can point to a location on the same host (internal link) or on a separate host (prefixed with http:// or https://). If you host resources yourself (see Hosting Player V4 Resources), be sure to check for any path dependencies within the files.

Enabling the Freewheel Ad Source for Your Account

Before you can use Freewheel ad integration:
  1. Log into the Ooyala Customer Portal.
  2. Submit a ticket requesting that the Freewheel ad source be added to your Ooyala account.

Options for Associating Ad Tags with Your Video Assets

Once the Freewheel ad source is enabled for your account, you can associate FreeWheel ad tags with your videos using:

Customizing the Ad Control Bar and Marquee Functionality

You can modify skin.json to customize ad control bar and ad marquee functionality for the FreeWheel ad plugin.

Loading the Freewheel Ad Plugin on a Page

Note:
  • If you use Backlot to generate your HTML embed code, and you choose the V4 HTML5 Standard Player Embed Code (recommended) option, the Freewheel plugin is automatically included and should not be explicitly added to the web page where you launch the player. For details, see Configuring Player Embed Settings in Backlot.
  • If you choose the V4 HTML5 Player Embed Code (Advanced) option in Backlot, or if you manually create the HTML embed code yourself, you need to add the Freewheel plugin to your web page so that the Freewheel plugin loads before the player is created.
For every page on which you want to use the Freewheel plugin with a player (regardless of how you associated Freewheel ads with your videos):
  1. Add the freewheel.min.js script to the page where you are loading the player. You must load this plugin after you load core.min.js.
    <script language=“javascript" src="url_where_hosted/freewheel.min.js"></script>
  2. Associate the player with the Ooyala Freewheel ad plugin by passing in freewheel-ads-manager as one of the player parameters during the player creation (OO.Player.create).
  3. Pass any global parameters. See Configuring Ad Parameters.

Option: Integrate with FreeWheel via Player Embedded Parameters

Pass FreeWheel ad tags to the Ooyala player using the freewheel-ads-manager parameter and its child parameters. See FreeWheel Ad Parameters for details.
Note: When you use the 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".

The following example shows how to use FreeWheel page-level parameters with Player V4.

Note: The values in the following example are only used to illustrate how to use the freewheel-ads-manager parameter. You need to replace them with your own profiles, ids, and URLS.
<!DOCTYPE html>
<html>
    <head>
        <title>FreeWheel Example</title>
        <!-- V4 JS core is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
        <script src="url_where_hosted/core.min.js"></script>
        <script src="url_where_hosted/other-plugin/discovery_api.min.js"></script>
        <!-- Change these html5-skin.min.css and html5-skin.js to your local build if necessary -->
        <script src="url_where_hosted/html5-skin/build/html5-skin.min.js"></script>
        <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
        <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
        <script src="url_where_hosted/video-plugin/main_html5.min.js"></script>
        <!-- Ad module -->
        <script src="url_where_hosted/freewheel.min.js"></script>
    </head>
    <body>
        <div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              "skin": {
                // Config contains the configuration setting for player skin. Change to your local config when necessary.
                "config": "url_where_hosted/skin.json"
              },
               "freewheel-ads-manager":{
                    // 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
                }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            });
        </script>
    </body>
</html>

Option: Integrate with FreeWheel via Backlot Ad Sets

  1. Create a FreeWheel ad set using:
    Note: For the Ad Source, select Freewheel. Disregard any other ad source with "Freewheel" in the name.
    The following table describes the required ad set fields for creating a FreeWheel ad set:
    Field Description
    Ad Set name You will enter 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:
    • Backlot UI: 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.
    • Player API: With the Player API, you can associate an ad set only 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. 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 on which you play the asset. To associate an asset with an ad set using the Backlot API, see Associate Ad Set with Asset.

Was this article helpful?