IMA DAI SDK תומך בשילוב באפליקציית נגן וידאו מינימלית של HbbTV. IMA DAI SDK מאפשר ל-Google Ad Manager לבקש שידור מודעות בפס רחב שילווה את שידור התוכן. במדריך הזה נסביר איך לטעון מניפסט של מודעות על סמך נתוני אירועי מודעות מהשידור.
כדי לראות או לפעול לפי דוגמה לשילוב שהושלם, אפשר להוריד את HbbTV Linear Sample App with IMA HTML5 DAI SDK. כדי לתמוך במכשירי טלוויזיה ישנים יותר, המדריך הזה והאפליקציה לדוגמה ב-GitHub נכתבו ב-JavaScript ES5.
מידע על שילוב עם פלטפורמות אחרות שאינן 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). בנוסף, צריך דרך לשדר את שידור הסטרימינג כדי שהטלוויזיה תוכל לקלוט אותו. אפשר להשתמש במ Modulator של DVB כדי לשדר את שידור הסטרימינג, או בשיטות אחרות.
- שרת אינטרנט: אירוח אפליקציית HbbTV בשרת אינטרנט שזמין לטלוויזיה.
- אירוע בשידור חי מסוג מניפסט להצגת מודעות ב-Pod. במאמר הגדרת שידור חי ל-DAI מוסבר איך יוצרים את האירוע.
יצירת שידור תואם
אפליקציית 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"}
באירועים האלה, צריך לכלול מטען ייעודי (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. מנהל הסטרימינג מטפל גם בפניות מעקב (pings) ומעביר את אירועי הסטרימינג והמודעות לבעלי התוכן הדיגיטלי.
הוראות מפורטות להגדרת סביבת הבדיקה מפורטות במדריך הזה בנושא הרצת אפליקציית HbbTV.
טעינת IMA DAI SDK ו-DASH.js
כדי להתחיל את ההפעלה של סטרימינג של מודעות שידור, צריך לטעון את IMA DAI SDK ואת 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>
בשלב הבא יוצרים סביבת נגן וידאו כדי להפעיל את נגן dash.js ולשלוט בו.