選取感興趣的動態廣告解決方案
全方位服務 DAI
本指南將示範如何使用 IMA CAF DAI SDK 播放 DAI 串流。如要查看或按照完成的整合範例操作,請下載範例。
使用本指南前,請務必先熟悉 Chromecast 應用程式架構的 Web Receiver 通訊協定。本指南假設您對 CAF 接收器概念有基本認識,例如訊息攔截器和 mediaInformation
物件,以及熟悉如何使用 Cast 指揮中心工具模擬 CAF 傳送器。
您必須擁有 Ad Manager 360 帳戶,才能使用 IMA DAI。如果您有 Ad Manager 帳戶,請與客戶經理聯絡以瞭解詳情。如要瞭解如何註冊 Ad Manager,請前往 Ad Manager 說明中心。
如要瞭解如何整合其他平台,或使用 IMA 用戶端 SDK,請參閱「互動式媒體廣告 SDK」。
CAF DAI 總覽
使用 IMA CAF DAI SDK 實作 DAI 涉及兩個主要元件,如本指南所示:
StreamRequest
:定義傳送至 Google 廣告伺服器的串流要求的物件。串流要求主要分為兩種:LiveStreamRequest
:指定素材資源金鑰、選用的 API 金鑰,以及其他選用參數。VODStreamRequest
:指定 內容來源 ID、影片 ID 和選用的 API 鍵,以及其他選用參數。
StreamManager
:這個物件會處理影片串流與 IMA DAI SDK 之間的通訊,例如觸發追蹤 ping 和將串流事件轉送給發布商。
必要條件
- Cast 開發人員控制台帳戶,且已註冊測試裝置。
- 已在 Cast 開發人員控制台中註冊的代管 網頁接收器應用程式,可修改為代管本指南提供的程式碼。
- 已設定為使用網頁接收器應用程式的傳送應用程式。本範例使用 投放指令和控制工具做為傳送器。
設定傳送者的 MediaInfo 物件
首先,請設定傳送端應用程式的 MediaInfo 物件,納入下列欄位:
contentId
|
這個媒體項目的專屬 ID | |
contentUrl
|
如果 DAI StreamRequest 因任何原因失敗,系統會載入備用串流網址 | |
streamType
|
針對直播串流,這個值應設為 `LIVE`。針對隨選影片串流,這個值應設為 `BUFFERED` | |
customData
|
assetKey
|
僅限直播。識別要載入的直播 |
contentSourceId
|
僅限 VOD 串流。找出含有要求串流的媒體動態饋給。 | |
videoId
|
僅限 VOD 串流。在指定的媒體動態饋給中,指出要求的串流。 | |
ApiKey
|
可選的 API 金鑰,可能需要用於從 IMA DAI SDK 擷取串流網址 | |
senderCanSkip
|
布林值,可讓接收端知道傳送裝置是否有能力顯示略過按鈕,以便支援可略過的廣告。 |
如要在投放指令和控制工具中設定這些值,請按一下「Load Media」分頁,然後將自訂載入要求類型設為 LOAD
。然後將文字區域中的 JSON 資料替換為下列 JSON 物件之一:
直播
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
隨選影片
{
"media": {
"contentId": "tos",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
"streamType": "BUFFERED",
"customData": {
"contentSourceId": "2548831",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
這個自訂載入要求物件可傳送至接收器,以便測試下列步驟。
建立基本 CAF 接收器
按照 CAF SDK 基本接收器指南建立基本網頁接收器。
接收器的程式碼應如下所示:
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
cast.framework.CastReceiverContext.getInstance().start();
</script>
</body>
</html>
匯入 IMA DAI SDK 並取得 Player Manager
新增指令碼標記,在指令碼載入 CAF 後,將 IMA DAI SDK for CAF 匯入網頁接收器。CAF DAI SDK 是永久有效的,因此不需要設定特定版本。接著,請在後續的指令碼標記中,在啟動接收器前,將接收器背景資訊和播放器管理員儲存為常數。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
castContext.start();
</script>
</body>
</html>
初始化 IMA 串流管理工具
初始化 CAF DAI SDK 的Stream Manager。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
castContext.start();
</script>
</body>
</html>
建立載入訊息攔截器
CAF DAI SDK 會使用 CAF 載入訊息攔截器提出串流要求,並將內容網址替換為最終 DAI 串流。訊息攔截器會呼叫 streamManager.requestStream(),該方法會處理設定廣告插播、要求串流,以及取代現有的 contentURL
。
載入訊息攔截器只能有一個,因此如果應用程式需要使用攔截器,您必須將所有自訂函式整合至相同的回呼。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => null;
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
this.broadcast('Stream request successful.');
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
建構串流要求
如要完成 CAF DAI 整合,您必須使用傳送端 mediaInfo
物件中包含的資料,建立串流要求。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => {
const imaRequestData = request.media.customData;
let streamRequest = null;
if (imaRequestData.assetKey) {
// Live stream
streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
streamRequest.assetKey = imaRequestData.assetKey;
} else if (imaRequestData.contentSourceId) {
// VOD stream
streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
streamRequest.contentSourceId = imaRequestData.contentSourceId;
streamRequest.videoId = imaRequestData.videoId;
}
if (streamRequest && imaRequestData.ApiKey) {
streamRequest.ApiKey = imaRequestData.ApiKey;
}
if (streamRequest && imaRequestData.senderCanSkip) {
streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
}
return streamRequest;
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
您現在可以使用 Google 的 CAF DAI SDK 要求及播放 DAI 串流。如要進一步瞭解進階 SDK 功能,請參閱其他指南,或下載接收器應用程式範例。