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

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

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

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

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

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

לפני ששולחים בקשה להצגת מודעות וידאו ואודיו, צריך להגדיר את audioPosterImageEnabled סימון מאפיין ל-true ודגל התכונה audioPosterImageDefaultUrl כדי כתובת ה-URL של תמונת הפוסטר המוגדרת כברירת מחדל. עושים זאת עם ImaSdkSettings.setFeatureFlags() API לפני היצירה של 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);
}