Niestandardowy interfejs z pakietem IMA SDK na Androida

Z tego przewodnika dowiesz się, jak za pomocą pakietu IMA SDK dla Androida wdrożyć własne niestandardowe UI. Aby to zrobić, musisz wyłączyć domyślny interfejs użytkownika, skonfigurować nowy niestandardowy interfejs użytkownika, a potem wypełnić go informacjami o reklamach uzyskanymi z pakietu SDK.

Wyłączanie interfejsu reklam

Aby wyświetlić niestandardowy interfejs użytkownika, musisz najpierw wyłączyć domyślny interfejs reklam. Aby to zrobić, wywołaj funkcję AdsRenderingSettings.setDisableUi(), a potem prześlij parametr AdsRenderingSettings do funkcji 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);
}

Następnie, gdy będziesz musiał(-a) podjąć decyzję, czy wyświetlić niestandardowy interfejs użytkownika, sprawdź, czy jest reklama, i wywołaj funkcję Ad.isUiDisabled(), aby sprawdzić, czy domyślny interfejs użytkownika reklamy został wyłączony.

Wyświetlanie niestandardowego interfejsu

Po wyłączeniu domyślnego interfejsu wyświetli się interfejs reklamy niestandardowej. W tym przykładzie dodaj nowy element RelativeLayout do istniejącego układu odtwarzacza filmów, a następnie wyświetlaj go podczas odtwarzania reklamy i chowaj, gdy nie ma żadnych reklam.

Dodaj do pliku układu fragmentu te elementy:

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>

Następnie dodaj kod, aby używać niestandardowego interfejsu w sekcji Activity. Aby zaktualizować interfejs, utwórz minutnik Handler i element Runnable, który będzie się na nim wykonywać.

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

Licznik reklam i przycisk pomijania

Teraz zdefiniuj funkcję updateCustomUi(), aby wypełnić interfejs użytkownika informacjami o reklamach. Szczegóły te różnią się w zależności od formatu reklamy, ale zwykle należy uwzględnić licznik reklamy i przycisk pominięcia lub licznik pominięcia, jeśli reklama jest możliwa do pominięcia. Dodaj te informacje:

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

W poprzednim kodzie po sprawdzeniu, czy jest reklama, i wywołaniu funkcji Ad.isUiDisabled(), aby sprawdzić, czy domyślny interfejs reklamy został wyłączony, wywołaj funkcje Ad.getAdPodInfo() i AdsManager.getAdProgress(), aby znaleźć pozycję reklamy w grupie reklam i jej postęp. W przypadku reklam możliwych do pominięcia wyświetlaj licznik pominięcia, jeśli reklamy nie można jeszcze pominąć, a w przeciwnym razie wyświetlaj przycisk pominięcia. Oto podsumowanie często używanych informacji o reklamach i powiązanych z nimi wywołań:

Informacje Połączenie
Bieżąca reklama w bloku reklamowym Ad.getAdPodInfo().getAdPosition()
Łączna liczba reklam w bloku reklamowym Ad.getPodInfo().getTotalAds()
Czy reklama jest możliwa do pominięcia Ad.isSkippable()
Liczba sekund, po których można pominąć reklamę Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Pozostały czas trwania reklamy w sekundach (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Kliknięcie przycisku Pomiń reklamę powinno spowodować pominięcie reklamy. Ustaw to, a dodatkowo dodaj przycisk Więcej informacji:

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

Aby AdsManager.clicked() działało, interfejs musi być wyłączony.

Rozwiązywanie problemów

Czy masz przykładowy tag, który umożliwia wyłączenie interfejsu reklamy?
Możesz skopiować adres URL tego przykładowego tagu i wklej go w swojej implementacji IMA.
Nie mogę wyłączyć domyślnego interfejsu użytkownika.
Sprawdź, czy wywołujesz AdsRenderingSettings.setDisableUi() i przekazujesz go do AdsManager. Sprawdź, czy Ad.isUiDisabled() zwraca wartość true. Aby wyłączyć interfejs użytkownika reklamy, musisz też włączyć swoją sieć w usłudze Ad Manager. Jeśli masz włączoną tę funkcję, plik VAST zawiera element Extension, który wygląda tak: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Jeśli nadal masz problemy, skontaktuj się z menedżerem konta, aby sprawdzić, czy masz uprawnienia. Niektóre typy reklam wymagają określonego interfejsu. Reklamy te są zwracane z wartością <UiHideable> równą 0. W takim przypadku zespół ds. przesyłania danych musi wprowadzić zmiany, aby upewnić się, że te typy reklam się nie wyświetlają.