Benutzerdefinierte Benutzeroberfläche mit dem IMA SDK für Android

In diesem Leitfaden erfahren Sie, wie Sie mit dem IMA SDK für Android Ihre eigene benutzerdefinierte Benutzeroberfläche implementieren. Dazu müssen Sie die Standard-UI deaktivieren, eine neue benutzerdefinierte UI einrichten und dann die neue UI mit Anzeigeninformationen aus dem SDK füllen.

Hinweis: Ihr Google Ad Manager-Konto muss aktiviert sein, damit Sie diese Funktion nutzen können. Weitere Informationen erhalten Sie von Ihrem Account Manager.

Hinweis :Dieses Beispiel baut auf dem BasicExample für Android auf.

Anzeigen-UI deaktivieren

Um eine benutzerdefinierte Benutzeroberfläche anzuzeigen, müssen Sie zuerst die Standard-Anzeigen-Benutzeroberfläche deaktivieren. Rufen Sie dazu AdsRenderingSettings.setDisableUi() auf und übergeben Sie AdsRenderingSettings an 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);
}

Wenn Sie anschließend entscheiden, ob Ihre benutzerdefinierte UI verwendet werden soll, prüfen Sie, ob eine Anzeige vorhanden ist. Rufen Sie dann Ad.isUiDisabled() auf, um zu prüfen, ob die Standard-UI für Anzeigen deaktiviert wurde.

Benutzerdefinierte Benutzeroberfläche anzeigen

Nach dem Deaktivieren der Standard-Benutzeroberfläche besteht der nächste Schritt darin, eine benutzerdefinierte Anzeigen-Benutzeroberfläche anzuzeigen. In diesem Beispiel kannst du dem vorhandenen Videoplayer-Layout ein neues RelativeLayout-Element hinzufügen. Dieses Layout wird dann angezeigt, wenn eine Anzeige wiedergegeben wird, und ausblenden, wenn keine Anzeigen wiedergegeben werden.

Fügen Sie Folgendes zur Fragment-Layoutdatei hinzu:

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>

Fügen Sie dann den Code für die Verwendung der benutzerdefinierten UI zu Activity hinzu. Erstellen Sie zum Aktualisieren der UI einen Timer Handler und einen Runnable, der darauf ausgeführt wird.

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

Anzeigenzähler und Schaltfläche „Überspringen“

Definieren Sie nun die Funktion updateCustomUi(), um die Benutzeroberfläche mit Anzeigeninformationen zu füllen. Die Details variieren je nach Anzeigenformat. Wenn die Anzeige überspringbar ist, fügen Sie normalerweise den Anzeigenzähler sowie eine Schaltfläche zum Überspringen oder einen Zähler für das Überspringen ein. Geben Sie folgende Ausdrücke ein. (Verwenden Sie hier und im weiteren Verlauf des Labs jeweils nur die englischen Begriffe):

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

Nachdem Sie im Code oben geprüft haben, ob eine Anzeige vorhanden ist, und Ad.isUiDisabled() aufgerufen wurde, um zu prüfen, ob die Standard-Anzeigen-UI deaktiviert wurde, rufen Sie Ad.getAdPodInfo() und AdsManager.getAdProgress() auf, um die Position der Anzeige im Pod und den Fortschritt der Anzeige zu ermitteln. Blenden Sie bei überspringbaren Anzeigen einen Zähler für das Überspringen ein, wenn Sie die Anzeige noch nicht überspringen können. Andernfalls müssen Sie eine Schaltfläche zum Überspringen einfügen. Hier eine Zusammenfassung allgemeiner Anzeigeninformationen und zugehöriger Aufrufe:

Informationen	Call
Aktuelle Anzeige im Pod	Ad.getAdPodInfo().getAdPosition()
Gesamtzahl der Anzeigen im Pod	Ad.getPodInfo().getTotalAds()
Ist die Anzeige überspringbar?	Ad.isSkippable()
Sekunden, bis die Anzeige übersprungen werden kann	Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Verbleibende Sekunden der Anzeige	(AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Durch Klicken auf die Schaltfläche Anzeige überspringen wird die Anzeige übersprungen. Richten Sie dies also zusätzlich zur Schaltfläche Weitere Informationen ein:

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

Die UI muss deaktiviert sein, damit AdsManager.clicked() funktioniert.

Fehlerbehebung

Haben Sie ein Beispiel-Tag, das für die Deaktivierung der Anzeigen-UI aktiviert ist?

Sie können die URL dieses Beispiel-Tags kopieren und in Ihre IMA-Implementierung einfügen.

Ich kann die Standardbenutzeroberfläche nicht deaktivieren.

Achten Sie darauf, dass AdsRenderingSettings.setDisableUi() aufgerufen und an AdsManager übergeben wird. Prüfen Sie, ob Ad.isUiDisabled() true zurückgibt. Wenn Sie eine Anzeigen-UI deaktivieren möchten, muss Ihr Netzwerk in Ad Manager aktiviert sein. Wenn diese Funktion aktiviert ist, enthält Ihr VAST ein Extension, das so aussieht:

<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>

Sollten weiterhin Probleme auftreten, fragen Sie Ihren Account Manager, ob die Funktion aktiviert ist. Einige Anzeigentypen erfordern eine bestimmte UI. Diese Anzeigen werden mit einem <UiHideable>-Wert von 0 zurückgegeben. In diesem Fall muss Ihr Trafficking-Team Änderungen vornehmen, damit diese Anzeigentypen nicht ausgeliefert werden.