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 के साथ दिखते हैं. अगर आपको यह समस्या आती है, तो ट्रैफ़िकिंग टीम को बदलाव करने होंगे, ताकि यह पक्का किया जा सके कि इस तरह के विज्ञापन न दिखाए जाएं.