Android için IMA SDK ile özel kullanıcı arayüzü

Bu kılavuzda, Android için IMA SDK'sını kullanarak kendi özel kullanıcı arayüzünüzü nasıl uygulayabileceğiniz gösterilmektedir. Bunu yapmak için varsayılan kullanıcı arayüzünü devre dışı bırakmanız, yeni bir özel kullanıcı arayüzü oluşturmanız ve ardından yeni kullanıcı arayüzünü SDK'dan alınan reklam bilgileriyle doldurmanız gerekir.

Reklam kullanıcı arayüzünü devre dışı bırakma

Özel bir kullanıcı arayüzü göstermek için önce varsayılan reklam kullanıcı arayüzünü devre dışı bırakmanız gerekir. Bunun için AdsRenderingSettings.setDisableUi() işlevini çağırın ve ardından AdsRenderingSettings değerini AdsManager.init() işlevine iletin:

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

Ardından, özel kullanıcı arayüzünüzü göstermeye karar vermeniz gerektiğinde reklam olup olmadığını kontrol edin ve varsayılan reklam kullanıcı arayüzünün devre dışı bırakılıp bırakılmadığını kontrol etmek için Ad.isUiDisabled() işlevini çağırın.

Özel kullanıcı arayüzünü gösterme

Varsayılan kullanıcı arayüzü devre dışı bırakıldıktan sonra, özel bir reklam kullanıcı arayüzü göstermek gerekir. Bu örnekte, mevcut video oynatıcı düzeninize yeni bir RelativeLayout ekleyin, ardından bir reklam oynatıldığında bu düzeni gösterin ve reklam oynatılmadığında gizleyin.

Parça düzeni dosyasına aşağıdakileri ekleyin:

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>

Ardından, özel kullanıcı arayüzünü kullanmak için kodu Activity dosyasına ekleyin. Kullanıcı arayüzünü güncellemek için bir zamanlayıcı Handler ve bu zamanlayıcıda çalışan bir Runnable oluşturun.

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

Reklam sayacı ve atlama düğmesi

Şimdi kullanıcı arayüzünü reklam bilgileriyle doldurmak için updateCustomUi() işlevini tanımlayın. Ayrıntılar reklam biçimine göre değişir ancak genellikle reklam sayacını ve reklam atlanabilirse bir atlama düğmesi veya atlama sayacı eklersiniz. Aşağıdakileri ekleyin:

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

Önceki kodda, reklam olup olmadığını kontrol ettikten ve varsayılan reklam kullanıcı arayüzünün devre dışı bırakılıp bırakılmadığını kontrol etmek için Ad.isUiDisabled()'ü çağırdıktan sonra, reklamın kapsüldeki konumunu ve reklamın ilerleme durumunu bulmak için Ad.getAdPodInfo() ve AdsManager.getAdProgress()'yi çağırın. Atlanabilir reklamlarda, reklamı henüz atlayamıyorsanız bir atlama sayacı, aksi takdirde bir atlama düğmesi gösterin. Sık karşılaşılan reklam bilgilerinin ve ilişkili aramaların özetini aşağıda bulabilirsiniz:

Bilgi Telefon
Kapsüldeki mevcut reklam Ad.getAdPodInfo().getAdPosition()
Kapsüldeki toplam reklam sayısı Ad.getPodInfo().getTotalAds()
Reklam atlanabilir mi? Ad.isSkippable()
Reklamın atlanabildiği saniye sayısı Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Reklamda kalan saniye sayısı (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Reklamı Atla düğmesini tıkladığınızda reklam atlanır. Bu nedenle, Daha Fazla Bilgi düğmesine ek olarak bu düğmeyi de ayarlayın:

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()'ün çalışması için kullanıcı arayüzü devre dışı bırakılmalıdır.

Sorun giderme

Reklam kullanıcı arayüzünü devre dışı bırakmak için etkinleştirilmiş bir örnek etiketiniz var mı?
Bu örnek etiketin URL'sini kopyalayıp IMA uygulamanıza yapıştırabilirsiniz.
Varsayılan kullanıcı arayüzünü devre dışı bırakamıyorum.
AdsRenderingSettings.setDisableUi()'u aradığınızdan ve AdsManager'ye ilettiğinizden emin olun. Ad.isUiDisabled() işlevinin true değerini döndürdüğünden emin olun. Ayrıca, reklam kullanıcı arayüzünü devre dışı bırakmak için ağınızın Ad Manager'da etkinleştirilmiş olması gerekir. Etkinleştirildiyseniz VAST'iniz şuna benzeyen bir Extension içerir: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Hâlâ sorun yaşıyorsanız hesabınızın etkinleştirildiğinden emin olmak için hesap yöneticinizle iletişime geçin. Bazı reklam türleri belirli bir kullanıcı arayüzü gerektirir. Bu reklamlar <UiHideable> değeri 0 olarak döndürülür. Böyle bir durumla karşılaşırsanız trafik ekibinizin bu reklam türlerinin yayınlanmadığını doğrulamak için değişiklik yapması gerekir.