بدء استخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية على HbbTV

تتيح حزمة تطوير البرامج لميزة "إدراج إعلان ديناميكي" في إعلانات الوسائط التفاعلية دمجها في تطبيق مشغّل فيديو HbbTV بحدّ أدنى من المتطلبات. وتتيح حزمة تطوير البرامج لميزة "إدراج إعلان ديناميكي" في إعلانات الوسائط التفاعلية طلب "مدير إعلانات Google" لبث إعلان على شبكة النطاق العريض ليقوم بمرافقة بث محتوى البث. يتناول هذا الدليل تحميل بيان إعلان استنادًا إلى بيانات أحداث الإعلان من بث الوسائط.

للاطّلاع على نموذج دمج مكتمل أو اتّباعه، نزِّل ملف نموذج تطبيق HbbTV المجدوَل باستخدام حزمة تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية بتنسيق HTML5. لتتوافق مع أجهزة التلفزيون القديمة، تم توفير هذا الدليل ونموذج التطبيق على GitHub بتنسيق ES5 JavaScript.

للحصول على معلومات عن الدمج مع المنصات الأخرى غير المستندة إلى HbbTV، يُرجى الاطّلاع على حِزم تطوير البرامج لإعلانات الوسائط التفاعلية.

المتطلبات الأساسية

قبل مواصلة استخدام هذا الدليل، تأكَّد من توفّر ما يلي:

  • لاستخدام ميزة "الحملات الديناميكية على شبكة البحث"، يجب أن يكون لديك حساب متقدّم على "مدير إعلانات 360" . إذا كان لديك حساب على "مدير إعلانات Google"، يُرجى التواصل مع مدير حسابك للحصول على مزيد من التفاصيل. للحصول على معلومات عن الاشتراك في "مدير إعلانات Google"، يُرجى الانتقال إلى مركز مساعدة "مدير إعلانات Google".
  • تطبيق HbbTV يتفاعل مع عنصر البث لتشغيل الوسائط لمزيد من التفاصيل، يُرجى الاطّلاع على عنصر AV لبث HbbTV.
  • إصدار dash.js متوافق مع التحميل المُسبَق ننصحك باستخدام الإصدار 4.6.0 أو إصدار أحدث.
  • خادم ويب لاستضافة التطبيق
  • بيئة اختبار تتضمّن بثًا عبر DVB للحصول على تعليمات تفصيلية حول إعداد بيئة الاختبار، يُرجى الاطّلاع على تشغيل تطبيق HbbTV.
    • بث المحتوى: يمكنك إعداد بث يتضمّن بيانات مخصّصة لجدول معلومات التطبيق (AIT). ستحتاج أيضًا إلى طريقة لإرسال بث المحتوى ليتم استقباله على التلفزيون. يمكنك استخدام مُعدِّل DVB لبث بث البث أو طرق أخرى.
    • خادم الويب: يمكنك استضافة تطبيق HbbTV على خادم ويب يمكن الوصول إليه من خلال التلفزيون.
  • حدث بث مباشر من النوع بيان عرض مجموعة إعلانية لإنشاء الحدث، يمكنك الاطّلاع على إعداد بث مباشر لميزة "إدراج إعلان ديناميكي".

إنشاء بث متوافق

يستخدم تطبيق HbbTV broadcastContainer.addStreamEventListener() للاستماع إلى أحداث بث HbbTV في بث البث. لتحميل الإعلانات وتشغيلها بشكلٍ صحيح، يجب إعداد بث البث باستخدام أنواع الأحداث التالية لمحاولة تضمين الحمولة المرتبطة بسلسلة JSON:

  • من AD_BREAK_EVENT_ANNOUNCE إلى {"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}
  • AD_BREAK_EVENT_START - {"type":"adBreakStart"}
  • AD_BREAK_EVENT_END - {"type":"adBreakEnd"}

بالنسبة إلى هذه الأحداث، أدرِج حمولة سلسلة JSON مع streamEvent.type. لتمكين loading من تحميل الإعلانات مسبقًا، يجب أن يتضمّن حدث AD_BREAK_EVENT_ANNOUNCE streamEvent.duration وstreamEvent.offset. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة الاستماع إلى أحداث بث HbbTV. لإعداد بث البث، اطّلِع على المثال التالي: بث نقل MPEG المتعدّد الترميز. لاستخدام نموذج البث، عليك تعديل عنوان URL لجدول معلومات التطبيقات لإعداد مصدر البيانات الخاص بك.

إنشاء مجموعة تقدّم حدث بث مباشر

لعرض الإعلانات على تطبيق HbbTV، تحتاج إلى مجموعة إعلانية تعرض حدث بث مباشر. للحصول على معلومات حول كيفية إعداد الفعالية، يمكنك الاطّلاع على مقالة إعداد بث مباشر لميزة "إدراج إعلان ديناميكي". للوصول إلى البث الذي أعددته، يجب أن يحتوي التطبيق على المتغيّرات التالية:

  • NETWORK_CODE: رمز شبكة "مدير الإعلانات" لطلب الإعلانات
  • CUSTOM_ASSET_KEY: مفتاح مادة العرض المخصّصة في "مدير إعلانات Google" الذي تم إنشاؤه أثناء عملية إعداد البث المباشر لإدراج الإعلانات الديناميكية.

إنشاء بنية ملف التطبيق

يستخدم هذا الدليل بنية ملف مشابهة لبنية نموذج تطبيق IMA HbbTV. للمتابعة مع هذا الدليل، تأكَّد من إنشاء الملفات التالية:

  • index.html: فهرس HTML لتطبيقك
  • ‫Style.css: تنسيق CSS لتطبيقك
  • application.js: نقطة دخول JavaScript الرئيسية تُدير حالة التشغيل والفواصل الإعلانية.
  • ‫video_player.js: يدير مشغّل dash.js المستخدَم لتشغيل الإعلانات.
  • ads_manager.js: يدير إعداد إعلانات الوسائط التفاعلية وطلب البث ومعالجة الأحداث.

ads_manager.js لإعداد حزمة تطوير البرامج لإدراج إعلان ديناميكي في إعلانات الوسائط التفاعلية تُنفِّذ المكوّنات التالية ملف SDK لتكنولوجيا "إدراج الإعلان الديناميكي" في إعلانات الوسائط التفاعلية:

  • ‫PodStreamRequest: عنصر يحدّد طلب بث إلى خوادم Google الإعلانية.
  • ‫StreamManager: عنصر يعالج أحداث إدراج الإعلانات الديناميكية وتفاعلاتها مع واجهة برمجة التطبيقات لميزة إدراج الإعلانات الديناميكية. يعالج مدير البث أيضًا إشارات التتبّع ويعيد توجيه أحداث البث والإعلانات إلى الناشر.

للحصول على تعليمات تفصيلية حول إعداد بيئة الاختبار، يُرجى الرجوع إلى هذا الدليل حول تشغيل تطبيق HbbTV.

تحميل حزمة تطوير البرامج لإدراج إعلان ديناميكي لإعلانات الوسائط التفاعلية وDASH.js

لبدء تشغيل بث الإعلانات، حمِّل حزمة تطوير البرامج لعرض الإعلانات الديناميكية (DAI) من IMA وdash.js في تطبيقك. قبل علامة application.js، أضِف dash.js وإطار عمل IMA باستخدام علامات النصوص البرمجية في index.html.

<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
index.html

بعد ذلك، أنشئ فئة غلاف مشغّل الفيديو لبدء تشغيل مشغّل dash.js والتحكّم فيه.

التالي
إعداد فئة اللاعب