ตั้งค่า IMA SDK สําหรับ DAI

เลือกโซลูชัน DAI ที่คุณสนใจ

DAI Pod Serving

IMA SDK ช่วยให้การผสานรวมโฆษณามัลติมีเดียเข้ากับเว็บไซต์และแอปของคุณเป็นเรื่องง่าย

IMA SDK สามารถขอโฆษณาจากเซิร์ฟเวอร์โฆษณาที่สอดคล้องกับ VAST และจัดการการเล่นโฆษณาในแอปได้

เมื่อใช้ IMA DAI SDK แอปจะส่งคำขอสตรีมสำหรับโฆษณาและเนื้อหาวิดีโอสำหรับเนื้อหา VOD หรือเนื้อหาสด จากนั้น SDK จะแสดงสตรีมวิดีโอที่รวมกัน เพื่อให้คุณไม่ต้องจัดการการสลับระหว่างโฆษณาและวิดีโอเนื้อหาภายในแอป

คู่มือนี้แสดงวิธีเล่นสตรีม DAI Pod Serving โดยใช้ IMA DAI SDK สำหรับ CAF

ก่อนใช้คู่มือนี้ โปรดทำความคุ้นเคยกับโปรโตคอล Web Receiver ของเฟรมเวิร์กแอปพลิเคชัน Chromecast คู่มือนี้ถือว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับแนวคิดของตัวรับ CAF เช่น ตัวสกัดกั้นข้อความ และออบเจ็กต์ mediaInformation รวมถึงคุ้นเคยกับการใช้ เครื่องมือควบคุมและสั่งงาน Cast เพื่อจำลองโปรแกรมส่ง CAF

หากต้องการใช้ IMA DAI Pod Serving คุณต้องทำงานร่วมกับพาร์ทเนอร์ Pod Serving และต้องมีบัญชี Ad Manager 360 Advanced หากมีบัญชี Ad Manager โปรดติดต่อผู้จัดการฝ่ายดูแลลูกค้าเพื่อขอรายละเอียดเพิ่มเติม ดูข้อมูลเกี่ยวกับการลงชื่อสมัครใช้ Ad Manager ได้ที่ศูนย์ช่วยเหลือของ Ad Manager

ดูข้อมูลเกี่ยวกับการผสานรวมกับแพลตฟอร์มอื่นๆ หรือการใช้ IMA SDK ฝั่งไคลเอ็นต์ได้ที่ SDK โฆษณาสื่ออินเทอร์แอกทีฟ

ภาพรวมของ DAI Pod Serving ใน IMA

การใช้ Pod Serving โดยใช้ IMA CAF DAI SDK มีคอมโพเนนต์หลัก 2 อย่าง ซึ่งจะแสดงในคู่มือนี้

  • StreamRequest: ออบเจ็กต์ที่กำหนดคำขอสตรีมไปยังเซิร์ฟเวอร์โฆษณาของ Google คำขอจะระบุรหัสเครือข่าย คีย์ชิ้นงานที่กำหนดเอง และคีย์ API (ไม่บังคับ) รวมถึงพารามิเตอร์อื่นๆ ที่ไม่บังคับ
  • StreamManager: ออบเจ็กต์ที่จัดการการสื่อสารระหว่างสตรีมวิดีโอกับ IMA DAI SDK เช่น การส่งการปิงเพื่อติดตามและการส่งต่อเหตุการณ์สตรีมไปยัง ผู้เผยแพร่โฆษณา

ข้อกำหนดเบื้องต้น

กำหนดค่าออบเจ็กต์ MediaInfo ของผู้ส่ง

ก่อนอื่น ให้กำหนดค่าออบเจ็กต์ MediaInfo ของแอปผู้ส่งให้มีช่องต่อไปนี้

ช่อง เนื้อหา
contentId ตัวระบุที่ไม่ซ้ำกันสำหรับรายการสื่อนี้

CONTENT_ID
contentUrl ไม่บังคับ URL ของสตรีมสำรองที่จะเล่นหากโหลดสตรีม DAI ไม่สำเร็จ

BACKUP_STREAM_URL

contentType ไม่บังคับ ประเภท MIME ของสตรีมข้อมูลสำรองของเนื้อหา จำเป็นสำหรับสตรีม DASH เท่านั้น

CONTENT_STREAM_MIMETYPE
streamType ค่าสตริงลิเทอรัลหรือค่าคงที่ที่ใช้สำหรับค่านี้จะแตกต่างกันไปตามแพลตฟอร์มของผู้ส่ง
customData ฟิลด์ customData มีที่เก็บคีย์-ค่าของฟิลด์เพิ่มเติม ที่จำเป็น ในตัวอย่างนี้ จะมีพารามิเตอร์สตรีม DAI ใน แอปเวอร์ชันที่ใช้งานจริง คุณอาจส่งตัวระบุแทน ซึ่งแอปตัวรับสัญญาณ Cast จะใช้เพื่อดึงพารามิเตอร์เหล่านี้ด้วยคำขอฝั่งเซิร์ฟเวอร์
ช่อง เนื้อหา
daiStreamType ประเภทของสตรีม DAI ซึ่งเป็นอย่างใดอย่างหนึ่งต่อไปนี้ "LIVE" หรือ "VOD"

DAI_STREAM_TYPE
networkCode รหัสเครือข่ายสำหรับบัญชี Google Ad Manager 360

NETWORK_CODE
customAssetKey ช่องนี้จำเป็นสำหรับไลฟ์สดเท่านั้น คีย์ของชิ้นงานที่กำหนดเองซึ่ง ระบุเหตุการณ์การแสดงโฆษณาพอดใน Google Ad Manager 360

CUSTOM_ASSET_KEY
apiKey คีย์ API ที่ไม่บังคับเพื่อดึงข้อมูลรหัสสตรีมจาก IMA DAI SDK

API_KEY

ตัวอย่างโค้ดบางส่วนที่จะช่วยคุณเริ่มต้นใช้งานมีดังนี้

เว็บ

หากต้องการกำหนดค่าเหล่านี้ในโปรแกรมส่งเว็บของ Cast ก่อนอื่นให้สร้างออบเจ็กต์ MediaInfo ที่มีข้อมูลที่จำเป็น จากนั้นส่งคำขอโหลดไปยังตัวรับเว็บ

// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "CONTENT_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
  daiStreamType: "DAI_STREAM_TYPE",
  networkCode: "NETWORK-CODE",
  customAssetKey: "CUSTOM_ASSET_KEY",
  apiKey: "API_KEY"
};

// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  () => { console.log('Load succeed'); },
  (errorCode) => { console.log('Error code: ' + errorCode); });

Android

หากต้องการกำหนดค่าเหล่านี้ในโปรแกรมส่งเว็บของ Cast ก่อนอื่นให้สร้างออบเจ็กต์ MediaInfo ที่มีข้อมูลที่จำเป็น จากนั้นส่งคำขอโหลดไปยังตัวรับเว็บ 

JSONObject customData = new JSONObject()?
  .put("daiStreamType", "DAI_STREAM_TYPE")
  .put("networkCode", "NETWORK-CODE")
  .put("customAssetKey", "CUSTOM_ASSET_KEY")
  .put("apiKey", "API_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
  .setContentUrl("BACKUP_STREAM_URL")
  .setContentType("CONTENT_STREAM_MIMETYPE")
  .setStreamType(MediaInfo.STREAM_TYPE_LIVE)
  .setCustomData(customData)
  .build();

RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());

iOS (Obj-C)

หากต้องการกำหนดค่าเหล่านี้ในโปรแกรมส่งเว็บของ Cast ก่อนอื่นให้สร้างออบเจ็กต์ GCKMediaInformation ที่มีข้อมูลที่จำเป็น จากนั้นส่งคำขอโหลดไปยังตัวรับเว็บ

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"daiStreamType": @"DAI_STREAM_TYPE",
  @"networkCode": @"NETWORK-CODE",
  @"customAssetKey": @"CUSTOM_ASSET_KEY",
  @"apiKey": @"API_KEY"};
mediaInfoBuilder.customData = customData;

GCKMediaInformationBuilder *mediaInfoBuilder =
  [[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeLive;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];

GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
  request.delegate = self;
}

iOS (Swift)

หากต้องการกำหนดค่าเหล่านี้ในโปรแกรมส่งเว็บของ Cast ก่อนอื่นให้สร้างออบเจ็กต์ GCKMediaInformation ที่มีข้อมูลที่จำเป็น จากนั้นส่งคำขอโหลดไปยังตัวรับเว็บ

let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
  print("invalid mediaURL")
  return
}

let customData = [
  "daiStreamType": "DAI_STREAM_TYPE",
  "networkCode": "NETWORK-CODE",
  "customAssetKey": "CUSTOM_ASSET_KEY",
  "region": "API_KEY"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()

guard let mediaInfo = mediaInformation else {
  print("invalid mediaInformation")
  return
}

if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia
(mediaInfo) {
  request.delegate = self
}

เครื่องมือ CAC

หากต้องการกำหนดค่าเหล่านี้ในเครื่องมือควบคุมและสั่งงาน Cast ให้คลิกแท็บโหลดสื่อ แล้วตั้งค่า ประเภทคำขอโหลดที่กำหนดเองเป็น LOAD จากนั้นแทนที่ข้อมูล JSON ในพื้นที่ข้อความ ด้วย JSON นี้

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": ""CONTENT_STREAM_MIMETYPE"",
    "streamType": "LIVE",
    "customData": {
      "daiStreamType": "DAI_STREAM_TYPE",
      "networkCode": "NETWORK-CODE",
      "customAssetKey": "CUSTOM_ASSET_KEY",
      "oAuthToken": "API_KEY"
    }
  }
}

คุณสามารถส่งคำขอโหลดที่กำหนดเองนี้ไปยังผู้รับเพื่อทดสอบขั้นตอนที่เหลือได้

สร้างเครื่องรับ CAF พื้นฐาน

สร้างตัวรับสัญญาณเว็บที่กำหนดเองตามที่แสดงในคู่มือตัวรับสัญญาณเว็บที่กำหนดเองของ CAF SDK

โค้ดของผู้รับควรมีลักษณะดังนี้

<html>
<head>
  <script
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    // ...
  </script>
</body>
</html>

นำเข้า IMA DAI SDK และรับเครื่องมือจัดการเพลเยอร์

เพิ่มแท็กสคริปต์เพื่อนำเข้า IMA DAI SDK สำหรับ CAF ไปยังตัวรับเว็บของคุณ หลังจากโหลดสคริปต์ CAF ในแท็กสคริปต์ ให้จัดเก็บบริบทของตัวรับและ ตัวจัดการเพลเยอร์เป็นค่าคงที่ก่อนที่จะเริ่มตัวรับ

<html>
<head>
  <script
      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 Stream Manager

เริ่มต้น IMA 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>

สร้าง Stream Manager Load Interceptor

ก่อนส่งรายการสื่อไปยัง CAF ให้สร้างคำขอสตรีมในตัวสกัดกั้น ข้อความ LOAD

    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    /**
     * Creates a livestream request object for a Pod Serving stream.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => { /* ... */};

    /**
     * Initates a DAI stream request for the final stream manifest.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
     */
    const createDAICastRequest = (castRequest) => {
        return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
          .then((castRequestWithPodStreamData) => {
            console.log('Successfully made DAI stream request.');
            // ...
            return castRequestWithPodStreamData;
          })
          .catch((error) => {
            console.log('Failed to make DAI stream request.');
            // CAF will automatically fallback to the content URL
            // that it can read from the castRequest object.
            return castRequest;
          });
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, createDAICastRequest);

    castContext.start();

สร้างคำขอสตรีม

ทําฟังก์ชัน createStreamRequest ให้เสร็จสมบูรณ์เพื่อสร้างสตรีม Pod Serving ตาม คําขอโหลด CAF

    /**
     * Creates a livestream request object for a Pod Serving stream.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => {
      const customData = castRequest.media.customData;
      let streamRequest;
      if (customData.daiStreamType == "LIVE") {
        streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
        streamRequest.customAssetKey = customData.customAssetKey;
        streamRequest.networkCode = customData.networkCode;
        streamRequest.apiKey = customData.apiKey;
      } else if (customData.daiStreamType == "VOD") {
        streamRequest = new google.ima.cast.dai.api.PodVodStreamRequest();
        streamRequest.networkCode = customData.networkCode;
        streamRequest.apiKey = customData.apiKey;
      }
      return streamRequest;
    };

ดึงข้อมูลไฟล์ Manifest ที่เย็บแล้วจาก VTP

หากคำขอสตรีมสำเร็จ ให้ใช้ streamManager.getStreamId() เพื่อ ดึงข้อมูลรหัสของสตรีม พาร์ทเนอร์ด้านเทคนิคของวิดีโอ (VTP) หรือเครื่องมือจัดการไฟล์ Manifest ที่กำหนดเอง จะให้วิธีการดึง URL ของไฟล์ Manifest โดยใช้ รหัสสตรีมนี้

เมื่อดึงข้อมูล URL ของไฟล์ Manifest แล้ว ให้แทนที่ contentUrl ที่มีอยู่ ด้วย manifestUrl ใหม่

สุดท้ายนี้ ก่อนที่จะส่งคืนไฟล์ Manifest ของสตรีมที่แก้ไขแล้ว ให้เรียกใช้เมธอด loadStreamMetadata ใน streamManager เพื่อแจ้งให้ IMA SDK ทราบว่าสามารถขอข้อมูลเมตาของสตรีมได้อย่างปลอดภัย การเรียกนี้จำเป็นสำหรับสตรีม VOD เท่านั้น

    /**
     * Initates a DAI stream request for the final stream manifest.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
     */
    const createDAICastRequest = (castRequest) => {
        return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
          .then((castRequestWithPodStreamData) => {
            console.log('Successfully made DAI stream request.');

            // This is a sample VTP integration. Consult your VTP documentation
            // for how to retrieve an ad-stitched stream manifest URL.
            const manifestTemplate = "https://.../manifest.m3u8?gam_stream_id=[[STREAMID]]";
            const streamId = streamManager.getStreamId();
            const manifestUrl = manifestTemplate.replace('[[STREAMID]]', streamId)
            // Assign your manifestUrl to the request's content URL.
            castRequestWithPodStreamData.media.contentUrl = manifestUrl;

            // After generating the manifest URL, VOD streams must notify the
            // IMA SDK that it is safe to request ad pod metadata.
            // This is only necessary for VOD streams. It is a no-op for
            // livestreams, so no conditional is needed.
            streamManager.loadStreamMetadata();

            return castRequestWithPodStreamData;
          })
          .catch((error) => {
            console.log('Failed to make DAI stream request.');
            // CAF will automatically fallback to the content URL
            // that it can read from the castRequest object.
            return castRequest;
          });
    };

ล้างข้อมูลชิ้นงาน IMA DAI

เมื่อขอและแสดงโฆษณาในสตรีมการแสดงโฆษณาพ็อดด้วย IMA DAI SDK เสร็จเรียบร้อยแล้ว เราขอแนะนำให้คุณล้างข้อมูลทรัพยากรทั้งหมดหลังจากเซสชันการแสดงโฆษณาพ็อดเสร็จสมบูรณ์ เรียกใช้ StreamManager.destroy() เพื่อหยุดการเล่นสตรีม หยุดการติดตามโฆษณาทั้งหมด และปล่อยชิ้นงานสตรีมที่โหลดทั้งหมด