En esta guía, se muestra cómo implementar tu propia IU personalizada con el SDK de IMA para Android. Para hacerlo, debes inhabilitar la IU predeterminada, configurar una IU personalizada nueva y, luego, propagar la IU nueva con información del anuncio que obtengas del SDK.
Cómo inhabilitar la IU del anuncio
Si deseas mostrar una IU personalizada, primero debes inhabilitar la IU del anuncio predeterminada. Para ello, llama a AdsRenderingSettings.setDisableUi() y, luego, pasa el AdsRenderingSettings a 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);
}
Luego, siempre que necesites decidir si quieres mostrar tu IU personalizada, verifica si hay un anuncio y llama a Ad.isUiDisabled() para comprobar que se haya inhabilitado la IU predeterminada del anuncio.
Mostrar IU personalizada
Una vez que se haya inhabilitado la IU predeterminada, el siguiente paso es mostrar una IU del anuncio personalizada.
En este ejemplo, agrega un RelativeLayout nuevo a tu diseño de reproductor de video existente. Luego, muestra este diseño cuando se reproduzca un anuncio y ocúltalo cuando no se reproduzca ningún anuncio.
Agrega lo siguiente al archivo de diseño del fragmento:
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>
Luego, agrega el código para usar la IU personalizada a Activity. Para actualizar la IU, crea un temporizador Handler y un Runnable que se ejecuten en él.
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);
}
Contador de anuncios y botón Omitir
Ahora define la función updateCustomUi() para propagar la IU con información del anuncio.
Los detalles varían según el formato del anuncio, pero por lo general incluyes el contador de anuncios y un botón de omisión o el contador de omisiones si el anuncio se puede omitir. Agrega las siguientes:
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);
}
}
En el código anterior, después de verificar si hay un anuncio y llamar a Ad.isUiDisabled() para comprobar que se inhabilitó la IU del anuncio predeterminada, llama a Ad.getAdPodInfo() y AdsManager.getAdProgress() para encontrar la posición del anuncio en el grupo y su progreso. En el caso de los anuncios que se pueden omitir, muestra un contador de omisiones si aún no puedes omitirlo. De lo contrario, muestra un botón Omitir. A continuación, te presentamos un resumen de la información común sobre los anuncios y las llamadas asociadas:
| Información | Call |
|---|---|
| Anuncio actual del grupo de anuncios | Ad.getAdPodInfo().getAdPosition() |
| Total de anuncios en el grupo de anuncios | Ad.getPodInfo().getTotalAds() |
| El anuncio se puede omitir | Ad.isSkippable() |
| Segundos para que se pueda omitir el anuncio | Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime() |
| Segundos restantes en el anuncio | (AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000 |
Si haces clic en el botón Omitir anuncio, se debería omitir el anuncio. Por lo tanto, configúralo junto con el botón Más informació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();
}
});
La IU debe estar inhabilitada para que AdsManager.clicked() funcione.
Solución de problemas
- ¿Tienes una etiqueta de muestra que esté habilitada para inhabilitar la IU del anuncio?
- Puedes copiar la URL de esta etiqueta de muestra y pegarla en tu implementación de IMA.
- No puedo inhabilitar la IU predeterminada.
- Asegúrate de llamar a
AdsRenderingSettings.setDisableUi()y pasarlo aAdsManager. Verifica queAd.isUiDisabled()muestretrue. Además, su red debe estar habilitada en Ad Manager para inhabilitar una IU de anuncios. Si está habilitado, tu VAST contiene unExtensionque se ve de la siguiente manera:<Extension type="uiSettings"> <UiHideable>1</UiHideable> </Extension>
Si los problemas persisten, consulta con tu administrador de cuentas para confirmar que estás habilitado. Algunos tipos de anuncios requieren una IU específica. Estos anuncios se muestran con un valor<UiHideable>de 0. Si esto ocurre, tu equipo de coordinación de anuncios deberá realizar cambios para asegurarse de que estos tipos de anuncios no se publiquen.