תמונת הפוסטר של מודעות אודיו

מדריך זה מדגים כיצד להשתמש ב-IMA HTML5 SDK כדי להציג את נגן הווידאו כשכבת-על יחד עם תמונת פוסטר כאשר מודעות אודיו מופעלות. יש להשתמש באפשרות הזו אם ad_type=audio_video מוגדר בבקשת כתובת ה-URL של VAST. כך אפשר לשפר את המונטיזציה של המודעות, מפני שגם מודעות אודיו וגם מודעות וידאו כשירות להצגה. אפשר לקרוא פרטים נוספים בad_type מסמכי התיעוד ובאודיו בתוכן הווידאו.

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

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

• אפליקציה שבה מוטמעת IMA HTML5 SDK למודעות וידאו. למידע נוסף, עיינו במדריך לתחילת העבודה עם IMA HTML5.
• תמונת פוסטר שמוגדרת כברירת מחדל, שמופיעה בשכבת-על של נגן הווידאו כשמוצגת מודעת אודיו בלי תמונת שכבת-על רלוונטית. כדי שהתמונה תתאים לנגן הווידאו, הרוחב שלה צריך להיות קטן מהרוחב של נגן הווידאו או שווה לו, והגובה צריך להיות לפחות 75 פיקסלים פחות מהרוחב של נגן הווידאו.

הפעלת התכונה של תמונת הפוסטר

לפני שליחת הבקשה להצגת מודעת אודיו ווידאו, הגדירו את דגל התכונות audioPosterImageEnabled כ-true ואת דגל התכונות audioPosterImageDefaultUrl ככתובת ה-URL של תמונת הפוסטר שמוגדרת כברירת מחדל. צריך לעשות זאת באמצעות ה-API ImaSdkSettings.setFeatureFlags() לפני שיוצרים את ה-AdDisplayContainer. כשהערך הזה מוגדר ומוצגת מודעת אודיו, ה-IMA יוצר שכבת-על אוטומטית של תמונה שקשורה למודעה מעל נגן הווידאו. IMA בוחרת בתמונה הנלווית הגדולה ביותר, שמתאימה לנגן הווידאו וקצרה ב-75 פיקסלים לפחות מהנגן. אם תג VAST של המודעה לא כולל תמונה שאפשר להשתמש בה כשכבת-על ב-IMA, היא תשתמש בתמונת ברירת המחדל שציינתם כשכבת-על.

function initializeIMA() {
  console.log('initializing IMA');
  adContainer = document.getElementById('ad-container');
  google.ima.settings.setFeatureFlags(
    {
      'audioPosterImageEnabled': true,
      'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
  ...
  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}