mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-23 17:27:16 +03:00
Theodore Abshire
655493f441
Previously, the client-side ad container was put inside the controls container, which was cleared when the UI was configured. This meant that re-configuring the UI made client-side ads go away, basically. This moves client-side ads to go into their own container, which is never re-made or uprooted, even when the DOM is recreated, in order to not break the IMA SDK. This has the side-effect of fixing a bug where client-side ads were not always cleared upon loading a new asset, and could show up unexpectedly in future playbacks. Fixes #2869 Fixes #2943 Change-Id: I3cf67b0b278764c10c6ff2f678316dc9cc85929e
161 lines
5.9 KiB
Markdown
161 lines
5.9 KiB
Markdown
# Monetization with Ads
|
|
|
|
Shaka Player provides an API for serving ads to make monetization easier
|
|
for apps. Our current API is tailored for our integration with the
|
|
[Interactive Media Ads][] SDKs, but we plan to extend our support to
|
|
other ad providers in v3.1+.
|
|
Please note that the current API is likely to undergo significant
|
|
changes as our support extends.
|
|
|
|
#### IMA SDK Integration
|
|
|
|
Shaka Player provides an integration with the [Interactive Media Ads][] SDKs.
|
|
We support both Client Side and Server Side ad insertion.
|
|
|
|
|
|
[Interactive Media Ads]: https://developers.google.com/interactive-media-ads
|
|
|
|
Both the Client Side and the Server Side ad insertion experiences are available
|
|
through the {@linksource shaka.extern.IAdManager} object on the Player.
|
|
|
|
|
|
```js
|
|
const adManager = player.getAdManager();
|
|
```
|
|
|
|
First, you'll need to include the IMA SDK(s) on your HTML page:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Shaka Player ui compiled library: -->
|
|
<script src="dist/shaka-player.ui.js"></script>
|
|
<!-- Shaka Player ui compiled library default CSS: -->
|
|
<link rel="stylesheet" type="text/css" href="dist/controls.css">
|
|
<!-- IMA HTML5 SDK (for serving Client Side ads): -->
|
|
<script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
|
|
<!-- IMA DAI SDK (for serving Server Side ads): -->
|
|
<script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
|
|
<!-- Your application source: -->
|
|
<script src="myapp.js"></script>
|
|
</head>
|
|
</html>
|
|
```
|
|
|
|
#### Streaming with Client Side Ads Insertion
|
|
|
|
To integrate Client Side ads into a presentation, you need to have your ad tag
|
|
URIs. If you're not using Shaka's UI library, you will also need to create a
|
|
`<div>` over your video element to serve as an ad container.
|
|
|
|
Start by initializing the client side logic.
|
|
With Shaka UI:
|
|
|
|
```js
|
|
const adManager = player.getAdManager();
|
|
const video = document.getElementById('video');
|
|
const ui = video['ui'];
|
|
// If you're using a non-UI build, this is the div you'll need to create
|
|
// for your layout. The ad manager will clear this div, when it unloads, so
|
|
// don't pass in a div that contains non-ad elements.
|
|
const container = video.ui.getControls().getClientSideAdContainer();
|
|
adManager.initClientSide(container, video);
|
|
```
|
|
|
|
With the client side logic initialized, you can request ads at any time during
|
|
the presentation.
|
|
|
|
```js
|
|
const adsRequest = new google.ima.AdsRequest();
|
|
// Your ad tag url should go here. We are using a sample ad tag from the
|
|
// IMA HTML5 SDK implementation guide for this tutorial.
|
|
adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
|
|
'sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&' +
|
|
'impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&' +
|
|
'cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=';
|
|
adManager.requestClientSideAds(adsRequest);
|
|
```
|
|
|
|
See: [google.ima.AdsRequest][] for details on the request object.
|
|
|
|
[google.ima.AdsRequest]: https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/reference/js/ima.AdsRequest
|
|
|
|
#### Streaming with Server Side Ads Insertion
|
|
|
|
To integrate Server Side ads into a presentation, you need to have a Google Ad
|
|
Manager account and host your streams on Google Ad Manager's servers. To find
|
|
out more about the Google Ad Manager service or sign up for an account, visit
|
|
https://admanager.google.com/
|
|
|
|
If you're not using Shaka's UI library, you will
|
|
also need to create a `<div>` over your video element to serve as an ad
|
|
container.
|
|
|
|
Start by initializing the server side logic.
|
|
With Shaka UI:
|
|
|
|
```js
|
|
const adManager = player.getAdManager();
|
|
const video = document.getElementById('video');
|
|
const ui = video['ui'];
|
|
// If you're using a non-UI build, this is the div you'll need to create
|
|
// for your layout.
|
|
const container = video.ui.getControls().getServerSideAdContainer();
|
|
adManager.initServerSide(container, video);
|
|
```
|
|
|
|
With server side logic initialized, you can request and load streams with
|
|
dynamically inserted ads.
|
|
|
|
Requesting a VOD stream:
|
|
|
|
```js
|
|
const streamRequest = new google.ima.dai.api.VODStreamRequest();
|
|
// Your stream information will go here. We are using IMA's sample stream info
|
|
// in this tutorial.
|
|
streamRequest.contentSourceId = '2528370';
|
|
streamRequest.videoId = 'tears-of-steel';
|
|
const uri = await adManager.requestServerSideStream(streamRequest);
|
|
player.load(uri);
|
|
```
|
|
|
|
`shaka.extern.IAdManager.requestServerSideStream()` returns a Promise with a
|
|
manifest URI that points to a stream with ads inserted.
|
|
|
|
See [google.ima.dai.api.VODStreamRequest][] for details on the request object.
|
|
|
|
[google.ima.dai.api.VODStreamRequest]: https://developers.google.com/interactive-media-ads/docs/sdks/html5/dai/reference/js/VODStreamRequest
|
|
|
|
Requesting a LIVE stream:
|
|
|
|
```js
|
|
const streamRequest = new google.ima.dai.api.LiveStreamRequest();
|
|
// Your stream information will go here. We are using IMA's sample stream info
|
|
// in this tutorial.
|
|
streamRequest.assetKey = 'sN_IYUG8STe1ZzhIIE_ksA';
|
|
const uri = await adManager.requestServerSideStream(streamRequest);
|
|
player.load(uri);
|
|
```
|
|
|
|
See: [google.ima.dai.api.LiveStreamRequest][] for details on the request object.
|
|
|
|
[google.ima.dai.api.LiveStreamRequest]: https://developers.google.com/interactive-media-ads/docs/sdks/html5/dai/reference/js/LiveStreamRequest
|
|
|
|
If you are using Shaka's UI library, we will automatically hook up our ad UI.
|
|
|
|
#### Custom Ad Manager Implementations
|
|
Our architecture supports custom ad manager implementations. Every ad manager
|
|
should implement the {@linksource shaka.extern.IAdManager} interface. To make
|
|
the player use a custom ad manager implementation, invoke the code to set it
|
|
before instantiating the player.
|
|
|
|
```js
|
|
// myapp.CustomAdManager is a placeholder name for your ad manager implementation.
|
|
shaka.Player.setAdManagerFactory(() => new myapp.CustomAdManager());
|
|
```
|
|
|
|
#### Continue the Tutorials
|
|
|
|
Next, check out {@tutorial plugins}.
|