Hướng dẫn này trình bày cách triển khai giao diện người dùng tuỳ chỉnh của riêng bạn bằng cách sử dụng SDK IMA dành cho Android. Để làm như vậy, bạn cần tắt giao diện người dùng mặc định, thiết lập một giao diện người dùng tuỳ chỉnh mới, sau đó điền sẵn giao diện người dùng mới bằng thông tin quảng cáo lấy từ SDK.
Tắt giao diện người dùng quảng cáo
Để hiển thị giao diện người dùng tuỳ chỉnh, trước tiên, bạn phải tắt giao diện người dùng mặc định của quảng cáo. Để thực hiện việc này, hãy gọi AdsRenderingSettings.setDisableUi() rồi chuyển AdsRenderingSettings đến 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);
}
Sau đó, mỗi khi bạn cần quyết định có hiển thị giao diện người dùng tuỳ chỉnh hay không, hãy kiểm tra xem có quảng cáo hay không và gọi Ad.isUiDisabled() để kiểm tra để đảm bảo rằng giao diện người dùng quảng cáo mặc định đã bị tắt.
Hiện giao diện người dùng tuỳ chỉnh
Sau khi đã tắt giao diện người dùng mặc định, bước tiếp theo là hiển thị giao diện người dùng của quảng cáo tuỳ chỉnh.
Trong ví dụ này, hãy thêm RelativeLayout mới vào bố cục trình phát video hiện có,
sau đó hiển thị bố cục này khi quảng cáo đang phát và ẩn bố cục đó khi không có quảng cáo nào đang phát.
Thêm đoạn mã sau đây vào tệp bố cục mảnh:
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>
Sau đó, hãy thêm mã để sử dụng giao diện người dùng tuỳ chỉnh vào Activity. Để cập nhật giao diện người dùng, hãy tạo một bộ tính giờ Handler và Runnable chạy trên đó.
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);
}
Bộ đếm quảng cáo và nút bỏ qua
Bây giờ, hãy xác định hàm updateCustomUi() để điền thông tin quảng cáo vào giao diện người dùng.
Các chi tiết sẽ khác nhau tuỳ theo định dạng quảng cáo, nhưng bạn thường bao gồm bộ đếm quảng cáo và nút bỏ qua hoặc bộ đếm bỏ qua nếu quảng cáo có thể bỏ qua. Thêm như sau:
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);
}
}
Trong mã trên, sau khi kiểm tra xem có quảng cáo hay không và gọi
Ad.isUiDisabled() để kiểm tra xem giao diện người dùng của quảng cáo mặc định đã tắt hay chưa, hãy gọi
Ad.getAdPodInfo() và AdsManager.getAdProgress() để tìm vị trí của quảng cáo
trong nhóm và tiến trình của quảng cáo. Đối với quảng cáo có thể bỏ qua, hãy hiển thị bộ đếm bỏ qua nếu
bạn chưa thể bỏ qua quảng cáo; nếu không, hãy hiển thị nút bỏ qua. Dưới đây là phần tóm tắt
thông tin quảng cáo phổ biến và các lệnh gọi liên quan:
| Thông tin | Gọi |
|---|---|
| Quảng cáo hiện tại trong nhóm | Ad.getAdPodInfo().getAdPosition() |
| Tổng số quảng cáo trong nhóm | Ad.getPodInfo().getTotalAds() |
| Có thể bỏ qua quảng cáo | Ad.isSkippable() |
| Số giây cho đến khi có thể bỏ qua quảng cáo | Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime() |
| Số giây còn lại trong quảng cáo | (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000 |
Thao tác nhấp vào nút Bỏ qua quảng cáo sẽ bỏ qua quảng cáo. Vì vậy, hãy thiết lập nút đó ngoài nút Tìm hiểu thêm:
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();
}
});
Bạn phải tắt giao diện người dùng để AdsManager.clicked() hoạt động.
Khắc phục sự cố
- Bạn có thẻ mẫu được bật để tắt giao diện người dùng của quảng cáo không?
- Bạn có thể sao chép URL của thẻ mẫu này và dán vào phương thức triển khai IMA của mình.
- Tôi không thể tắt giao diện người dùng mặc định.
- Kiểm tra để đảm bảo rằng bạn gọi
AdsRenderingSettings.setDisableUi()và truyền phương thức này đếnAdsManager. Kiểm tra xemAd.isUiDisabled()có trả vềtruehay không. Ngoài ra, bạn phải bật mạng trong Ad Manager để vô hiệu hoá giao diện người dùng của quảng cáo. Nếu bạn đã bật, VAST của bạn sẽ chứaExtensioncó dạng như sau:<Extension type="uiSettings"> <UiHideable>1</UiHideable> </Extension>
Nếu bạn vẫn gặp sự cố, hãy liên hệ với người quản lý tài khoản để xác nhận rằng bạn đã được bật. Một số loại quảng cáo yêu cầu một giao diện người dùng cụ thể; các quảng cáo này trả về với giá trị<UiHideable>là 0. Nếu bạn gặp phải trường hợp này, nhóm quản lý quảng cáo sẽ cần thay đổi để đảm bảo rằng các loại quảng cáo này không phân phát.