mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-16 16:16:40 +03:00
Sandra Lokshina
8cb5001984
According to the agreement with the IMA team, we will no longer hide their UI during ads. Instead we will incorporate their elements into our layout. (Some of the elements they expose are legally required or business critical for partners for certain types of ads). This change replaces our skip button with the IMA one and tweaks our layout to make it fit better. We are keeping our ad counter and the 'Ad X of Y' element. Our skip button will stay in the library, and we will use it for other (non IMA) ad integrations. Change-Id: I648c6c65a34607685a409a264c2a03d74cc4d461
161 lines
5.8 KiB
Markdown
161 lines
5.8 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 v2.7+.
|
|
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="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
|
|
<!-- IMA DAI SDK (for serving Server Side ads): -->
|
|
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.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.
|
|
var container = video.ui.getControls().getControlsContainer();
|
|
adManager.initClientSide(container, video);
|
|
```
|
|
|
|
With the client side logic initialized, you can request ads at any time during
|
|
the presentation.
|
|
|
|
```js
|
|
var 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.
|
|
var container = video.ui.getControls().getControlsContainer();
|
|
adManager.initServerSide(container, video);
|
|
```
|
|
|
|
With server side logic initialized, you can request and load streams with
|
|
dynamically inserted ads.
|
|
|
|
Requesting a VOD stream:
|
|
|
|
```js
|
|
var 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:
|
|
Please note that we don't support ad tracking information for DAI LIVE streams
|
|
at the moment. It is on our road map for a future release.
|
|
|
|
```js
|
|
var 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}. |