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

คู่มือนี้แสดงวิธีใช้งาน UI ที่กำหนดเองของคุณเองโดยใช้ IMA SDK สำหรับ Android โดยต้องปิดใช้ UI เริ่มต้น ตั้งค่า UI ที่กำหนดเองใหม่ แล้วป้อนข้อมูลโฆษณาที่ได้รับจาก SDK ลงใน UI ใหม่

หมายเหตุ: คุณต้องเปิดใช้บัญชี Google Ad Manager จึงจะใช้ฟีเจอร์นี้ได้ โปรดสอบถามข้อมูลเพิ่มเติมจากผู้จัดการฝ่ายดูแลลูกค้า

หมายเหตุ: ตัวอย่างนี้สร้างขึ้นจาก IMA BasicExample สำหรับ Android

ปิดใช้ 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

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

ตัวนับโฆษณาและปุ่มข้าม

ต่อไปให้กำหนดฟังก์ชัน 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 หากพบปัญหาเช่นนี้ ทีมดูแลการแสดงโฆษณาจะต้องทำการเปลี่ยนแปลงเพื่อให้ประเภทโฆษณาเหล่านี้ไม่แสดง