IMA SDK を設定する

プラットフォームを選択: HTML5 Android iOS tvOS

IMA SDK を使用すると、マルチメディア広告をウェブサイトやアプリに簡単に統合できます。IMA SDK は、 VAST 準拠のあらゆる広告サーバーから広告をリクエストし、アプリでの広告再生を管理できます。IMA クライアントサイド SDK を使用すると、コンテンツ動画の再生を制御しながら、SDK で広告の再生を処理できます。広告は、アプリのコンテンツ動画プレーヤーの上に配置された別の動画プレーヤーで再生されます。

このガイドでは、Android VideoView を使用してコンテンツと広告を表示する空の Android Studio プロジェクトに IMA SDK を統合する方法について説明します。完成した統合のサンプルを試すには、GitHub から BasicExample をダウンロードします。

IMA クライアントサイドの概要

IMA クライアントサイドの実装には、このガイドで説明する 4 つの主要な SDK コンポーネントが含まれます。

  • AdDisplayContainer: IMA が広告の UI 要素をレンダリングし、アクティブ ビューオープン測定などの視認性を測定する場所を指定するコンテナ オブジェクト。
  • AdsLoader: 広告をリクエストし、広告リクエスト レスポンスからのイベントを処理するオブジェクト。広告ローダは 1 つだけインスタンス化し、アプリのライフサイクル全体で再利用する必要があります。
  • AdsRequest: 広告リクエストを定義するオブジェクト。広告リクエストでは、VAST 広告タグの URL と、広告のサイズなどの追加パラメータを指定します。
  • AdsManager: 広告リクエストに対するレスポンスを含み、広告の再生を制御し、SDK によって発生した広告イベントをリッスンするオブジェクト。

前提条件

1. 新しい Android Studio プロジェクトの作成

Android Studio プロジェクトを作成する手順は次のとおりです。

  1. Android Studio を起動します。
  2. [Start a new Android Studio project] を選択します。
  3. [Choose your project] ページで、[Empty Activity] テンプレートを選択します。
  4. [次へ] をクリックします。
  5. [プロジェクトを構成する] ページで、プロジェクトに名前を付け、言語として Java を選択します。
  6. [完了] をクリックします。

2. プロジェクトに IMA SDK を追加する

まず、アプリケーション レベルの build.gradle ファイルで、依存関係セクションに IMA SDK のインポートを追加します。IMA SDK のサイズが大きいため、ここで multidex を実装して有効にします。これは、minSdkVersion が 20 以下に設定されているアプリで必要です。また、Java バージョンの互換性情報を指定してライブラリの脱糖を有効にするために、新しい compileOptions も追加します。

IMA SDK ではライブラリの脱糖化を有効にする必要があります。これを行うには、coreLibraryDesugaringEnabled true を設定し、build.gradle ファイルに coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:2.1.5' を依存関係として追加します。詳しくは、nio 仕様の脱糖で使用可能な Java 11+ API をご覧ください。

apply plugin: 'com.android.application'

android {
    namespace 'com.google.ads.interactivemedia.v3.samples.videoplayerapp'
    compileSdk 36

    // Java 17 required by Gradle 8+
    compileOptions {
        // Required by IMA SDK v3.37.0+
        coreLibraryDesugaringEnabled true

        // Java 17 required by Gradle 8+
        sourceCompatibility JavaVersion.VERSION_17
        targetCompatibility JavaVersion.VERSION_17
    }

    defaultConfig {
        applicationId "com.google.ads.interactivemedia.v3.samples.videoplayerapp"
        minSdkVersion 21
        targetSdkVersion 36
        multiDexEnabled true
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

repositories {
    google()
    mavenCentral()
}

dependencies {
    coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:2.1.5'
    implementation(platform("org.jetbrains.kotlin:kotlin-bom:1.8.0"))
    implementation 'androidx.appcompat:appcompat:1.7.1'
    implementation 'androidx.browser:browser:1.9.0'
    implementation 'androidx.media:media:1.7.0'
    implementation 'com.google.ads.interactivemedia.v3:interactivemedia:3.37.0'
}

3. アプリのレイアウトを更新する

コンテンツと広告の両方を再生する VideoView を含めるように、アプリのレイアウトを更新します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MyActivity"
    tools:ignore="MergeRootFrame">

    <RelativeLayout
        android:background="#000000"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.4"
        android:orientation="vertical"
        android:id="@+id/videoPlayerContainer" >

        <VideoView
            android:id="@+id/videoView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <ImageButton
            android:id="@+id/playButton"
            android:contentDescription="@string/play_description"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ic_action_play_over_video"
            android:background="@null" />

    </RelativeLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.6"
        android:id="@+id/videoDescription" >

        <TextView
            android:id="@+id/playerDescription"
            android:text="@string/app_name"
            android:textAlignment="center"
            android:gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingVertical="@dimen/font_size"
            android:textSize="@dimen/font_size" />
    </FrameLayout>

</LinearLayout>

4. メイン アクティビティに IMA をインポートする

IMA SDK の import ステートメントを追加します。

import android.content.Context;
import android.content.res.Configuration;
import android.media.AudioManager;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.MediaController;
import android.widget.VideoView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.ads.interactivemedia.v3.api.AdDisplayContainer;
import com.google.ads.interactivemedia.v3.api.AdErrorEvent;
import com.google.ads.interactivemedia.v3.api.AdEvent;
import com.google.ads.interactivemedia.v3.api.AdsLoader;
import com.google.ads.interactivemedia.v3.api.AdsManager;
import com.google.ads.interactivemedia.v3.api.AdsRenderingSettings;
import com.google.ads.interactivemedia.v3.api.AdsRequest;
import com.google.ads.interactivemedia.v3.api.ImaSdkFactory;
import com.google.ads.interactivemedia.v3.api.ImaSdkSettings;
import com.google.ads.interactivemedia.v3.api.player.VideoProgressUpdate;
import java.util.Arrays;

AppCompatActivity を拡張するように MyActivity クラスを更新します。AppCompatActivity クラスを使用すると、古い Android デバイスで新しいプラットフォーム機能をサポートできます。次に、アプリで使用される一連のプライベート変数を追加します。

/** Main activity. */
public class MyActivity extends AppCompatActivity {

  private static final String LOGTAG = "IMABasicSample";
  private static final String SAMPLE_VIDEO_URL =
      "https://storage.googleapis.com/gvabox/media/samples/stock.mp4";

  /**
   * IMA sample tag for a single skippable inline video ad. See more IMA sample tags at
   * https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags
   */
  private static final String SAMPLE_VAST_TAG_URL =
      "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/"
          + "single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast"
          + "&unviewed_position_start=1&env=vp&correlator=";

  // Factory class for creating SDK objects.
  private ImaSdkFactory sdkFactory;

  // The AdsLoader instance exposes the requestAds method.
  private AdsLoader adsLoader;

  // AdsManager exposes methods to control ad playback and listen to ad events.
  private AdsManager adsManager;

  // The saved content position, used to resumed content following an ad break.
  private int savedPosition = 0;

  // This sample uses a VideoView for content and ad playback. For production
  // apps, Android's Exoplayer offers a more fully featured player compared to
  // the VideoView.
  private VideoView videoPlayer;
  private MediaController mediaController;
  private VideoAdPlayerAdapter videoAdPlayerAdapter;
  private ImaSdkSettings imaSdkSettings;

5. VideoAdPlayerAdapter クラスを作成する

VideoView を使用して VideoAdPlayerAdapter クラスを作成し、IMA の VideoAdPlayer インターフェースに適合させます。このクラスはコンテンツと広告の再生を処理し、IMA SDK で使用するために動画プレーヤーが実装する必要があるメソッドのセットを含みます。

import android.media.AudioManager;
import android.media.MediaPlayer;
import android.net.Uri;
import android.util.Log;
import android.widget.VideoView;
import com.google.ads.interactivemedia.v3.api.AdPodInfo;
import com.google.ads.interactivemedia.v3.api.player.AdMediaInfo;
import com.google.ads.interactivemedia.v3.api.player.VideoAdPlayer;
import com.google.ads.interactivemedia.v3.api.player.VideoProgressUpdate;
import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

/** Example implementation of IMA's VideoAdPlayer interface. */
public class VideoAdPlayerAdapter implements VideoAdPlayer {

  private static final String LOGTAG = "IMABasicSample";
  private static final long POLLING_TIME_MS = 250;
  private static final long INITIAL_DELAY_MS = 250;
  private final VideoView videoPlayer;
  private final AudioManager audioManager;
  private final List<VideoAdPlayerCallback> videoAdPlayerCallbacks = new ArrayList<>();
  private Timer timer;
  private int adDuration;

  // The saved ad position, used to resumed ad playback following an ad click-through.
  private int savedAdPosition;
  private AdMediaInfo loadedAdMediaInfo;

  public VideoAdPlayerAdapter(VideoView videoPlayer, AudioManager audioManager) {
    this.videoPlayer = videoPlayer;
    this.videoPlayer.setOnCompletionListener(
        (MediaPlayer mediaPlayer) -> notifyImaOnContentCompleted());
    this.audioManager = audioManager;
  }

6. VideoAdPlayer メソッドをオーバーライドする

次の VideoAdPlayer メソッドをオーバーライドします。

playAd() メソッドは、コンテンツまたは広告の URL を設定し、メディアが読み込まれたら再生を開始するリスナーを設定します。

@Override
public void addCallback(VideoAdPlayerCallback videoAdPlayerCallback) {
  videoAdPlayerCallbacks.add(videoAdPlayerCallback);
}

@Override
public void loadAd(AdMediaInfo adMediaInfo, AdPodInfo adPodInfo) {
  // This simple ad loading logic works because preloading is disabled. To support
  // preloading ads your app must maintain state for the currently playing ad
  // while handling upcoming ad downloading and buffering at the same time.
  // See the IMA Android preloading guide for more info:
  // https://developers.google.com/interactive-media-ads/docs/sdks/android/client-side/preload
  loadedAdMediaInfo = adMediaInfo;
}

@Override
public void pauseAd(AdMediaInfo adMediaInfo) {
  Log.i(LOGTAG, "pauseAd");
  savedAdPosition = videoPlayer.getCurrentPosition();
  stopAdTracking();
}

@Override
public void playAd(AdMediaInfo adMediaInfo) {
  videoPlayer.setVideoURI(Uri.parse(adMediaInfo.getUrl()));

  videoPlayer.setOnPreparedListener(
      mediaPlayer -> {
        adDuration = mediaPlayer.getDuration();
        if (savedAdPosition > 0) {
          mediaPlayer.seekTo(savedAdPosition);
        }
        mediaPlayer.start();
        startAdTracking();
      });
  videoPlayer.setOnErrorListener(
      (mediaPlayer, errorType, extra) -> notifyImaSdkAboutAdError(errorType));
  videoPlayer.setOnCompletionListener(
      mediaPlayer -> {
        savedAdPosition = 0;
        notifyImaSdkAboutAdEnded();
      });
}

@Override
public void release() {
  // any clean up that needs to be done.
}

@Override
public void removeCallback(VideoAdPlayerCallback videoAdPlayerCallback) {
  videoAdPlayerCallbacks.remove(videoAdPlayerCallback);
}

@Override
public void stopAd(AdMediaInfo adMediaInfo) {
  Log.i(LOGTAG, "stopAd");
  stopAdTracking();
}

/** Returns current volume as a percent of max volume. */
@Override
public int getVolume() {
  return audioManager.getStreamVolume(AudioManager.STREAM_MUSIC)
      / audioManager.getStreamMaxVolume(AudioManager.STREAM_MUSIC);
}

7. 広告のトラッキングを設定する

広告イベントを登録するには、コンテンツと広告の進行に合わせて VideoAdPlayerCallback.onAdProgress を呼び出す必要があります。これをサポートするには、onAdProgress() を一定の間隔で呼び出すタイマーを設定します。

private void startAdTracking() {
  Log.i(LOGTAG, "startAdTracking");
  if (timer != null) {
    return;
  }
  timer = new Timer();
  TimerTask updateTimerTask =
      new TimerTask() {
        @Override
        public void run() {
          VideoProgressUpdate progressUpdate = getAdProgress();
          notifyImaSdkAboutAdProgress(progressUpdate);
        }
      };
  timer.schedule(updateTimerTask, POLLING_TIME_MS, INITIAL_DELAY_MS);
}

private void notifyImaSdkAboutAdEnded() {
  Log.i(LOGTAG, "notifyImaSdkAboutAdEnded");
  savedAdPosition = 0;
  for (VideoAdPlayer.VideoAdPlayerCallback callback : videoAdPlayerCallbacks) {
    callback.onEnded(loadedAdMediaInfo);
  }
}

private void notifyImaSdkAboutAdProgress(VideoProgressUpdate adProgress) {
  for (VideoAdPlayer.VideoAdPlayerCallback callback : videoAdPlayerCallbacks) {
    callback.onAdProgress(loadedAdMediaInfo, adProgress);
  }
}

/**
 * @param errorType Media player's error type as defined at
 *     https://cs.android.com/android/platform/superproject/+/master:frameworks/base/media/java/android/media/MediaPlayer.java;l=4335
 * @return True to stop the current ad playback.
 */
private boolean notifyImaSdkAboutAdError(int errorType) {
  Log.i(LOGTAG, "notifyImaSdkAboutAdError");

  switch (errorType) {
    case MediaPlayer.MEDIA_ERROR_UNSUPPORTED:
      Log.e(LOGTAG, "notifyImaSdkAboutAdError: MEDIA_ERROR_UNSUPPORTED");
      break;
    case MediaPlayer.MEDIA_ERROR_TIMED_OUT:
      Log.e(LOGTAG, "notifyImaSdkAboutAdError: MEDIA_ERROR_TIMED_OUT");
      break;
    default:
      break;
  }
  for (VideoAdPlayer.VideoAdPlayerCallback callback : videoAdPlayerCallbacks) {
    callback.onError(loadedAdMediaInfo);
  }
  return true;
}

public void notifyImaOnContentCompleted() {
  Log.i(LOGTAG, "notifyImaOnContentCompleted");
  for (VideoAdPlayer.VideoAdPlayerCallback callback : videoAdPlayerCallbacks) {
    callback.onContentComplete();
  }
}

private void stopAdTracking() {
  Log.i(LOGTAG, "stopAdTracking");
  if (timer != null) {
    timer.cancel();
    timer = null;
  }
}

@Override
public VideoProgressUpdate getAdProgress() {
  long adPosition = videoPlayer.getCurrentPosition();
  return new VideoProgressUpdate(adPosition, adDuration);
}

8. onCreate メソッドで IMA を開始する

onCreate メソッドをオーバーライドし、IMA を開始するために必要な変数割り当てを追加します。このステップでは、次のインスタンスを作成します。

  • ImaSdkSettings
  • AdsLoader
  • VideoAdPlayerAdapter
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_my);

  // Initialize the IMA SDK as early as possible when the app starts. If your app already
  // overrides Application.onCreate(), call this method inside the onCreate() method.
  // https://developer.android.com/topic/performance/vitals/launch-time#app-creation
  sdkFactory = ImaSdkFactory.getInstance();
  sdkFactory.initialize(this, getImaSdkSettings());

  // Create the UI for controlling the video view.
  mediaController = new MediaController(this);
  videoPlayer = findViewById(R.id.videoView);
  mediaController.setAnchorView(videoPlayer);
  videoPlayer.setMediaController(mediaController);

  // Create an ad display container that uses a ViewGroup to listen to taps.
  AudioManager audioManager = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
  videoAdPlayerAdapter = new VideoAdPlayerAdapter(videoPlayer, audioManager);

  AdDisplayContainer adDisplayContainer =
      ImaSdkFactory.createAdDisplayContainer(
          findViewById(R.id.videoPlayerContainer), videoAdPlayerAdapter);

  // Create an AdsLoader.
  adsLoader = sdkFactory.createAdsLoader(this, getImaSdkSettings(), adDisplayContainer);

再生ボタンを設定して広告をリクエストし、クリックされたら非表示にします。

// When the play button is clicked, request ads and hide the button.
View playButton = findViewById(R.id.playButton);
playButton.setOnClickListener(
    view -> {
      videoPlayer.setVideoPath(SAMPLE_VIDEO_URL);
      requestAds(SAMPLE_VAST_TAG_URL);
      view.setVisibility(View.GONE);
    });
最後に、ImaSdkSettings を取得するヘルパー メソッドを追加します。
private ImaSdkSettings getImaSdkSettings() {
  if (imaSdkSettings == null) {
    imaSdkSettings = ImaSdkFactory.getInstance().createImaSdkSettings();
    // Set any IMA SDK settings here.
  }
  return imaSdkSettings;
}

9. AdsLoader リスナーを追加する

addAdErrorListeneraddAdsLoadedListener のリスナーを追加します。AdsLoadedListenerAdsManager を作成し、AdsManager エラー リスナーを設定します。

// Add listeners for when ads are loaded and for errors.
adsLoader.addAdErrorListener(
    new AdErrorEvent.AdErrorListener() {
      /** An event raised when there is an error loading or playing ads. */
      @Override
      public void onAdError(AdErrorEvent adErrorEvent) {
        Log.i(LOGTAG, "Ad Error: " + adErrorEvent.getError().getMessage());
        resumeContent();
      }
    });
adsLoader.addAdsLoadedListener(
    adsManagerLoadedEvent -> {
      // Ads were successfully loaded, so get the AdsManager instance. AdsManager has
      // events for ad playback and errors.
      adsManager = adsManagerLoadedEvent.getAdsManager();

      // Attach event and error event listeners.
      adsManager.addAdErrorListener(
          new AdErrorEvent.AdErrorListener() {
            /** An event raised when there is an error loading or playing ads. */
            @Override
            public void onAdError(AdErrorEvent adErrorEvent) {
              Log.e(LOGTAG, "Ad Error: " + adErrorEvent.getError().getMessage());
              String universalAdIds =
                  Arrays.toString(adsManager.getCurrentAd().getUniversalAdIds());
              Log.i(
                  LOGTAG,
                  "Discarding the current ad break with universal "
                      + "ad Ids: "
                      + universalAdIds);
              adsManager.discardAdBreak();
            }
          });

10. IMA 広告イベントを処理する

AdsManager.addAdEventListener を使用して IMA 広告イベントをリッスンします。switch ステートメントを使用して、次の IMA イベントのアクションを設定します。

コード スニペットには、イベントの使用方法に関する詳細情報を含むコメントが含まれています。イベントを設定したら、AdsManager.init() を呼び出します。

  adsManager.addAdEventListener(
      new AdEvent.AdEventListener() {
        /** Responds to AdEvents. */
        @Override
        public void onAdEvent(AdEvent adEvent) {
          if (adEvent.getType() != AdEvent.AdEventType.AD_PROGRESS) {
            Log.i(LOGTAG, "Event: " + adEvent.getType());
          }
          // These are the suggested event types to handle. For full list of
          // all ad event types, see AdEvent.AdEventType documentation.
          switch (adEvent.getType()) {
            case LOADED ->
                // AdEventType.LOADED is fired when ads are ready to play.
                // This sample app uses the sample tag
                // single_preroll_skippable_ad_tag_url that requires calling
                // AdsManager.start() to start ad playback.
                // If you use a different ad tag URL that returns a VMAP or
                // an ad rules playlist, the adsManager.init() function will
                // trigger ad playback automatically and the IMA SDK will
                // ignore the adsManager.start().
                // It is safe to always call adsManager.start() in the
                // LOADED event.
                adsManager.start();
            case CONTENT_PAUSE_REQUESTED ->
                // AdEventType.CONTENT_PAUSE_REQUESTED is fired when you
                // should pause your content and start playing an ad.
                pauseContentForAds();
            case CONTENT_RESUME_REQUESTED ->
                // AdEventType.CONTENT_RESUME_REQUESTED is fired when the ad
                // you should play your content.
                resumeContent();
            case ALL_ADS_COMPLETED -> {
              // Calling adsManager.destroy() triggers the function
              // VideoAdPlayer.release().
              adsManager.destroy();
              adsManager = null;
            }
            case CLICKED -> {
              // When the user clicks on the Learn More button, the IMA SDK fires
              // this event, pauses the ad, and opens the ad's click-through URL.
              // When the user returns to the app, the IMA SDK calls the
              // VideoAdPlayer.playAd() function automatically.
            }
            default -> {}
          }
        }
      });
  AdsRenderingSettings adsRenderingSettings =
      ImaSdkFactory.getInstance().createAdsRenderingSettings();
  // Add any ads rendering settings here.
  // This init() only loads the UI rendering settings locally.
  adsManager.init(adsRenderingSettings);
});

11. 広告とコンテンツの切り替えを処理する

このセクションでは、前の手順で参照した pauseContentForAds メソッドと resumeContent メソッドを作成します。これらのメソッドは、コンテンツと広告の両方を再生するためにプレーヤーを再利用します。広告ブレーク後に再生を再開するには、コンテンツの位置を追跡する必要があります。

private void pauseContentForAds() {
  Log.i(LOGTAG, "pauseContentForAds");
  savedPosition = videoPlayer.getCurrentPosition();
  videoPlayer.stopPlayback();
  // Hide the buttons and seek bar controlling the video view.
  videoPlayer.setMediaController(null);
}

private void resumeContent() {
  Log.i(LOGTAG, "resumeContent");

  // Show the buttons and seek bar controlling the video view.
  videoPlayer.setVideoPath(SAMPLE_VIDEO_URL);
  videoPlayer.setMediaController(mediaController);
  videoPlayer.setOnPreparedListener(
      mediaPlayer -> {
        if (savedPosition > 0) {
          mediaPlayer.seekTo(savedPosition);
        }
        mediaPlayer.start();
      });
  videoPlayer.setOnCompletionListener(
      mediaPlayer -> videoAdPlayerAdapter.notifyImaOnContentCompleted());
}

12. 広告をリクエスト

次に、requestAds メソッドを追加して AdsRequest をビルドし、それを使用して AdsLoader.requestAds() を呼び出します。

private void requestAds(String adTagUrl) {
  // Create the ads request.
  AdsRequest request = sdkFactory.createAdsRequest();
  request.setAdTagUrl(adTagUrl);
  request.setContentProgressProvider(
      () -> {
        if (videoPlayer.getDuration() <= 0) {
          return VideoProgressUpdate.VIDEO_TIME_NOT_READY;
        }
        return new VideoProgressUpdate(
            videoPlayer.getCurrentPosition(), videoPlayer.getDuration());
      });

  // Request the ad. After the ad is loaded, onAdsManagerLoaded() will be called.
  adsLoader.requestAds(request);
}

これで、IMA SDK を使用して広告をリクエストし、表示できるようになりました。より高度な機能については、他のガイドまたは GitHub のサンプルをご覧ください。