オーディオ広告のポスター画像

このガイドでは、IMA HTML5 SDK を使用して動画をオーバーレイする方法を示します オーディオ広告の再生時にポスター画像が表示されます。これは、 ad_type=audio_video は VAST URL リクエストで設定されます。これにより オーディオ広告と動画広告の両方が適格かつ完全であるため、広告収益が向上する 指定することもできます詳しくは、ad_type ドキュメント および動画内のオーディオ コンテンツ をご覧ください。

このガイドの手順に沿って、基本的な IMA に必要な変更を加えます。 統合するか、このモジュールの 動画サンプルアプリのオーディオ 完全に統合できます

前提条件

• 動画広告用の IMA HTML5 SDK を実装しているアプリ。詳しくは、IMA 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);
}