このガイドでは、IMA SDK for Android を使用して独自のカスタム UI を実装する方法について説明します。 そのためには、デフォルト UI を無効にして、新しいカスタム UI をセットアップしてから、SDK から取得した広告情報を新しい UI に入力する必要があります。
広告 UI を無効にする
カスタム UI を表示するには、まずデフォルトの広告 UI を無効にする必要があります。これを行うには、AdsRenderingSettings.setDisableUi() を呼び出してから、AdsRenderingSettings を AdsManager.init() に渡します。
MyActivity.java
ImaSdkFactory mSdkFactory = ImaSdkFactory.getInstance();
AdsManager mAdsManager;
@Override
public void onAdsManagerLoaded(AdsManagerLoadedEvent adsManagerLoadedEvent) {
mAdsManager = adsManagerLoadedEvent.getAdsManager();
...
AdsRenderingSettings settings = mSdkFactory.createAdsRenderingSettings();
settings.setDisableUi(true);
mAdsManager.init(settings);
}
その後、カスタム UI を表示するかどうかを決定する必要がある場合は常に、広告があるかどうかを確認し、Ad.isUiDisabled() を呼び出してデフォルトの広告 UI が無効になっていることを確認します。
カスタム UI を表示する
デフォルト UI を無効にしたら、次のステップとしてカスタム広告 UI を表示します。この例では、既存の動画プレーヤーのレイアウトに新しい RelativeLayout を追加し、広告の再生中はこのレイアウトを表示し、広告が再生されていないときは非表示にします。
フラグメント レイアウト ファイルに次のコードを追加します。
fragment_video.xml
<com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer
android:id="@+id/sampleVideoPlayer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="@+id/customUi"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible">
<TextView
android:id="@+id/adCounter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:text="@string/ad_counter" />
<Button
android:id="@+id/learnMoreButton"
android:background="@android:color/holo_green_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="@string/learn_more"
android:layout_alignParentRight="true" />
<Button
android:id="@+id/skipButton"
android:background="@android:color/holo_green_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="@string/skip_ad"
android:enabled="false"
android:layout_alignParentRight="true" />
</RelativeLayout>
次に、カスタム UI を使用するためのコードを Activity に追加します。UI を更新するには、タイマー Handler と、タイマーで実行する Runnable を作成します。
MyActivity.java
// The view containing the custom UI.
private View mCustomUi;
// The timer handler.
private Handler mTimerHandler = new Handler();
// The Runnable that runs your custom UI update loop.
private Runnable mTimerRunnable = new Runnable() {
@Override
public void run() {
updateCustomUi();
mTimerHandler.postDelayed(this, 500);
}
};
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
...
mCustomUi = rootView.findViewById(R.id.customUi);
mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);
}
@Override
public void onAdEvent(AdEvent adEvent) {
...
switch (adEvent.getType()) {
...
case STARTED:
// Start your update loop.
mTimerHandler.post(mTimerRunnable);
Break;
...
case COMPLETED:
mCustomUi.setVisibility(View.INVISIBLE);
mTimerHandler.removeCallbacks(mTimerRunnable);
...
}
}
@Override
public void onPause() {
...
// Stop ad UI update loop.
mTimerHandler.removeCallbacks(mTimerRunnable);
}
@Override
Public void onResume() {
...
// Start ad UI update loop.
mTimerHandler.post(mTimerRunnable);
}
広告カウンタとスキップボタン
次に、UI に広告情報を入力するように updateCustomUi() 関数を定義します。詳細は広告フォーマットによって異なりますが、広告がスキップ可能な場合、通常は広告カウンタとスキップボタンまたはスキップ カウンタが含まれます。次のものを追加します。
MyActivity.java
private void updateCustomUi() {
// Runs from the update loop to update the custom UI.
Ad ad = mAdsManager.getCurrentAd();
if (ad != null && ad.isUiDisabled()) {
// Show the UI.
Log.i(LOGTAG, "UI disabled, show custom UI!");
AdPodInfo podInfo = ad.getAdPodInfo();
VideoProgressUpdate update = mAdsManager.getAdProgress();
SimpleDateFormat format = new SimpleDateFormat("mm:ss", Locale.US);
// Handle ad counter.
String adProgress = format.format(
(update.getDuration() - update.getCurrentTime()) * 1000);
String adUiString = String.format(
Locale.US, "Ad %d of %d (%s)", podInfo.getAdPosition(),
podInfo.getTotalAds(), adProgress);
mAdCounterUi.setText(adUiString);
// Handle skippable ads.
if (ad.isSkippable()) {
if (update.getCurrentTime() >= ad.getSkipTimeOffset()) {
// Allow skipping.
mSkipButton.setText(getString(R.string.skip_ad));
mSkipButton.setEnabled(true);
} else {
String skipString = String.format(
Locale.US, "You can skip this ad in %d",
(int) (ad.getSkipTimeOffset() -
update.getCurrentTime()));
mSkipButton.setText(skipString);
mSkipButton.setEnabled(false);
}
mSkipButton.setVisibility(View.VISIBLE);
} else {
mSkipButton.setVisibility(View.INVISIBLE);
}
mCustomUi.setVisibility(View.VISIBLE);
mCustomUi.bringToFront();
} else {
// Hide the UI.
mCustomUi.setVisibility(View.INVISIBLE);
mTimerHandler.removeCallbacks(mTimerRunnable);
}
}
上記のコードで、広告の有無を確認し、Ad.isUiDisabled() を呼び出してデフォルトの広告 UI が無効になっていることを確認した後、Ad.getAdPodInfo() と AdsManager.getAdProgress() を呼び出して、連続配信広告内の広告の位置と広告の進行状況を確認します。スキップ可能な広告の場合、広告をスキップできない場合はスキップ カウンタを表示し、それ以外の場合はスキップボタンを表示します。一般的な広告情報と関連する呼び出しの概要は次のとおりです。
| 情報 | 電話 |
|---|---|
| 連続配信広告内の現在の広告 | Ad.getAdPodInfo().getAdPosition() |
| 連続配信広告内の広告の合計 | Ad.getPodInfo().getTotalAds() |
| スキップ可能広告 | Ad.isSkippable() |
| 広告をスキップできるまでの時間（秒） | Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime() |
| 広告の残り秒数 | (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000 |
[広告をスキップ] ボタンをクリックすると広告がスキップされるため、[詳細] ボタンに加えて次のように設定します。
MyActivity.java
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
...
mCustomUi = rootView.findViewById(R.id.customUi);
mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);
// Set up the 'learn more' button handler for the custom UI.
mLearnMoreButton = (Button) rootView.findViewById(R.id.learnMoreButton);
mLearnMoreButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
// Only works if the UI has been disabled.
mAdsManager.clicked();
}
});
// Set up the skip button handler for the custom UI.
mSkipButton = (Button) rootView.findViewById(R.id.skipButton);
mSkipButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
mAdsManager.skip();
}
});
AdsManager.clicked() が機能するためには、UI を無効にする必要があります。
トラブルシューティング
- 広告 UI を無効にするため有効なサンプルタグはありますか。
- このサンプルタグの URL をコピーして、IMA 実装に貼り付けることができます。
- デフォルト UI を無効にできません。
- 必ず
AdsRenderingSettings.setDisableUi()を呼び出してAdsManagerに渡すようにしてください。Ad.isUiDisabled()がtrueを返すことを確認します。また、広告 UI を無効にするには、アド マネージャーでネットワークを有効にする必要があります。 有効になっている場合、VAST に次のようなExtensionが含まれます。<Extension type="uiSettings"> <UiHideable>1</UiHideable> </Extension>
それでも問題が解決しない場合は、アカウント マネージャーに有効化を依頼してください。一部の広告タイプでは、固有の UI が必要です。このような広告は、<UiHideable>の値が 0 を返します。このような場合、入稿チームはその広告タイプが配信されないように変更を行う必要があります。