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

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

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

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

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

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

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