صورة ملصق الإعلانات الصوتية

يشرح هذا الدليل كيفية استخدام أداة تطوير برامج HTML5 لإعلانات الوسائط التفاعلية لتراكب مشغِّل الفيديو بصورة ملصق عند تشغيل الإعلانات الصوتية. ويجب استخدامه عند ضبط ad_type=audio_video في طلب عنوان URL لنموذج عرض إعلانات الفيديو (VAST). ويسمح ذلك بتحسين عملية تحقيق الربح من الإعلانات، لأنّ الإعلانات الصوتية وإعلانات الفيديو مؤهّلة وكاملة لعرضها. يمكنك الاطّلاع على ad_type المستندات والمحتوى الصوتي في الفيديو للحصول على مزيد من التفاصيل.

ويمكنك متابعة هذا الدليل وإجراء التغييرات على عمليات الدمج الأساسية لإعلانات الوسائط التفاعلية، أو الاطّلاع على نموذج تطبيق الصوت في الفيديو للحصول على دمج كامل مع هذه الميزة.

المتطلبات الأساسية

• تطبيق ينفّذ حزمة تطوير برامج HTML5 لإعلانات الوسائط التفاعلية لإعلانات الفيديو. راجِع دليل بدء استخدام HTML5 لإعلانات الوسائط التفاعلية للحصول على مزيد من المعلومات.
• هي صورة ملصق تلقائية تظهر على مشغّل الفيديو عند عرض إعلان صوتي بدون صورة مركّبة ملائمة. لكي يتم احتواء الصورة ضمن مشغّل الفيديو، يجب أن يكون عرضها أقل من عرض مشغّل الفيديو أو مساويًا له، ويجب أن يكون ارتفاعه أقل من عرض مشغّل الفيديو بمقدار 75 بكسل على الأقل.

تفعيل ميزة صورة الملصق

قبل تقديم طلب إعلان صوتي وفيديو، اضبط علامة ميزة audioPosterImageEnabled على true وعلامة ميزة audioPosterImageDefaultUrl على عنوان URL لصورة الملصق التلقائي. يمكنك إجراء ذلك باستخدام واجهة برمجة التطبيقات ImaSdkSettings.setFeatureFlags() قبل إنشاء AdDisplayContainer. عند تحديد هذه الميزة وتشغيل إعلان صوتي، تتراكب أداة IMA تلقائيًا على صورة ذات صلة بالإعلان في أعلى مشغّل الفيديو. تختار إعلانات الوسائط التفاعلية أكبر صورة إعلان مصاحب متاحة تكون ملائمة لمشغّل الفيديو وتكون أقصر من مشغّل الفيديو بمقدار 75 بكسل على الأقل. إذا كان نموذج عرض إعلانات الفيديو (VAST) لا يتضمن صورة يمكن لإعلانات الوسائط التفاعلية استخدامها كتراكب، فإن إعلانات الوسائط التفاعلية تستخدم صورتك الافتراضية المحددة كتراكب.

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);
}