# OptiView Ads on Web

This guide configures OptiView Ads in the OptiView Player Web SDK. Version **11.9.x or later** is required.

## Prerequisites

1. Obtain an OptiView Player license compatible with OptiView Ads from the [player portal](https://portal.theoplayer.com).

2. Retrieve the Break Manifest URL for your channel. See the [Break Manifest endpoint](https://docs-preview.optiview.dolby.com/pr-861/ads/concepts/break-manifest.md#endpoint).

3. Install the Web SDK:

   ```bash
   npm install theoplayer
   ```

4. For [Google Pod Serving](https://docs-preview.optiview.dolby.com/pr-861/ads/integrations/google/pod-serving.md), load the Google DAI library:

   ```html
   <script src="https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
   ```

## Step 1 — Enable OptiView Ads

Enable `theoads` in the player configuration:

```javascript
const player = new THEOplayer.Player(element, {
  libraryLocation: 'YOUR-LIBRARY-LOCATION',
  license: 'YOUR-LICENSE-WITH-OPTIVIEW-ADS',
  ads: { theoads: true },
});
```

## Step 2 — Configure the OptiView Ads source

Set a source that combines your media stream with a `theoads` ad description:

```javascript
player.source = {
  sources: {
    src: 'YOUR-STREAM-URL',
    type: 'application/x-mpegurl',
  },
  ads: [
    {
      integration: 'theoads',
      breakManifestUrl: 'https://us.markers.optiview.dolby.com/manifest/v1/ORG-ID/channels/CHANNEL-ID',
      networkCode: 'NETWORK-CODE',
      customAssetKey: 'CUSTOM-ASSET-KEY',
      adTagParameters: { key: 'value' },
    },
  ],
};
```

The media source itself is not important to OptiView Ads: it only needs to carry timing information (such as `EXT-X-PROGRAM-DATE-TIME`) that the player can schedule breaks against.

The ad description properties:

* `breakManifestUrl` — the channel's [Break Manifest](https://docs-preview.optiview.dolby.com/pr-861/ads/concepts/break-manifest.md) URL. This is the most important part: it is where the player learns about the channel's breaks.
* `networkCode` — your Google Ad Manager network code, for [Google Pod Serving](https://docs-preview.optiview.dolby.com/pr-861/ads/integrations/google/pod-serving.md). See the [Google Ad Manager prerequisites](https://docs-preview.optiview.dolby.com/pr-861/ads/integrations/google.md).
* `customAssetKey` — the channel's custom asset key, for [Google Pod Serving](https://docs-preview.optiview.dolby.com/pr-861/ads/integrations/google/pod-serving.md).
* `adTagParameters` — player-side [ad tag parameters](https://docs-preview.optiview.dolby.com/pr-861/ads/integrations/google/pod-serving.md#ad-tag-parameters) for Google Pod Serving. Use these for values that are only known on the device, such as device identifiers; they override the break's `assetParameters` on duplicate keys.

## Step 3 — Verify playback

Start playback, then schedule a break through the API or dashboard and confirm that the ad plays out.