UI ที่กำหนดเองด้วย IMA SDK สำหรับ Android

คู่มือนี้แสดงวิธีใช้ UI ที่กําหนดเองของคุณเองโดยใช้ IMA SDK สําหรับ Android โดยคุณต้องปิดใช้ 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 ใหม่ลงในเลย์เอาต์วิดีโอเพลเยอร์ที่มีอยู่ จากนั้นแสดงเลย์เอาต์นี้เมื่อโฆษณาเล่นอยู่ และซ่อนเมื่อไม่มีโฆษณาเล่นอยู่

เพิ่มข้อมูลต่อไปนี้ลงในไฟล์เลย์เอาต์ของฟragment

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 ที่ทำงานบน UI

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() เพื่อตรวจสอบว่า 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();
    }
});

คุณต้องปิดใช้ UI เพื่อให้ AdsManager.clicked() ทำงานได้

การแก้ปัญหา

คุณมีแท็กตัวอย่างที่เปิดใช้เพื่อปิดใช้ UI ของโฆษณาไหม
คุณสามารถคัดลอก URL ของแท็กตัวอย่างนี้ แล้ววางลงในการติดตั้งใช้งาน IMA
ฉันปิดใช้ UI เริ่มต้นไม่ได้
ตรวจสอบว่าคุณเรียกใช้ AdsRenderingSettings.setDisableUi() และส่งผ่านไปยัง AdsManager ตรวจสอบว่า Ad.isUiDisabled() แสดงขึ้นมาแล้ว true นอกจากนี้ เครือข่ายของคุณต้องเปิดใช้ใน Ad Manager เพื่อปิดใช้ UI โฆษณา หากเปิดใช้แล้ว VAST จะมี Extension ดังต่อไปนี้ 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 หากยังพบปัญหาอยู่ โปรดตรวจสอบกับผู้จัดการฝ่ายดูแลลูกค้าเพื่อยืนยันว่าคุณได้รับสิทธิ์แล้ว โฆษณาบางประเภทต้องใช้ UI ที่เฉพาะเจาะจง โฆษณาเหล่านี้จะแสดงผลพร้อมค่า <UiHideable> เป็น 0 หากพบปัญหานี้ ทีมจัดการโฆษณาจะต้องทําการเปลี่ยนแปลงเพื่อยืนยันว่าโฆษณาประเภทเหล่านี้จะไม่แสดง