Interface utilisateur personnalisée avec le SDK IMA pour Android

Ce guide explique comment implémenter votre propre interface utilisateur personnalisée à l'aide du SDK IMA pour Android. Pour ce faire, vous devez désactiver l'UI par défaut, configurer une nouvelle UI personnalisée, puis remplir la nouvelle UI avec les informations d'annonce obtenues à partir du SDK.

Désactiver l'UI de l'annonce

Pour afficher une UI personnalisée, vous devez d'abord désactiver l'UI par défaut des annonces. Pour ce faire, appelez AdsRenderingSettings.setDisableUi(), puis transmettez 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);
}

Par la suite, chaque fois que vous devez décider d'afficher ou non votre UI personnalisée, vérifiez s'il existe une annonce et appelez Ad.isUiDisabled() pour vous assurer que l'UI par défaut des annonces a été désactivée.

Afficher l'interface utilisateur personnalisée

Une fois l'UI par défaut désactivée, l'étape suivante consiste à afficher une UI d'annonce personnalisée. Pour cet exemple, ajoutez un nouveau RelativeLayout à la mise en page existante de votre lecteur vidéo, puis affichez cette mise en page lorsqu'une annonce est en cours de lecture et masquez-la lorsqu'aucune annonce n'est diffusée.

Ajoutez le code suivant au fichier de mise en page de fragment:

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>

Ajoutez ensuite le code permettant d'utiliser l'interface utilisateur personnalisée dans Activity. Pour mettre à jour l'UI, créez un minuteur Handler et une Runnable qui s'exécute sur celui-ci.

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

Compteur d'annonces et bouton "Ignorer"

À présent, définissez la fonction updateCustomUi() pour renseigner l'interface utilisateur avec les informations sur les annonces. Les détails varient selon le format de l'annonce, mais vous devez généralement inclure le compteur d'annonces et un bouton "Ignorer" ou un compteur "Ignorer" si l'annonce est désactivable. Ajoutez les éléments suivants :

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

Dans le code ci-dessus, après avoir vérifié s'il existe une annonce et appelé Ad.isUiDisabled() pour vérifier que l'UI des annonces par défaut a été désactivée, appelez Ad.getAdPodInfo() et AdsManager.getAdProgress() pour connaître la position de l'annonce dans la série d'annonces et sa progression. Pour les annonces désactivables, affichez un compteur "Ignorer" si vous ne pouvez pas encore ignorer l'annonce. Sinon, affichez un bouton "Ignorer". Vous trouverez ci-dessous un récapitulatif des informations courantes relatives aux annonces et des appels associés:

Informations Call
Annonce actuelle dans la série d'annonces Ad.getAdPodInfo().getAdPosition()
Nombre total d'annonces dans la série d'annonces Ad.getPodInfo().getTotalAds()
Annonce désactivable Ad.isSkippable()
Nombre de secondes avant que l'annonce puisse être ignorée Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Secondes restantes dans l'annonce (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

Cliquer sur le bouton Ignorer l'annonce devrait ignorer l'annonce. Vous devez donc le configurer en plus du bouton En savoir plus:

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

L'interface utilisateur doit être désactivée pour que AdsManager.clicked() fonctionne.

Dépannage

Disposez-vous d'un exemple de balise qui est activée pour désactiver l'UI des annonces ?
Vous pouvez copier l'URL de cet exemple de tag et la coller dans votre intégration IMA.
Je ne peux pas désactiver l'interface utilisateur par défaut.
Assurez-vous d'appeler AdsRenderingSettings.setDisableUi() et de le transmettre à AdsManager. Vérifiez que Ad.isUiDisabled() renvoie true. En outre, votre réseau doit être activé dans Ad Manager pour désactiver l'interface utilisateur d'une annonce. Si vous êtes activé, votre VAST contient un Extension qui se présente comme suit : 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
Si le problème persiste, vérifiez auprès de votre responsable de compte que vous avez bien activé cette fonctionnalité. Certains types d'annonces nécessitent une interface utilisateur spécifique. Ces annonces sont renvoyées avec une valeur <UiHideable> égale à 0. Dans ce cas, votre équipe de trafficking devra effectuer des modifications pour que ces types d'annonces ne soient pas diffusés.