Integrating VAST Ads with Player V3

Overview

The following documentation describes the VAST integration with Player V3. For documentation on the VAST integration with Player V4, see VAST and VPAID Ad Plugin.
VAST is an ad format defined by the Interactive Advertising Bureau (IAB). VAST uses XML to describe linear ads (video ads), non-linear ads (overlay ads) and companion ads. Ooyala’s V3 video player is VAST 2.0 compliant, which means that you can use the ad tags of this standard to run overlays as well as pre-, mid- and post-rolls on your video content.

To see which ad types are supported for VAST, see Player V3 VAST 2.0 Ad Integration.

After you enable VAST ads for your account, you can associate VAST ad tags with your videos. You must create an ad set in Backlot for your VAST ads, and can optionally specify embedded parameters at the page level of a Flash or HTML5 player.

Note: The VAST ad set can't handle VPAID creative, and VPAID ads module can't handle VAST responses.

Prerequisites

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

Step 1: Create an Ad Set with Backlot

For VAST ads, you always need to create an ad set with Backlot. You can create an ad set through the Backlot UI or API.

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 with the Backlot API, see Ad Sets.

Note: For Ad Source you can choose between VAST Compliant In-Stream and VAST Compliant Overlay.
The ad set fields for creating a VAST Compliant In-Stream ad set are:
  • Ad Set name: You will enter a name for the ad set.
  • Ad Tag: You will input your VAST 2.0 ad tag here (this is provided by an ad server).
  • Ad Position: Define where in the video stream the VAST ad should appear:
    • Pre-roll
    • In-stream (mid-roll): Include the time in seconds where the VAST tag will be called.
    • Post-roll
  • Tracking Pixel URL: Use this field to track impressions using your own or a 3rd-party URL.
  • Ad Frequency: Use this field to define how frequently the VAST tag should be called.
The fields for creating a VAST Compliant Overlay ad set are:
  • Ad Set name: You will enter a name for the ad set.
  • Ad Tag: You will input your VAST 2.0 ad tag here (this is provided by an ad server).
  • Tracking Pixel URL: Use this field to track impressions using your own or a 3rd-party URL.
  • Ad Position: Define the time (in seconds) where the overlay ad should appear.
  • Ad Frequency: Use this field to define how frequently the VAST tag should be called.

Step 2: Assign the Ad Set to an Asset with Backlot or the Player API

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 VAST ad set to a single asset, see Managing Monetization. For instructions on how to assign your VAST ad set to multiple assets, see Bulk Applying Settings.

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.

(Optional) Step 3: Specify Player Embedded Parameters

You can optionally specify player embedded parameters for VAST ads.
  1. 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.
  2. Specify the ad set code from your Backlot ad set with the adSetCode parameter. See Assigning an Ad Set with OO.Player.create in Player V3 (Deprecated) for instructions for how to retrieve your adSetCode.
    Note: The ad set code identifier is not available by default for security reasons. Please contact your Customer Success Manager or Technical Support to enable this feature for your account.
  3. Pass VAST ad tags to the Ooyala player using the vast and tagUrl embedded parameters. tagUrl correlates with the Ad Tag field. vast is the parent of tagUrl and any other parameters you want to specify.
  4. Specify additional embedded parameters. For the full list of parameters you can use with vast, see Ad Set Fields.
The following is an example of creating the player and using the vast parameter.
var videoPlayer = OO.Player.create("playerwrapper","embed_code",{
    height:"100%",
    width:"100%",
    adSetCode: "your Backlot ad set code",
    "vast":{
        tagUrl: "some url"
     }    
  });

Special Case: VAST Companion Ads

Inserting VAST companion ads requires additional JavaScript to render the companion and a div that represents the companion ad placement or placements on the page. To implement VAST companion ads:
  1. Include a reference to the Ooyala VAST Companion JS template file on your own server in the header of your page. You can download the template here.
  2. Add inline JS required by the ad source example.
    Note: The following call should only be made after the WILL_SHOW_COMPANION_ADS event has been fired.
    Make a call to
     ooyalaVASTCompanionAds.ooyalaShowVASTCompanionAd(<div id>, <reference to ad in ads_object>, <width>, <height>) 
    to display the companion ad.
    For example:
    <script>
        OO.Player.create(‘ooyalaplayer’, < some_embed_code > , {
            onCreate: function(player) {
                player.mb.subscribe(OO.EVENTS.WILL_SHOW_COMPANION_ADS, ‘example’, function(event, ads_objects) {
    
                    ooyalaVASTCompanionAds.ooyalaShowVASTCompanionAd(‘companion1’, ads_objects[“ads”][0], ‘120 px’, ‘60 px’);
                    ooyalaVASTCompanionAds.ooyalaShowVASTCompanionAd(‘companion2’, ads_objects[“ads”][1], ‘200 px’, ‘200 px’);
                });
            }
    
        });
    </script>
  3. Specify the companion div and its locations by including an empty div in the body of your page with the id of 'companion' where you would like the companion to appear. By default, VAST ads will display the first companion ad returned in the XML. For example,
    <div id="companion1"></div>

A full example is shown below.

<!DOCTYPE HTML>
<html lang="en">

<head>
    <title>VAST Sample</title>
    <script src="//PATH/TO/YOUR/DOMAIN/ooyala_companion_ads.js" type="text/javascript" charset="utf-8"></script>
    <script src='//player.ooyala.com/v3/player_branding_id'></script>
</head>

<body>s
    <div id='player' style='width:640px;height:360px'></div>
    <!--IMPORTANT: Don't forget to include a div element for you companion ad-->
    <div id='companion1'></div>
    <div id='OOYALA_DEBUG_CONSOLE' style='width:90%;height:400px;color:red;overflow:scroll'></div>
    <script>
        OO.ready(function() {
            window.pp = OO.Player.create('player', "embed_code", {
                onCreate: function(player) {
                    //this is the VAST specific code
                    player.mb.subscribe(OO.EVENTS.WILL_SHOW_COMPANION_ADS, 'example', function(eventName, ads_objects) {
                        ooyalaVASTCompanionAds.ooyalaShowVASTCompanionAd('companion1', ads_objects["ads"][0], '120px', '60px');
                    });
                    //end of VAST specific code
                }
            });
        });
    </script>
    <noscript>
        <div>Please enable Javascript to watch this video</div>
    </noscript>
</body>

</html>

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