> Documentation-Index > Implementation Guide

HbbTV Sample App

_{Implementation Guideline}

4. Creating an Ad Controller

This part must be considered from two different perspectives.

Technically, the Ad Controller should:

• initialize and prepare the smartclientcore
• monitor content playback updates
• schedule and start the ad delivery
• process ad events

But the Ad Controller has to consider business requirements too. For example, the Ad Controller build for the sample app should target the following goals:

• Ability to request a linear ad break at every point during playback time.
• The linear ad break can be of any size (number of ads, ad duration). This is left to the ad server's response.
• Ensure a user experience as known from the linear TV. Each ad break should be introduced and closed by a short video hint.
• Record all events triggered with the ad break and each single ad.
• No interruption of the content in case of not receiving an ad (even no flickering).

adController.js

function AdController() {
    this.facade;
    this.publisherAPI;
    this.globalConfig;
    this.environmentVars;

    this.testAdBreak;
}
AdController.prototype.createPlayerFacade;
AdController.prototype.initSmartClientCore;
AdController.prototype.initAdEventListeners;
AdController.prototype.handleAdEvent;
AdController.prototype.requestAdSlot;
AdController.prototype.getDefaultAdBreak;

// For testing purpose...
AdController.prototype.applyAdSchedule;
AdController.prototype.enableDebug;

_{Extract from the adController.js :: ad controller interface definition.}

Details about the methods and properties are documented inline of js/adController.js.

Initialization

Add the Ad Controller using a script tag in index.html before the player API source file.

--- index.html
+++ index.html

     <script type="text/javascript" crossorigin="anonymous" src="vendor_modules/smartclip/smartclientcore.min.js"></script>
     <script type="text/javascript" crossorigin="anonymous" src="js/ceHtmlFacade.js"></script>
+    <script type="text/javascript" crossorigin="anonymous" src="js/adController.js"></script>
     <script type="text/javascript" crossorigin="anonymous" src="js/main.js"></script>

_{Extract from the index.html :: Adding the ad module}

Create instances of the AdController and AdController.facade.

--- js/main.js
+++ js/main.js

     window.playerAPI = document.getElementById('myvid');
     initHBBTV = function () {
         //...
     }
     initHBBTV();

+    adController = new AdController();
+    adController.createPlayerFacade(window.playerAPI);

_{Extract from the main.js, line 90 ff. :: The sample app is being prepared for advertising.}

Next: Initializing the first Ad Break
Prev: Safeguarding the Video Player
Top: Implementation Guide Overview