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

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

כדי לראות דוגמה לשילוב מלא או לפעול לפי השלבים, אפשר להוריד את אפליקציית הדוגמה של HbbTV Linear עם 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 בשרת אינטרנט שאפשר לגשת אליו מהטלוויזיה.
  • אירוע בשידור חי עם סוג Pod serving manifest. כדי ליצור את האירוע, אפשר לעיין במאמר בנושא הגדרת שידור חי להצגת מודעות 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://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.

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