رابط کاربری سفارشی با 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() را تعریف کنید تا 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() برای بررسی غیرفعال بودن رابط کاربری پیش فرض آگهی، با 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() کار کند، رابط کاربری باید غیرفعال باشد.

عیب یابی

آیا برچسب نمونه ای دارید که برای غیرفعال کردن رابط کاربری تبلیغات فعال باشد؟
می توانید URL این تگ نمونه را کپی کرده و در پیاده سازی IMA خود جایگذاری کنید.
من نمی توانم رابط کاربری پیش فرض را غیرفعال کنم.
بررسی کنید تا مطمئن شوید که AdsRenderingSettings.setDisableUi() فراخوانی کرده اید و آن را به AdsManager ارسال کنید. بررسی کنید که Ad.isUiDisabled() true را برمی گرداند. علاوه بر این، شبکه شما باید در Ad Manager فعال باشد تا رابط کاربری تبلیغات غیرفعال شود. اگر فعال هستید، VAST شما حاوی یک Extension است که به نظر می رسد:
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
اگر همچنان مشکل دارید، با مدیر حساب خود تماس بگیرید تا فعال بودن شما را تأیید کند. برخی از انواع تبلیغات به یک UI خاص نیاز دارند. این تبلیغات با مقدار <UiHideable> 0 برمی گردند. اگر با این مورد مواجه شدید، تیم قاچاق شما باید تغییراتی ایجاد کند تا اطمینان حاصل شود که این انواع تبلیغات ارائه نمی شوند.