# 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](https://docs-preview.optiview.dolby.com/pr-954/theoplayer/examples/ads/google-dai.md).

## 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](#smart-tvs-lg-webos-and-samsung-tizen) 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](https://docs-preview.optiview.dolby.com/pr-954/theoplayer/getting-started/sdks/web/getting-started.md).

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](https://docs-preview.optiview.dolby.com/pr-954/theoplayer/v11/api-reference/web/classes/Player).

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

```html
<!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.

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

Add a Google DAI ad configuration to the sources.

```javascript
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:

```html
<!-- 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

* [Google DAI Pre-Integration API](https://docs-preview.optiview.dolby.com/pr-954/theoplayer/v11/api-reference/web/interfaces/GoogleDAIConfiguration)
* [OptiView Player Getting Started Guide](https://docs-preview.optiview.dolby.com/pr-954/theoplayer/getting-started/sdks/web/getting-started.md)
* [Google DAI website](https://developers.google.com/interactive-media-ads)
* [Google DAI HTML5 Reference](https://developers.google.com/interactive-media-ads/docs/sdks/html5/dai)
* [Online demo](https://docs-preview.optiview.dolby.com/pr-954/theoplayer/examples/ads/google-dai.md)