오디오 광고 포스터 이미지

이 가이드에서는 오디오 광고가 재생될 때 IMA HTML5 SDK를 사용하여 동영상 플레이어에 포스터 이미지를 오버레이하는 방법을 설명합니다. 이는 VAST URL 요청에 ad_type=audio_video가 설정된 경우에 사용해야 합니다. 이렇게 하면 오디오 광고와 동영상 광고를 모두 게재할 수 있고 완전하게 게재할 수 있으므로 광고 수익 창출이 개선됩니다. 자세한 내용은 ad_type 문서 및 오디오 인비디오 콘텐츠를 참고하세요.

이 가이드에 따라 기본 IMA 통합을 변경하거나 동영상용 오디오 샘플 앱에서 이 기능과의 전체 통합을 확인할 수 있습니다.

기본 요건

• 동영상 광고에 IMA HTML5 SDK를 구현하는 앱 자세한 내용은 IMA HTML5 시작 가이드를 참조하세요.
• 관련 오버레이 이미지 없이 오디오 광고가 게재될 때 동영상 플레이어를 오버레이하는 기본 포스터 이미지입니다. 이미지가 동영상 플레이어에 맞도록 하려면 너비가 동영상 플레이어보다 작거나 같아야 하고 높이는 동영상 플레이어보다 75픽셀 이상 작아야 합니다.

포스터 이미지 기능 사용 설정

오디오 및 동영상 광고를 요청하기 전에 audioPosterImageEnabled 기능 플래그를 true로, audioPosterImageDefaultUrl 기능 플래그를 기본 포스터 이미지 URL로 설정합니다. AdDisplayContainer를 만들기 전에 ImaSdkSettings.setFeatureFlags() API를 사용하여 이 작업을 실행합니다. 이 속성을 설정하고 오디오 광고가 재생 중이면 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);
}