# Google Dynamic Ad Insertion (DAI) on Web Google Dynamic Ad Insertion (DAI) is a Server-Side Ad-Insertion solution offered by Google where THEOplayer offers playback for HLS and DASH streams. A demo can be found at . ## Prerequisites 1. Your THEOplayer SDK needs to have the `google-dai` module enabled. 2. You need to include the Google DAI JavaScript SDK as this is a dependency. ## Starting Template The first thing you need is a valid THEOplayer setup. If you have no experience with setting up our player, we have an excellent [getting started guide](https://optiview.dolby.com/docs/theoplayer/getting-started/sdks/web/getting-started.md). To get THEOplayer to work, you only need to do three things: 1. Reference the THEOplayer 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://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/classes/Player). A basic HTML page with a working THEOplayer could like the following: ```html THEOplayer Web SDK: Getting Started
``` ## Integrating Google DAI Add a Google DAI JavaScript library. ```javascript ``` 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: '', videoID: '', }, live: { integration: 'google-dai', availabilityType: 'live', apiKey: null, assetKey: '', }, }, hls: { vod: { integration: 'google-dai', availabilityType: 'vod', apiKey: null, contentSourceID: '', videoID: '', }, live: { integration: 'google-dai', availabilityType: 'live', apiKey: null, assetKey: '', }, }, }; // Configure THEOplayer 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], }, }; ``` ## Resources * [Google DAI Pre-Integration API](https://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/interfaces/GoogleDAIConfiguration) * [THEOplayer Getting Started Guide](https://optiview.dolby.com/docs/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)