اختيار حل DAI الذي يهمّك
عرض الإعلانات المتسلسلة التي تتضمّن ميزة DAI
تعمل حزم تطوير البرامج لإعلانات الوسائط التفاعلية على تبسيط عملية دمج إعلانات الوسائط المتعددة في مواقعك الإلكترونية وتطبيقاتك.
يمكن لأدوات تطوير البرامج لإعلانات الوسائط التفاعلية طلب إعلانات من أي خادم إعلانات متوافق مع نموذج عرض إعلانات الفيديو (VAST) وإدارة تشغيل الإعلانات في تطبيقاتك.
باستخدام حِزم تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية، تتيح التطبيقات طلب بث إعلان فيديو أو محتوى لأيّ من الفيديوهات المسجّلة أو المباشرة. وعندئذٍ تعرض حزمة SDK بث فيديو مجمعًا، حتى لا تضطر إلى إدارة التبديل بين الإعلان وفيديو المحتوى داخل التطبيق.
يشرح هذا الدليل كيفية تشغيل بث مباشر لعرض مجموعة الإعلانات الديناميكية على شبكة البحث باستخدام حزمة تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية لـ "CAF".
قبل استخدام هذا الدليل، تعرَّف على بروتوكول جهاز استقبال الويب لإطار عمل جهاز Chromecast. يفترض هذا الدليل فهمًا أساسيًا لمفاهيم أجهزة استقبال CAF، مثل عناصر اعتراض الرسائل وكائنات mediaInformation، والاعتياد على استخدام أداة التحكم في البث والتحكم فيه لمحاكاة مُرسِل CAF.
لاستخدام لوحات DAI لإعلانات الوسائط التفاعلية، يجب أن تعمل مع أحد شركاء عرض الإعلانات المتسلسلة، وأن يكون لديك حساب متقدم في "مدير إعلانات Google 360". إذا كان لديك حساب على "مدير إعلانات Google"، يُرجى التواصل مع مدير الحساب للحصول على مزيد من التفاصيل. للحصول على معلومات حول الاشتراك في "مدير الإعلانات"، يُرجى الانتقال إلى مركز مساعدة "مدير الإعلانات".
للحصول على معلومات عن الدمج مع المنصات الأخرى أو حول استخدام حِزم تطوير البرامج (SDK) لإعلانات الوسائط التفاعلية من جهة العميل، اطّلِع على حِزم تطوير البرامج لإعلانات الوسائط التفاعلية.
نظرة عامة على عرض لوحة الإعلانات الديناميكية على شبكة البحث لإعلانات الوسائط التفاعلية
يتضمّن تنفيذ عرض الإعلانات المتسلسلة باستخدام حزمة تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية (IMA CAF) مكوّنَين أساسيَين، هو موضّح في هذا الدليل:
StreamRequest
: كائن يحدِّد طلب بث المحتوى إلى خوادم الإعلانات في Google. تحدد الطلبات رمز شبكة ومفتاح مادة عرض مخصّص ومفتاح واجهة برمجة تطبيقات اختياري، بالإضافة إلى معلَمات اختيارية أخرى.StreamManager
: كائن يعالج الاتصال بين بث الفيديو وحزمة تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية، مثل تنشيط إشعارات التتبع وإعادة توجيه أحداث البث إلى الناشر.
المتطلبات الأساسية
- حساب على Google Cast Developer Console لديه أجهزة اختبار مسجّلة.
- تطبيق مستقبِل الويب ومستضاف في وحدة تحكّم مطوّري برامج Cast ويمكن تعديله لاستضافة الرمز الذي يوفّره هذا الدليل.
- هو تطبيق إرسال تم إعداده لاستخدام تطبيق مستقبِل الويب. ولأغراض هذا المثال، استخدِم أداة التحكم في البث والتحكُّم فيه كمرسل.
ضبط كائنات MediaInfo للمُرسِل
أولاً، اضبط كائن MediaInfo
في تطبيق المُرسِل لتضمين الحقول التالية:
حقل | الفهرس | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
معرّف فريد لعنصر الوسائط هذا
CONTENT_ID |
||||||||||
contentUrl
|
اختياريّ. عنوان URL للبث الاحتياطي الذي يتم تشغيله في حال تعذّر تحميل بث DAI
BACKUP_STREAM_URL |
||||||||||
contentType
|
اختياريّ. Mimetype لأحداث البث الاحتياطية للمحتوى. هذا الإجراء مطلوب فقط لأحداث البث DASH.
CONTENT_STREAM_MIMETYPE |
||||||||||
streamType
|
تختلف السلسلة الحرفية أو الثابتة المستخدمة لهذه القيمة حسب النظام الأساسي للمُرسِل. | ||||||||||
customData
|
يحتوي الحقل customData على تخزين المفاتيح والقيم الإضافية للحقول الإضافية المطلوبة.
|
وفي ما يلي بعض نماذج الرموز لمساعدتك على البدء:
الويب
لضبط هذه القيم في مُرسِل للبث على الويب، عليك أولاً إنشاء عنصر
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 = {
manifestUrl: "MANIFEST_URL",
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
لضبط هذه القيم في مُرسِل للبث على الويب، عليك أولاً إنشاء عنصر MediaInfo الذي يتضمن البيانات المطلوبة، ثم تقديم طلب تحميل إلى المستلِم على الويب.
JSONObject customData = new JSONObject()?
.put("manifestUrl", "MANIFEST_URL")
.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)
لضبط هذه القيم في مُرسِل للبث على الويب، عليك أولاً إنشاء عنصر
GCKMediaInformation
يتضمّن البيانات المطلوبة، ثم إجراء طلب
تحميل إلى جهاز استقبال الويب.
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"manifestUrl": @"MANIFEST_URL",
@"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)
لضبط هذه القيم في مُرسِل للبث على الويب، عليك أولاً إنشاء عنصر
GCKMediaInformation
يتضمّن البيانات المطلوبة، ثم إجراء طلب
تحميل إلى جهاز استقبال الويب.
let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
print("invalid mediaURL")
return
}
let customData = [
"liveConfigID": "MANIFEST_URL",
"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
لتهيئة هذه القيم في أداة أمر البث والتحكم فيه، انقر على علامة التبويب "تحميل الوسائط"، واضبط نوع طلب التحميل المخصص على "تحميل". ثم استبدل بيانات JSON في مربع النص بـ JSON هذا:
{
"media": {
"contentId": "CONTENT_ID",
"contentUrl": "BACKUP_STREAM_URL",
"contentType": ""CONTENT_STREAM_MIMETYPE"",
"streamType": "LIVE",
"customData": {
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"oAuthToken": "API_KEY"
}
}
}
يمكن إرسال طلب التحميل المخصّص هذا إلى المستلِم لاختبار بقية الخطوات.
إنشاء جهاز استقبال CAF أساسي
أنشئ مستقبِل ويب مخصّصًا، كما هو موضّح في دليل جهاز الاستقبال المخصّص على الويب المخصص لحزمة تطوير البرامج (SDK) CAF.
من المفترض أن يظهر رمز المُستلِم على النحو التالي:
<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>
استورِد حزمة تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية واحصل على "مدير المشغّل"
أضِف علامة نص برمجي لاستيراد حزمة تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية لبرنامج 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).
<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، أنشئ طلب البث في أداة اعتراض رسائل 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
لإنشاء مجموعة بث عرض إعلانات المتسلسلة استنادًا إلى طلب تحميل 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 streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
const customData = castRequest.media.customData;
streamRequest.customAssetKey = customData.customAssetKey;
streamRequest.networkCode = customData.networkCode;
streamRequest.apiKey = customData.apiKey;
return streamRequest;
};
استبدال عنوان URL للمحتوى بعنوان URL للبيان ومعرّف مصدر البيانات
إذا كان طلب البث ناجحًا، استخدِم streamManager.getStreamId()
لاسترداد معرّف البث
وإدراجه في بيان URL، بدلاً من [[STREAMID]]
. بعد ذلك، استبدِل contentUrl
الحالية بـ manifestUrl
الجديدة لكي يشغّل CAF البث المباشر مع مجموعات الإعلانات المتسلسلة التي تم تركيبها.
/**
* 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.');
const media = castRequestWithPodStreamData.media;
const manifestUrl = media.customData.manifestUrl || "";
if (manifestUrl) {
console.log('Replacing the contentURL with the manifest URL and stream ID');
const streamId = streamManager.getStreamId();
castRequestWithPodStreamData.media.contentUrl = manifestUrl.replace('[[STREAMID]]', streamId);
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;
});
};
يمكنك الآن طلب مجموعات عرض الإعلانات المتسلسلة وتشغيلها باستخدام إطار عمل تطبيق Cast وحزمة تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية لمنصة CAF.