הוספת תמיכה ב-Ad Breaks API למקלט אינטרנט

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

1. סקירה כללית

הלוגו של Google Cast

ב-Codelab הזה תלמדו איך ליצור אפליקציה מותאמת אישית למקלט אינטרנט שמשתמשת ב-Cast Ad Breaks API.

מה זה Google Cast?

Google Cast מאפשר למשתמשים להעביר תוכן מהנייד לטלוויזיה. לאחר מכן, המשתמשים יוכלו להשתמש במכשיר הנייד שלהם כשלט רחוק להפעלת מדיה בטלוויזיה.

ה-SDK של Google Cast מאפשר לך להרחיב את האפליקציה כדי לשלוט בטלוויזיה או במערכת אודיו. ה-SDK של Cast מאפשר להוסיף את רכיבי ממשק המשתמש הנחוצים על סמך רשימת המשימות של Google Cast Design.

רשימת המשימות לעיצוב של Google Cast זמינה כדי להפוך את חוויית המשתמש ב-Cast לפשוטה וניתנת לחיזוי בכל הפלטפורמות הנתמכות.

מה תכננת לבנות?

לאחר השלמת ה-Codelab הזה, תוכלו לבנות מקלט העברה (cast) שינצל את Break API החדש.

מה תלמדו

  • איך לכלול הפסקות VMAP ו-VAST בתוכן עבור העברה (cast)
  • איך מדלגים על קליפים
  • איך להתאים אישית את התנהגות ברירת המחדל של שבירת טקסט בזמן החיפוש

מה הדרישות כדי להצטרף לתוכנית?

  • דפדפן Google Chrome העדכני ביותר.
  • NPM
  • מכשיר Google Cast כמו Chromecast או Android TV שהוגדר עם גישה לאינטרנט.
  • טלוויזיה או צג עם קלט HDMI או Google Home Hub

ניסיון

  • נדרש ידע קודם בפיתוח אתרים.
  • ניסיון קודם ביצירת אפליקציות &של נמענים ב-Cast.

איך תשתמשו במדריך הזה?

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

איזה דירוג מגיע לדעתך לחוויה שלך עם בניית אפליקציות אינטרנט?

מתחילים בינוניים בקיאים

2. קבל את הקוד לדוגמה

אפשר להוריד למחשב את כל הקוד לדוגמה...

ופרקים את קובץ ה-ZIP שהורדתם.

3. פריסת המקלט המקומי

כדי להשתמש במקלט עם מכשיר Cast, הוא צריך להתארח במקום שבו מכשיר ה-CAST יכול להגיע אליו. אם כבר יש לכם שרת שתומך ב-https, פשוט מדלגים על ההוראות הבאות, זכרו את כתובת ה-URL, תצטרכו אותה בקטע הבא.

אם אין לך שרת זמין, אל דאגה. ניתן להתקין את node.js, מודול הצומת http-server ו-ngrok.

npm install -g http-server
npm install -g ngrok

הרצת השרת

אם משתמשים ב-http-server, צריך להיכנס למסוף ולבצע את הפעולות הבאות:

cd app-done
http-server

אמור להופיע משהו כזה:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

יש לשים לב ליציאה המקומית שבה נעשה שימוש, ולבצע את הפעולות הבאות במסוף חדש כדי לחשוף את המקלט המקומי באמצעות HTTPS באמצעות ngrok:

ngrok http 8080

פעולה זו תגדיר מנהרה ngrok בשרת ה-HTTP המקומי שלכם ותקצה לכם נקודת קצה מאובטחת מסוג HTTPS שניתן להשתמש בה בשלב הבא (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

צריך להפעיל גם את ngrok וגם את http-server למשך תקופת ה-Codelab. כל שינוי שיבוצע באופן מקומי יהיה זמין מיד.

4. רישום אפליקציה ב-Cast Developer Console

עליך לרשום את האפליקציה כדי שתהיה לך אפשרות להפעיל מקלט מותאם אישית, כפי שהוא נוצר ב-Codelab הזה, במכשירי Chromecast. לאחר רישום האפליקציה שלך, יישלח אליך מזהה אפליקציה שמשמש את אפליקציית השולח לביצוע קריאות ל-API, כמו הפעלת אפליקציה של מקלט.

תמונה של מסוף הפיתוח ל-SDK של Google Cast, כשהלחצן 'Add New Application'

לחץ על "Add new app"

תמונה של המסך 'אפליקציית המקלט החדש' האפשרות מודגשת 'האפשרות המותאמת אישית'

בחירת"מקבל ו&מותאם אישית; זה מה שאנחנו בונים.

תמונה של המסך 'New custom Receiver' שבו מופיעה כתובת URL שמישהו מקליד בשדה 'כתובת ה-URL של אפליקציית המקבל''

יש להזין את פרטי המקלט החדש, הקפידו להשתמש בכתובת ה-URL שאליה הגעתם

בקטע האחרון. רושמים את מזהה האפליקציה שהוקצה לנמען החדש.

בנוסף, עליך לרשום את מכשיר ה-Google Cast כדי שיוכל לגשת לאפליקציית המקלט לפני הפרסום. לאחר פרסום אפליקציית המקבל, היא תהיה זמינה בכל מכשירי Google Cast. לצורך השימוש ב-Codelab הזה, מומלץ לעבוד עם אפליקציית מקבלי פרסום שלא פורסמה.

תמונה של מסוף המפתחים של SDK של Google Cast, עם הדגשת הלחצן 'הוספת מכשיר חדש'

לוחצים על "הוספת מכשיר חדש"

תמונה של תיבת הדו-שיח 'Add Cast Receiver'

יש להזין את המספר הסידורי המודפס על החלק האחורי של מכשיר ה-CAST ולתת לו שם תיאורי. אפשר גם למצוא את המספר הסידורי על ידי העברת המסך ב-Chrome במהלך הגישה אל Google Cast SDK Developer Console

נדרשות 5-15 דקות עד שהמקלט והמכשיר יהיו מוכנים לבדיקה. לאחר המתנה של 5-15 דקות, יש להפעיל מחדש את מכשיר ה-CAST.

5. מכינים את פרויקט ההתחלה

לפני שמתחילים להשתמש ב-Codelab, מומלץ לעיין במדריך למפתחים בנושא מודעות, שכולל סקירה כללית של הפונקציונליות החדשה של המודעות.

עלינו להוסיף תמיכה ב-Google Cast לאפליקציה להתחלה שהורדתם. הנה כמה מונחי Google Cast שבהם נשתמש ב-Codelab הזה:

  • אפליקציית השולח פועלת במכשיר נייד או במחשב נייד,
  • אפליקציית מקלט פועלת במכשיר Google Cast.

עכשיו אפשר להתחיל לבנות את הפרויקט הראשון באמצעות עורך הטקסט המועדף עליך:

  1. בוחרים את הספרייה סמל תיקייהapp-start מהורדת הקוד לדוגמה.
  2. פתיחת הקובץ js/receiver.js ו-index.html

לתשומת ליבך, במהלך העבודה על קוד ה-Lab הזה, http-server צריך לאסוף את השינויים שביצעת. אם הוא לא מופיע, כדאי לנסות להרוג ולהפעיל מחדש את http-server.

עבור השולח שלנו, נשתמש בניפוי באגים גם במקלט CAF כדי להתחיל סשן העברה. המקלט נועד להתחיל לשדר באופן אוטומטי.

עיצוב אפליקציות

האפליקציה של המקלט מתחילה את סשן ההעברה (cast) וממתינה עד שבקשת LOAD (כלומר הפקודה להפעיל קטע מדיה) משולח מגיעה.

האפליקציה מורכבת מתצוגה ראשית אחת, שהוגדרה ב-index.html ובקובץ JavaScript אחד בשם js/receiver.js, שמכיל את כל הלוגיקה שמפעילה את המקלט.

index.html

קובץ ה-HTML הזה יכיל את כל ממשק המשתמש של אפליקציית המקבל. בינתיים הוא ריק.

geter.js

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

6. הוספת VMAP לתוכן שלך

כדי להתחיל, פותחים את שולח האינטרנט ב-Chrome. מזינים את מזהה אפליקציית המקבל שקיבלתם ב-Console Developer Console ולוחצים על 'Set''

המקבל צריך להוסיף לוגיקה כדי לכלול מודעות בתוכן.

יש להעתיק את השורה הבאה לקובץ js/receiver.js. הוא מכיל קישור לדוגמה של תג VMAP מ-DoubleClick בתוספת כמה אקראיות.

const vmapUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=" + Math.floor(Math.random() * Math.pow(10, 10));

ב-js/receiver.js file, צריך לאתר את הפונקציה playerManager.setMessageInterceptor ולהוסיף את השורות הבאות לפני השורה return request; האחרונה בפונקציה.

request.media.vmapAdsRequest = {
    adTagUrl: vmapUrl,
};

הערה: האובייקט שהוקצה ל-vmapAdsRequest שלמעלה הוא גרסה מקוצרת של אובייקט VastAdsRequest.

שומרים את השינויים ב-js/receiver.js ומתחילים סשן העברה בשולח האינטרנט. לשם כך, לוחצים לחיצה ימנית במקום כלשהו בדף ובוחרים באפשרות 'Cast&#39'. שידור המודעות צריך להתחיל לפעול מיד.

7. הוספת VAST לתוכן

אם הטמעת את קוד ה-VMAP שלמעלה, יש להגיב עליו. בהמשך נסביר איך להטמיע מודעות VAST בתוכן.

מעתיקים את המידע הבא לתוך הקובץ js/receiver.js. היא מכילה שישה קליפים להפסקה ב-VAST, בתוספת רנדומיזציה. קטעי הקליפים האלה מוקצים ל-5 מעברים. בנוסף, מצוין כל מיקום של מעבר.

const addVASTBreaksToMedia = (mediaInformation) => {
    mediaInformation.breakClips = [
        {
            id: "bc1",
            title: "bc1 (Pre-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=preroll&pod=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc2",
            title: "bc2 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc3",
            title: "bc3 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc4",
            title: "bc4 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc5",
            title: "bc5 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc6",
            title: "bc6 (Post-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=postroll&pod=3&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        }
    ];
    mediaInformation.breaks = [
        {
            id: "b1",
            breakClipIds: ["bc1"],
            position: 0
        },
        {
            id: "b2",
            breakClipIds: ["bc2"],
            position: 15
        },
        {
            id: "b3",
            breakClipIds: ["bc3","bc4"],
            position: 60
        },
        {
            id: "b4",
            breakClipIds: ["bc5"],
            position: 100
        },
        {
            id: "b5",
            breakClipIds: ["bc6"],
            position: -1
        }
    ];
};

הערה: המאפיין breakClipIds של הפסקה הוא מערך. כלומר, אפשר להקצות מספר קליפים הפסקה.

בjs/receiver.js file, יש לאתר את היירוט של ההודעה של LOAD, כלומר השורה שמתחילה ב-playerManager.setMessageInterceptor, ולהוסיף את השורה הבאה לפני השורה האחרונה של return request; בפונקציה.

addVASTBreaksToMedia(request.media);

שומרים את השינויים ב-js/receiver.js ומתחילים סשן העברה בשולח האינטרנט. לשם כך, לוחצים לחיצה ימנית במקום כלשהו בדף ובוחרים באפשרות 'Cast&#39'. שידור המודעות צריך להתחיל לפעול מיד.

8. דילוג על הפסקות למודעות

ל-CAD יש כיתה חדשה בשם BreakManager שעוזרת לכם להטמיע כללים עסקיים בהתאמה אישית להתנהגויות של מודעות. נניח שאתם רוצים לאפשר ללקוחות תקופת חסד לדלג על מודעות לאחר פרק זמן מסוים.

השולח בדוגמה שלנו לא כולל פקדי מדיה. כדאי להוסיף היסט של 10 שניות לפני תחילת השידור, לפני תחילת הסרטון.

יש למצוא את playerManager.setMessageInterceptor ולהוסיף את השורה הבאה לפני return request.

request.currentTime = 10;

שומרים את הקובץ receiver.js ומתחילים סשן העברה. התוכן אמור להיטען 10 שניות לאחר מכן, ולאחר מכן להפעיל מודעה 5 שניות לאחר מכן.

עכשיו נוסיף כלל כדי לדלג על המודעה באמצע הסרטון בנקודה של 15 שניות.

יש צורך במופע של Break Manager כדי להגדיר יורוט לטעינת ההפסקה. מעתיקים את השורה הבאה לקובץ js/receiver.js, אחרי השורות שמכילות את המשתנים context ו-playerManager.

const breakManager = playerManager.getBreakManager();

עכשיו צריך להגדיר יירוט עם כלל, כדי שלא יהיו הפסקות למודעות שמתרחשות לפני 30 שניות.

מעתיקים את המידע הבא לתוך הקובץ js/receiver.js.

breakManager.setBreakClipLoadInterceptor((breakClip, breakCtx) => {
  /** Below code will skip playback of break clips if the break position is less than 30 **/
  let breakObj = breakCtx.break;
  if(breakObj.position < 30)
    return null;
  else
    return breakClip;
});

הערה: אנחנו מחזירים כאן ערך Null עבור BreakClips שיש לדלג עליהם.

שומרים את השינויים ב-js/receiver.js ומתחילים סשן העברה בשולח האינטרנט. לשם כך, לוחצים לחיצה ימנית במקום כלשהו בדף ובוחרים באפשרות 'Cast&#39'.

השידור אמור להתחיל לפעול, אבל המערכת תדלג על חסימת המודעות שראינו לפני 15 שניות.

9. התאמה אישית של התנהגות בקשת ההפסקה

כאשר המשתמש מחפש קדימה, ההפסקה האחרונה שאינה מופעלת בין DesireFrom ו-retoTo מופעלת לפני ההפעלה של התוכן החל מהרצה אל. כשמשתמש מנסה לחזור בלי הפסקה. זוהי התנהגות ברירת המחדל של הפסקות.

כדי להתאים אישית את ההפסקות בהפעלה בחיפוש, אנחנו משתמשים ב-Break Manager. אנחנו משתמשים ב-setBreakSeekInterceptor של BreakManager כדי לציין את ההתנהגות המותאמת אישית שאנחנו רוצים. הפרמטר SetBreakSeekInterceptor מופעל בכל פעם שמתבצעת פעולת חיפוש.

אנחנו מעבירים פונקציית קריאה חוזרת ל-setBreakSeekInterceptor. פונקציית הקריאה החוזרת עוברת אובייקט שמכיל את כל המעברים בין מיקום לאותות חיפוש לבין תווי לאותות.

עכשיו צריך להגדיר יירוט עם כלל כדי להפעיל הפסקה שלא נצפתה קודם לכן בין מיקומים מ-LookFrom לבין מיקומים ב-toTo.

מעתיקים את המידע הבא לתוך הקובץ js/receiver.js.

breakManager.setBreakSeekInterceptor(function(breakSeekData) {
     /**
     *
     * Below code will play an unwatched break between seekFrom and seekTo position
     * Note: If the position of a break is less than 30 then it will be skipped due to the setBreakClipLoadInterceptor code
     */

    let breakToPlay;
    for (let i = 0; i < breakSeekData.breaks.length; i++) {
        if (!breakSeekData.breaks[i].isWatched) {
            breakToPlay = breakSeekData.breaks[i];
        }
    }
    if (breakToPlay){
        breakSeekData.breaks = [breakToPlay];
        return breakSeekData;
    }
});

הערה: אם לא מחזירים דבר או אפס, לא מתבצעת הפסקה. אם נחזיר את BreakSeekData כמו שהוא, יופעלו כל ההפסקות בין getFrom ל-toTo.

שומרים את השינויים ב-js/receiver.js ומתחילים סשן העברה בשולח האינטרנט. לשם כך, לוחצים לחיצה ימנית במקום כלשהו בדף ובוחרים באפשרות 'Cast&#39'. שידור המודעות צריך להתחיל לפעול מיד.

10. מזל טוב

עכשיו מוסבר איך להוסיף מודעות לאפליקציית המקלט באמצעות ה-SDK העדכני ביותר של מכשיר המקבל.

פרטים נוספים זמינים במדריך למפתחים של הפסקות למודעות.