Personalización de la interfaz de usuario de anuncios de Android con inserción de anuncios del lado del servidor (SSAI)

En este tema, aprenderá a administrar y personalizar los elementos de la interfaz de usuario que se muestran durante la reproducción de anuncios del lado del servidor, utilizando el complemento SSAI para Brightcove Native SDK para Android.

Resumen

Al trabajar con la inserción de anuncios del lado del servidor (SSAI), Brightcove Native SDK para Android le permite personalizar los elementos de la interfaz de usuario del anuncio. Para obtener más detalles sobre SSAI, consulte lo siguiente:

Implementación de anuncios del lado del servidor con los SDK del reproductor nativo

La interfaz de usuario del anuncio se compone de dos componentes principales:

Superposición de anuncios (A)
Controlador de medios publicitarios (B)

Componentes de la interfaz de usuario del anuncio

Superposición de anuncios

La superposición de anuncios se compone de estos componentes:

Cuenta atrás de la duración total del grupo de anuncios (A)
Ver más información (B)
Omitir vista de anuncio (C)

Controlador de medios publicitarios

El controlador de medios publicitarios se compone de estos componentes, de izquierda a derecha:

Botón de reproducción (A)
Cuenta regresiva del número de anuncio (B)
Cuenta atrás de la duración del anuncio único (C)
Botón de pantalla completa (D)

Administrar componentes de la interfaz de usuario de anuncios

Para habilitar o deshabilitar los componentes de la interfaz de usuario del anuncio desde la vista, consulte lo siguiente:

Modificar el documento VAST
Especificar la configuración de anuncios

Modificar el documento VAST

La Aprende más y Omitir aviso publicitario las vistas se pueden mostrar u ocultar según la definición del anuncio en el documento VAST.

La Aprende más La vista aparecerá solo cuando la creatividad lineal contenga una ClickThrough URL, como se muestra aquí:

 <VAST xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Ad id="blue-01-5s">
    <InLine>
      ...
      <Creatives>
        <Creative id="creative-01-5s">
          <Linear>
            ...
            <VideoClicks>
              <ClickThrough id="clickthrough">https://www.brightcove.com/en/</ClickThrough>
              <ClickTracking id="...”>...</ClickTracking>
            </VideoClicks>
          </Linear>
        </Creative>
      </Creatives>
    </InLine>
  </Ad>
</VAST>

La Omitir aviso publicitario La vista aparecerá solo cuando haya una skipoffset valor en la creatividad lineal:

 <VAST xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <Ad id="blue-01-5s">
    <InLine>
      ...
      <Creatives>
        <Creative id="creative-01-5s">
          <Linear skipoffset="00:00:03">
            ...
          </Linear>
        </Creative>
      </Creatives>
    </InLine>
  </Ad>
</VAST>

Especificar la configuración de anuncios

Cuando usas Mejoras de jugador para Live SSAI , puede habilitar o deshabilitar componentes dentro del application_ad_configuration de la configuración de su anuncio. La client_options El objeto le permite activar o desactivar los componentes de la interfaz de usuario del anuncio.

{
  "application_ad_configuration": {
	"ad_configuration_description": "$YOUR_DESCRIPTION",
	"ad_configuration_expected_response_type": "Vast",
	"ad_configuration_headers_for_impressions": false,
	"ad_configuration_strategy": "SingleAdResponse",
	"ad_configuration_transforms": [],
	"ad_configuration_url_format": "$YOUR_AD_SERVER",
     "ad_configuration_client_sdk_enabled": true,
     "client_options": {
        "show_ad_break_remaining_time": true / false,
        "show_ad_remaining_time": true / false,
        "show_number_of_remaining_ads": true / false,
        "client_only_tracking": true / false
     }
  },
  "application_description": "$YOUR_DESCRIPTION"
}

Si está usando alguna client_options componentes, debe tener ad_configuration_client_sdk_enabled ajustado a true.

Utilice el objeto client_options para habilitar / deshabilitar los siguientes componentes:

Show_ad_break_remaining_time: La cuenta atrás de la duración total del grupo de anuncios
- Ejemplo: Su video se reanudará en 15 segundos.
Show_ad_remaining_time: La cuenta regresiva de la duración del anuncio único
- Ejemplo: (0:15)
Show_number_of_remaining_ads: La cuenta regresiva del número de anuncio
- Ejemplo: Anuncio 1 de 3 , Anuncio 2 de 3 etc.

Personalización de la superposición de anuncios

Puede personalizar las vistas y el texto predeterminado asociado con la superposición de anuncios.

Modificar la vista

Para personalizar la superposición de anuncios, puede reemplazar su versión del ssai_ad_overlay.xml archivo de diseño en la aplicación res carpeta. Este archivo contiene varios diseños independientes diferentes, como se muestra aquí:

Por ejemplo, puede anular la vista de duración del grupo de anuncios actualizando el ssai_ad_pod_duration_countdown_view.xml expediente. También puede anular la vista de superposición de anuncios completa reemplazando el ssai_ad_overlay.xml expediente.

Esta estructura de diseño le permite anular componentes particulares mientras mantiene la compatibilidad con versiones anteriores del complemento SSAI.

Explore los archivos de superposición de anuncios con Android Studio. A partir de la versión 6.9.0 del SDK nativo para Android, el complemento SSAI ssai_ad_overlay.xml Se ve como esto:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:background="@color/white">

   <include layout="@layout/ssai_ad_countdown_and_learn_more_overlay"/>
   <include layout="@layout/ssai_ad_skip_overlay"/>
</FrameLayout>

Al reemplazar un archivo xml de componente, debe usar un TextView con el ID de vista original especificado para evitar resultados no deseados. Para obtener más detalles, consulte la siguiente tabla

Nombre del componente	ID de componente	Vista de componentes
Vista de duración del grupo de anuncios	`text_ad_countdown`	`TextView`
Más información ver	`text_ad_learn_more`	`TextView`
Omitir vista de anuncio	`text_ad_skip`	`TextView`

Modificar el texto predeterminado

Todos los componentes de superposición de anuncios son TextViewss definido en su aplicación string.xml expediente. Para cambiar el texto de la pantalla, anótelo creando un string o plurals elemento con el mismo ID de cadena utilizado por el SDK nativo para Android.

La Duración del grupo de anuncios view utiliza las siguientes cadenas:

<plurals name="ssai_message_ad_break_duration_countdown">
   <item quantity="one">Your video will resume in\n%1$d second</item>
   <item quantity="other">Your video will resume in\n%1$d seconds</item>
</plurals>
<string name="ad_info_now_text">Your video will resume now</string>
<string name="ad_buffering_text">Your ad is buffering …</string>

La Aprende más view usa la siguiente cadena:

<string name="ssai_message_learn_more">Learn More >> </string>

La Omitir aviso publicitario view utiliza las siguientes cadenas:

<plurals name="you_can_skip_text">
   <item quantity="one">You can skip this ad in\n%d second</item>
   <item quantity="other">You can skip this ad in\n%d seconds</item>
</plurals>
<string name="skip_text">Skip Ad</string>

Personalización del controlador de medios publicitarios

Puede personalizar las vistas y el texto predeterminado asociado con Ad Media Controller.

Modificar la vista

Para personalizar Ad Media Controller, puede reemplazar su versión del default_ssai_ad_media_controller.xml archivo de diseño en la aplicación res carpeta.

Esto anula el diseño predeterminado utilizado en el complemento SSAI. Cada vez que se detecta un anuncio, el complemento SSAI cambiará a este diseño y luego volverá al controlador predeterminado cuando finalice el anuncio.

Cuando trabaje con su propio diseño, utilice el mismo tipo de vista y los mismos ID de vista que se especificaron originalmente para evitar resultados no deseados. Explore el diseño de Ad Media Controller con Android Studio. Para la versión 6.9.0 del complemento SSAI, el default_ssai_ad_media_controller.xml Se ve como esto:

<com.brightcove.player.mediacontroller.BrightcoveControlBar
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/brightcove_control_bar"
   style="@style/SSAIAdControlBar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="bottom"
   android:background="@color/bmc_background"
   android:orientation="vertical"
   android:padding="8dp">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:gravity="bottom"
       android:orientation="horizontal">

       <Button style="@style/BorderlessButton"
           android:id="@id/play"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/brightcove_controls_play"
           android:visibility="gone"
           tools:visibility="visible"/>

       <include layout="@layout/ssai_ad_number_countdown_view"/>

       <include layout="@layout/ssai_single_ad_duration_countdown_view"/>

       <View
           android:id="@id/two_line_spacer"
           android:layout_width="0dp"
           android:layout_height="0dp"
           android:layout_weight="1"
           android:visibility="gone"
           tools:visibility="visible"/>

       <Button style="@style/BorderlessButton"
           android:id="@id/full_screen"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:padding="4dp"
           android:text="@string/brightcove_controls_enter_full_screen"
           android:visibility="gone"
           tools:visibility="visible"/>
   </LinearLayout>

</com.brightcove.player.mediacontroller.BrightcoveControlBar>

Los tipos de vista del componente SSAI Ad Media Controller y los ID de vista se describen aquí:

Nombre del componente	ID de componente	Vista de componentes
Botón de reproducción	`play`	Botón
Botón de pantalla completa	`full_screen`	Botón
Cuenta regresiva del número de anuncio	`text_ad_number_countdown`	Vista de texto
Cuenta regresiva de la duración de un solo anuncio	`text_single_ad_duration_countdown`	Vista de texto

Revisar la Aplicación de muestra de controles personalizados , donde el controlador de medios predeterminado está personalizado para agregar nuevos botones. Puede aplicar el mismo enfoque para personalizar su SSAI Ad Media Controller.

Modificar el texto predeterminado

Todos los componentes de Ad Media Controller son TextViewss definido en su aplicación string.xml expediente. Para cambiar el texto de la pantalla, anótelo creando un string o plurals elemento con el mismo ID de cadena utilizado por el SDK nativo para Android.

La Cuenta regresiva del número de anuncio view usa la siguiente cadena:

<string name="ssai_message_ad_number_countdown">Ad %1$d of %2$d</string>

La Cuenta regresiva de la duración de un solo anuncio view usa la siguiente cadena:

<string name="ssai_message_ad_duration_countdown">(%1$s)</string>

Resumen

Tiene algunas opciones para personalizar los elementos de la interfaz de usuario de SSAI. El nivel de complejidad dependerá de lo que quieras lograr. De bajo a alto nivel de complejidad, puede:

Configure / oculte ciertos componentes a través de su configuración de VAST
Muestre / oculte componentes usando el client_options objeto en la configuración de su anuncio (actualmente solo SSAI en vivo)
Cambiar el valor de la cadena que se muestra
Anular el diseño de la interfaz de usuario