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

このガイドでは、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 でオーバーレイとして使用できる画像が含まれていない場合、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);
}