תחילת העבודה עם 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 בשרת אינטרנט שאפשר לגשת אליו מהטלוויזיה.
  • אירוע בשידור חי עם הסוג 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 באמצעות תגי script ב-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.

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