UI kustom dengan IMA SDK untuk Android

Panduan ini menunjukkan cara menerapkan UI kustom Anda sendiri menggunakan IMA SDK untuk Android. Untuk melakukannya, Anda perlu menonaktifkan UI default, menyiapkan UI kustom baru, lalu mengisi UI baru dengan informasi iklan yang diperoleh dari SDK.

Menonaktifkan UI iklan

Untuk menampilkan UI kustom, Anda harus menonaktifkan UI iklan default terlebih dahulu. Untuk melakukannya, panggil AdsRenderingSettings.setDisableUi(), lalu teruskan AdsRenderingSettings ke 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);
}

Setelah itu, setiap kali Anda perlu memutuskan apakah akan menampilkan UI kustom, periksa apakah ada iklan dan panggil Ad.isUiDisabled() untuk memeriksa apakah UI iklan default telah dinonaktifkan.

Menampilkan UI kustom

Setelah UI default dinonaktifkan, langkah berikutnya adalah menampilkan UI iklan kustom. Untuk contoh ini, tambahkan RelativeLayout baru ke tata letak pemutar video yang ada, lalu tampilkan tata letak ini saat iklan diputar dan sembunyikan saat tidak ada iklan yang diputar.

Tambahkan kode berikut ke file tata letak fragmen:

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>

Kemudian, tambahkan kode untuk menggunakan UI kustom ke Activity. Untuk mengupdate UI, buat timer Handler dan Runnable yang berjalan di dalamnya.

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);
}

Penghitung iklan dan tombol lewati

Sekarang, tentukan fungsi updateCustomUi() untuk mengisi UI dengan informasi iklan. Detailnya bervariasi menurut format iklan, tetapi Anda biasanya menyertakan penghitung iklan dan tombol lewati atau penghitung lewati jika iklan dapat dilewati. Tambahkan hal berikut:

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);
    }
}

Dalam kode sebelumnya, setelah memeriksa apakah ada iklan dan memanggil Ad.isUiDisabled() untuk memeriksa apakah UI iklan default telah dinonaktifkan, panggil Ad.getAdPodInfo() dan AdsManager.getAdProgress() untuk menemukan posisi iklan di pod dan progres iklan. Untuk iklan yang dapat dilewati, tampilkan penghitung lewati jika Anda belum dapat melewati iklan; jika tidak, tampilkan tombol lewati. Berikut adalah ringkasan informasi iklan umum dan panggilan terkait:

Informasi Telepon
Iklan saat ini dalam pod Ad.getAdPodInfo().getAdPosition()
Total iklan dalam pod Ad.getPodInfo().getTotalAds()
Iklan dapat dilewati Ad.isSkippable()
Detik hingga iklan dapat dilewati Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Detik yang tersisa dalam iklan (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Mengklik tombol Lewati Iklan akan melewati iklan, jadi siapkan tombol tersebut selain tombol Pelajari Lebih Lanjut:

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 harus dinonaktifkan agar AdsManager.clicked() berfungsi.

Pemecahan masalah

Apakah Anda memiliki contoh tag yang diaktifkan untuk menonaktifkan UI iklan?
Anda dapat menyalin URL contoh tag ini dan menempelkannya ke penerapan IMA Anda.
Saya tidak dapat menonaktifkan UI default.
Periksa untuk memastikan Anda memanggil AdsRenderingSettings.setDisableUi() dan meneruskannya ke AdsManager. Periksa untuk melihat apakah Ad.isUiDisabled() menampilkan true. Selain itu, jaringan Anda harus diaktifkan di Ad Manager untuk menonaktifkan UI iklan. Jika diaktifkan, VAST Anda akan berisi Extension yang terlihat seperti: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Jika Anda masih mengalami masalah, hubungi Account Manager Anda untuk mengonfirmasi bahwa Anda telah diaktifkan. Beberapa jenis iklan memerlukan UI tertentu; iklan ini ditampilkan dengan nilai <UiHideable> 0. Jika Anda mengalami hal ini, tim traffic Anda harus melakukan perubahan untuk memverifikasi bahwa jenis iklan ini tidak ditayangkan.