Skip to main content
Version: 11.15.0

Google Dynamic Ad Insertion (DAI) on Web

Google Dynamic Ad Insertion (DAI) is a Server-Side Ad-Insertion solution offered by Google where OptiView Player offers playback for HLS and DASH streams.

A demo can be found on the Google DAI example page.

Prerequisites​

  1. Your OptiView Player SDK needs to have the google-dai module enabled.
  2. You need to include the Google DAI JavaScript SDK as this is a dependency. See Smart TVs for the library to use on LG and Samsung TVs.

Starting Template​

The first thing you need is a valid OptiView Player setup. If you have no experience with setting up our player, we have an excellent getting started guide.

To get OptiView Player to work, you only need to do three things:

  1. Reference the OptiView Player JavaScript library (and optionally the default CSS styles).
  2. Add a container which can hold your video player with HTML.
  3. Create your player through JavaScript using our API.

A basic HTML page with a working OptiView Player could look like the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>OptiView Player Web SDK: Getting Started</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="/path/to/ui.css" />
    <!-- adds OptiView Player CSS -->
  </head>
  <body>
    <div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

    <script type="text/javascript" src="/path/to/THEOplayer.js"></script>
    <!-- adds OptiView Player library -->
    <script>
      var element = document.querySelector('.theoplayer-container');
      var player = new THEOplayer.Player(element);

      player.source = {
        sources: [
          {
            src: 'your.m3u8',
            type: 'application/x-mpegurl',
          },
        ],
      };
    </script>
  </body>
</html>

Integrating Google DAI​

Include the Google DAI JavaScript library. It must be loaded before the player is created (new THEOplayer.Player(...)), as the player picks it up when it is instantiated.

<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>

Add a Google DAI ad configuration to the sources.

const TYPES = {
  hls: 'application/vnd.apple.mpegurl',
  dash: 'application/dash+xml',
};

// example and reference tester at https://developers.google.com/interactive-media-ads/docs/sdks/html5/dai/vastinspector
const SOURCES = {
  dash: {
    vod: {
      integration: 'google-dai',
      availabilityType: 'vod',
      apiKey: null,
      contentSourceID: '<contentSourceID>',
      videoID: '<videoID>',
    },
    live: {
      integration: 'google-dai',
      availabilityType: 'live',
      apiKey: null,
      assetKey: '<assetKey>',
    },
  },
  hls: {
    vod: {
      integration: 'google-dai',
      availabilityType: 'vod',
      apiKey: null,
      contentSourceID: '<contentSourceID>',
      videoID: '<videoID>',
    },
    live: {
      integration: 'google-dai',
      availabilityType: 'live',
      apiKey: null,
      assetKey: '<assetKey>',
    },
  },
};
// Configure OptiView Player source
const MANIFEST_TYPE = 'hls'; // 'hls' / 'dash'
const AVAILABILITY_TYPE = 'vod'; // 'vod' or 'live'

player.source = {
  sources: {
    type: TYPES[MANIFEST_TYPE],
    ssai: SOURCES[MANIFEST_TYPE][AVAILABILITY_TYPE],
  },
};

Smart TVs (LG webOS and Samsung Tizen)​

Google provides a separate DAI SDK for connected TVs, dai_ctv.js, which adds Google's ad beaconing and ad UI on LG webOS and Samsung Tizen. From OptiView Player 11.11.0, you can include either library on these TVs:

  • ima3_dai.js (the standard library shown above): works on all platforms, including LG webOS and Samsung Tizen. No further changes are needed.
  • dai_ctv.js (recommended on LG webOS and Samsung Tizen): adds Google's CTV features. It requires the TV's own platform library to be included before it (and, like ima3_dai.js, before the player is created), and it only works inside a packaged TV app:
<!-- Samsung Tizen -->
<script src="$WEBAPIS/webapis/webapis.js"></script>
<script src="https://imasdk.googleapis.com/js/sdkloader/dai_ctv.js"></script>

<!-- LG webOS (webOSTV.js is shipped with the webOS TV SDK; bundle it with your app) -->
<script src="./webOSTV.js"></script>
<script src="https://imasdk.googleapis.com/js/sdkloader/dai_ctv.js"></script>

The player does not load any Google library itself; it uses the one(s) you include on the page. On LG webOS and Samsung Tizen:

  • only ima3_dai.js included: the player uses ima3_dai.js;
  • only dai_ctv.js included: the player uses dai_ctv.js;
  • both included: the player uses dai_ctv.js.

On all other platforms, include ima3_dai.js. The ssai source configuration is identical for both libraries.

note

dai_ctv.js can only be used when the platform library (webapis.js on Samsung Tizen, webOSTV.js on LG webOS) is included before it. Without it, Google's CTV SDK cannot initialize on the device.

Resources​