本指南將說明如何使用 Android 版 IMA SDK，導入您的自訂 UI。如要這麼做，您必須停用預設 UI，設定新的自訂 UI，然後在新 UI 中填入從 SDK 取得的廣告資訊。
停用廣告使用者介面
如要顯示自訂使用者介面，您必須先停用預設廣告使用者介面。方法是呼叫 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
停用預設使用者介面後，下一步是顯示自訂廣告使用者介面。在本例中，您可以將新的 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>
然後在 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);
}
廣告計數器和略過按鈕
現在請定義 updateCustomUi() 函式，在 UI 中填入廣告資訊。詳細資料會因廣告格式而異，但如果廣告可略過，通常還會加入廣告計數器和略過按鈕或略過計數器。加入下列項目：
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() 檢查預設廣告使用者介面是否已停用後，請呼叫 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();
}
});
必須停用 UI，AdsManager.clicked() 才能正常運作。
疑難排解
- 您有能夠停用廣告使用者介面的範例代碼嗎？
- 您可以複製這個範例代碼的網址，然後貼到您的 IMA 導入中。
- 無法停用預設 UI。
- 檢查並確認您呼叫了
AdsRenderingSettings.setDisableUi()並將其傳遞至AdsManager。檢查Ad.isUiDisabled()是否會傳回true。此外，您的聯播網必須在 Ad Manager 中啟用，才能停用廣告使用者介面。 如果已啟用，VAST 會包含類似下方的Extension：<Extension type="uiSettings"> <UiHideable>1</UiHideable> </Extension>
如果還是無法解決問題，請與客戶經理聯絡，確認已啟用。部分廣告類型需要特定 UI；這些廣告會傳回<UiHideable>值為 0。此時，廣告投放團隊必須進行變更，確保系統不會再放送這些廣告類型。