Android के लिए IMA SDK के साथ पसंद के मुताबिक बनाए गए यूज़र इंटरफ़ेस (यूआई)

इस गाइड में, Android के लिए IMA SDK का इस्तेमाल करके, अपनी पसंद के मुताबिक बनाए गए यूज़र इंटरफ़ेस (यूआई) को लागू करने का तरीका बताया गया है. ऐसा करने के लिए, आपको डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) को बंद करना होगा, एक नया कस्टम यूआई सेट अप करना होगा और फिर 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);
}

इसके बाद, जब भी आपको यह तय करना हो कि अपना कस्टम यूज़र इंटरफ़ेस (यूआई) दिखाना है या नहीं, तो देखें कि क्या कोई विज्ञापन है या नहीं. इसके बाद, Ad.isUiDisabled() को कॉल करके पता लगाएं कि डिफ़ॉल्ट विज्ञापन यूज़र इंटरफ़ेस (यूआई) बंद कर दिया गया है या नहीं.

कस्टम यूज़र इंटरफ़ेस (यूआई) दिखाएं

डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) बंद होने के बाद, अगला चरण कस्टम विज्ञापन यूज़र इंटरफ़ेस (यूआई) दिखाना है. इस उदाहरण के लिए, अपने मौजूदा वीडियो प्लेयर लेआउट में एक नया 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 में कस्टम यूज़र इंटरफ़ेस (यूआई) इस्तेमाल करने के लिए कोड जोड़ें. यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए, 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() फ़ंक्शन को तय करें. विज्ञापन फ़ॉर्मैट के हिसाब से यह जानकारी अलग-अलग हो सकती है. हालांकि, अगर विज्ञापन स्किप किया जा सकता है, तो आम तौर पर इसमें विज्ञापन काउंटर और स्किप बटन या स्किप काउंटर शामिल किया जाता है. नीचे दी गई चीज़ें जोड़ें:

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

AdsManager.clicked() काम कर सके, इसके लिए यूज़र इंटरफ़ेस (यूआई) बंद होना चाहिए.

समस्या हल करना

क्या आपके पास कोई ऐसा सैंपल टैग है जिसे विज्ञापन यूज़र इंटरफ़ेस (यूआई) को बंद करने के लिए चालू किया गया है?
इस सैंपल टैग का यूआरएल कॉपी किया जा सकता है और इसे IMA लागू करने के तरीके में चिपकाया जा सकता है.
डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) बंद नहीं किया जा सकता.
पक्का करें कि आपने AdsRenderingSettings.setDisableUi() को कॉल किया है और उसे AdsManager को पास कर दिया है. देखें कि Ad.isUiDisabled() से true दिखता है या नहीं. इसके अलावा, किसी विज्ञापन यूज़र इंटरफ़ेस (यूआई) को बंद करने के लिए, Ad Manager में आपका नेटवर्क चालू होना ज़रूरी है. अगर आपको चालू किया गया है, तो आपके VAST (वीडियो विज्ञापन देने के लिए टेम्प्लेट) में एक Extension मौजूद है जो इस तरह दिखता है: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
अगर आपको अब भी समस्या आ रही है, तो अपने खाता मैनेजर से संपर्क करके पुष्टि करें कि आप चालू हैं. कुछ विज्ञापन टाइप के लिए खास यूज़र इंटरफ़ेस (यूआई) की ज़रूरत होती है; ये विज्ञापन <UiHideable> की वैल्यू 0 के साथ दिखते हैं. अगर आपको इसका सामना करना पड़ता है, तो आपकी ट्रैफ़िकिंग टीम को बदलाव करके यह पक्का करना होगा कि इस तरह के विज्ञापन न दिखाए जाएं.