تصویر پوستر تبلیغات صوتی

این راهنما نحوه استفاده از IMA HTML5 SDK را برای پوشاندن پخش کننده ویدیوی خود با یک تصویر پوستر هنگام پخش تبلیغات صوتی نشان می دهد. این باید زمانی استفاده شود که ad_type=audio_video در درخواست URL VAST شما تنظیم شده باشد. انجام این کار امکان افزایش درآمد از تبلیغات را فراهم می کند زیرا تبلیغات صوتی و تصویری هر دو واجد شرایط و کامل هستند. برای جزئیات بیشتر به مستندات ad_type و صدا در محتوای ویدیویی مراجعه کنید.

می‌توانید همراه با این راهنما، تغییراتی را در ادغام‌های اولیه IMA انجام دهید، یا برای یکپارچگی کامل با این ویژگی ، صدا را در برنامه نمونه ویدیویی مشاهده کنید.

پیش نیازها

• برنامه ای که IMA HTML5 SDK را برای تبلیغات ویدیویی پیاده سازی می کند. برای اطلاعات بیشتر به راهنمای شروع IMA HTML5 مراجعه کنید.
• یک تصویر پوستر پیش‌فرض که وقتی یک تبلیغ صوتی بدون تصویر همپوشانی مرتبط ارائه می‌شود، پخش‌کننده ویدیو را پوشش می‌دهد. برای اینکه تصویر در داخل پخش کننده ویدیو قرار گیرد، عرض آن باید کمتر یا مساوی با پهنای پخش کننده ویدیو و ارتفاع آن حداقل 75 پیکسل کمتر از پخش کننده ویدیو باشد.

قابلیت تصویر پوستر را فعال کنید

قبل از درخواست تبلیغ صوتی و تصویری خود، پرچم ویژگی audioPosterImageEnabled را روی true و پرچم ویژگی audioPosterImageDefaultUrl را روی URL تصویر پوستر پیش فرض خود تنظیم کنید. قبل از ایجاد AdDisplayContainer ، این کار را با API ImaSdkSettings.setFeatureFlags() انجام دهید. هنگامی که این تنظیم شده است و یک تبلیغ صوتی در حال پخش است، IMA به طور خودکار تصویر مربوط به آگهی را در بالای پخش کننده ویدیو پوشش می دهد. 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);
}