תחילת העבודה עם IMA SDK ב-HbbTV

ערכת IMA DAI SDK תומכת בשילוב באפליקציית נגן וידאו מינימלית של HbbTV. ערכת IMA DAI SDK מאפשרת לביקוש של Google Ad Manager למודעות בשידור פס רחב ללוות שידור תוכן. במדריך הזה מוסבר איך לטעון מניפסט של מודעות על סמך נתוני אירועים של מודעות משידור חי.

כדי לראות או לעקוב אחרי שילוב לדוגמה שהושלם, אפשר להוריד את אפליקציית הדוגמה הליניארית של HbbTV עם IMA HTML5 DAI SDK. כדי לתמוך במכשירי טלוויזיה ישנים יותר, המדריך הזה ואפליקציית הדוגמה ב-GitHub הם ב-ES5 JavaScript.

מידע על שילוב עם פלטפורמות אחרות שאינן HbbTV זמין במאמר בנושא Interactive Media Ads SDKs.

דרישות מוקדמות

לפני שממשיכים במדריך הזה, חשוב לוודא שיש לכם את הדברים הבאים:

  • כדי להשתמש ב-IMA DAI, צריך חשבון Ad Manager 360 Advanced. אם יש לכם חשבון Ad Manager, אתם יכולים לפנות למנהל החשבון שלכם כדי לקבל פרטים נוספים. מידע על הרשמה ל-Ad Manager זמין במרכז העזרה של Ad Manager.
  • אפליקציית HbbTV שמבצעת אינטראקציה עם אובייקט השידור להפעלת מדיה. פרטים נוספים זמינים במאמר בנושא אובייקט AV של שידור HbbTV.
  • גרסה של dash.js שתומכת בטעינה מראש. מומלץ להשתמש בגרסה 4.6.0 ומעלה.
  • שרת אינטרנט לאירוח האפליקציה.
  • סביבת בדיקה עם סטרימינג של שידורי DVB. הוראות מפורטות להגדרת סביבת הבדיקה מופיעות במאמר בנושא הפעלת אפליקציית HbbTV.
    • שידור סטרימינג: הכנת שידור סטרימינג שמכיל נתונים מותאמים אישית של טבלת מידע על אפליקציה (AIT). צריך גם דרך להעביר את שידור הסטרימינג כדי שהטלוויזיה תוכל לקבל אותו. אפשר להשתמש במודולטור DVB כדי לשדר את הזרם של השידור, או בשיטות אחרות.
    • שרת אינטרנט: אירוח אפליקציית HbbTV בשרת אינטרנט שאפשר לגשת אליו מהטלוויזיה.
  • אירוע בשידור חי עם סוג מניפסט להצגת פוד. כדי ליצור את האירוע, אפשר לעיין במאמר הגדרת שידור חי ל-DAI.

יצירת סטרימינג תואם לשידור

אפליקציית HbbTV משתמשת ב-broadcastContainer.addStreamEventListener() כדי להאזין לאירועים של שידורי HbbTV בשידור שלכם. כדי שהמודעות ייטענו ויוצגו בצורה תקינה, צריך להגדיר את השידור החי עם סוגי האירועים הבאים כדי לכלול את המטען הייעודי (payload) של מחרוזת ה-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"}

באירועים האלה, צריך לכלול מטען ייעודי (payload) של מחרוזת JSON עם streamEvent.type. כדי לתמוך בטעינה מראש של מודעות, האירוע AD_BREAK_EVENT_ANNOUNCE חייב לכלול את streamEvent.duration ואת streamEvent.offset. מידע נוסף זמין במאמר בנושא האזנה לאירועים בשידורי HbbTV. כדי להגדיר את שידור הסטרימינג, אפשר לעיין בדוגמה של שידור סטרימינג מרובה ערוצים בפורמט MPEG. כדי להשתמש בזרם לדוגמה, צריך לעדכן את כתובת ה-URL של טבלת פרטי האפליקציה בהגדרת הזרם שלכם.

יצירת אירוע בשידור חי של פודקאסט

כדי להציג מודעות באפליקציית HbbTV, צריך להשתמש בשידור חי של אירוע בתוך פוד. במאמר הגדרת שידור חי להצגת מודעות DAI מוסבר איך מגדירים את האירוע. כדי לגשת לזרם שהגדרתם, האפליקציה צריכה לכלול את המשתנים הבאים:

  • NETWORK_CODE: הקוד של רשת Ad Manager לשליחת בקשות להצגת מודעות.
  • ‫CUSTOM_ASSET_KEY: מפתח הנכס המותאם אישית של Ad Manager שנוצר במהלך תהליך ההגדרה של השידור החי ל-DAI.

יצירת מבנה קובצי האפליקציה

במדריך הזה נעשה שימוש במבנה קבצים דומה לזה של אפליקציית הדוגמה של IMA HbbTV. כדי לפעול לפי ההוראות במדריך הזה, צריך ליצור את הקבצים הבאים:

  • ‫index.html: אינדקס HTML של האפליקציה.
  • ‫Style.css: סגנון CSS לאפליקציה.
  • ‫application.js: נקודת הכניסה הראשית של ה-JS. מנהל את מצב ההפעלה וההפסקות למודעות.
  • ‫video_player.js: מנהל את נגן dash.js שמשמש להפעלת מודעות.
  • ‫ads_manager.js: מנהל את ההגדרה של IMA, את בקשת השידור ואת הטיפול באירועים.

‫ads_manager.js מגדיר את IMA DAI SDK. הרכיבים הבאים מטמיעים את IMA DAI SDK:

  • ‫PodStreamRequest: אובייקט שמגדיר בקשת סטרימינג לשרתי הפרסום של Google.
  • ‫StreamManager: אובייקט שמטפל בסטרימינג של הטמעת מודעות דינמיות ובאינטראקציות עם הקצה העורפי של DAI. מנהל השידור מטפל גם בפינגים למעקב ומעביר אירועים של שידורים ומודעות לבעל האתר.

הוראות מפורטות להגדרת סביבת הבדיקה מופיעות במדריך הזה בנושא הפעלת אפליקציית HbbTV.

טוענים את IMA DAI SDK ואת DASH.js

כדי להתחיל בהפעלת שידור של מודעות בסטרימינג, צריך לטעון את IMA DAI SDK ואת dash.js באפליקציה. לפני התג application.js, מוסיפים את dash.js ואת IMA framework באמצעות תגי סקריפט ב-index.html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
<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>

בשלב הבא, יוצרים מחלקה של רכיב wrapper לנגן הווידאו כדי להפעיל ולשלוט בנגן dash.js.

הבא
הגדרת מחלקת השחקנים