Introducción al SDK de Vungle para Adobe AIR v. 5

Siga estas instrucciones para integrar nuestro plugin Adobe Air de Vungle en una aplicación básica de muestra. El código fuente de referencia está disponible en nuestro repositorio público de GitHub: .

Contenido

Antes de empezar

  • La extensión Vungle requiere Adobe AIR SDK 4.0 o superior. Para obtener instrucciones sobre cómo actualizar AIR SDK en Flash Builder o Flash Professional, consulte la sección “Notas adicionales”.

  • Si está trabajando con Android, la extensión Vungle AIR requiere que JDK 6 o JDK 7 (dependiendo de la versión de Flash que esté utilizando) esté instalado en el sistema de desarrollo. Se requiere Android 3.0 (Honeycomb - API versión 11) o posterior para que la aplicación se ejecute.

  • Puede consultar el texto ActionScript 3 Class Documentation.

  • Consulte example/VungleExample.as para obtener un ejemplo de clase de la aplicación. (Si utiliza Flash Professional, pero no sabe cómo utilizar una clase de documento, consulte “Cómo utilizar la clase de documento VungleExample.as en Animate o Flash Professional CS6” al final de este artículo). article.)

Paso 1. Incluya la biblioteca de extensiones

Comience creando un nuevo proyecto de AIR para dispositivos móviles y agregando la extensión nativa. Tendrá que añadir dos o tres archivos .ane:

  • com.vungle.extensions.Vungle.ane
  • com.vungle.extensions.android.AndroidSupportLib.ane
  • com.vungle.extensions.android.GooglePlayServices.ane (Si es para Android, es posible que también necesite agregar la biblioteca de Servicios de Google Play a su proyecto. Pero como muchas otras extensiones ya incluyen esta biblioteca, es posible que ya esté presente).

Para Animate y Flash Professional CS6 o superior

  1. Cree un nuevo proyecto de AIR para Android o AIR para iOS.
  2. Seleccione Archivo → Ajustes de publicación…
  3. Seleccione el ícono de llave junto a Script para acceder a los “Ajustes de ActionScript”.
  4. En la pestaña Ruta de la biblioteca, haga clic en Examinar archivo de extensión nativa (ANE) y seleccione el archivo de vungle.extensions.Vungle.ane. Haga clic en Aceptar.
  5. Seleccione el ícono de llave junto a Objetivo para acceder a los “Ajustes del reproductor”.
  6. Si es para Android: en la pestaña Permisos, habilite 'INTERNET', 'WRITE_EXTERNAL_STORAGE' y 'ACCESS_NETWORK_STATE'.
  7. Seleccione la opción Administrar manualmente las adiciones de permisos y manifiestos en esta aplicación y haga clic en Aceptar.
  8. Repita los pasos 1 a 7, esta vez seleccionando com.vungle.extensions.android.AndroidSupportLib.ane en el paso 4.
  9. Si es para Android y esta biblioteca no está presente, repita los pasos de nuevo, seleccionando ahora el archivo com.vungle.extensions.android.GooglePlayServices.ane en el paso 4.

Para Flash Builder 4.6 o superior

  1. En Propiedades del proyecto, bajo Ruta de acceso de compilación de Actionscript, seleccione Extensiones nativas.
  2. Elija Añadir ANE… y vaya al archivo vungle.extensions.Vungle.ane.
  3. Seleccione Empaquetado y compilación de Actionscript → Google Android.
  4. En la pestaña Extensiones nativas, seleccione la opción Paquete junto a la extensión.
  5. Repita los pasos 1 y 2, esta vez seleccionando com.vungle.extensions.android.AndroidSupportLib.ane en el paso 2.
  6. Si se centra en iOS, repita los pasos 3 y 4 para “Apple iOS”.

Paso 2. Actualice el descriptor de su aplicación

Para que Vungle funcione, se deben realizar cambios en el archivo XML de su aplicación. Modifique el archivo XML creado por su IDE de la siguiente manera.

Nota: Si usa Flash Professional, asegúrese de seguir los pasos mencionados previamente para incluir la biblioteca de extensión “Para Animate y Flash Professional CS6 o superior”; de lo contrario, es posible que Flash anule las modificaciones a medida que las realice.

  1. Configure su AIR SDK en 4.0 (o posterior) en el archivo descriptor de la aplicación:
    <application xmlns="http://ns.adobe.com/air/application/4.0">
  2. Incluya un enlace a la extensión en el descriptor:
    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    <extensionID>com.vungle.extensions.android.AndroidSupportLib</extensionID>
    </extensions>
  3. Si se centra en Android: es posible deba añadir la extensión de los servicios de Google Play. Agregue también la id. de la extensión aquí.
    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    <extensionID>com.vungle.extensions.android.AndroidSupportLib</extensionID>
    <extensionID>com.vungle.extensions.android.GooglePlayServices</extensionID>
    </extensions>

Para aplicaciones de AIR centradas en Android

Si es para Android, actualice sus adiciones de manifiestos de Android en el elemento XML de Android para:

  • incluir los permisos INTERNET, WRITE_EXTERNAL_STORAGE y ACCESS_NETWORK_STATE
  • añadir las definiciones de actividades VideoFullScreenAdActivity,MraidFullScreenAdActivity, y MraidFullScreenAdActivity
  • agregar la etiqueta de metadatos de la versión de google-play-services:
     <android> <manifestAdditions><![CDATA[ <manifest android:installLocation="auto"> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="18" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <application> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/> <activity android:name="com.vungle.publisher.VideoFullScreenAdActivity" android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize" android:theme="@android:style/Theme.NoTitleBar.Fullscreen"/> <activity android:name="com.vungle.publisher.MraidFullScreenAdActivity" android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize" android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"/> <activity android:name="com.vungle.publisher.FlexViewAdActivity" android:configChanges="keyboardHidden|orientation|screenSize|screenLayout|smallestScreenSize" android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"/> </application> </manifest> ]]></manifestAdditions> </android>

Paso 3. Integre el API de Vungle

Puede añadir la API de Vungle a su aplicación con algunas líneas de ActionScript.

Inicialice la extensión de Vungle

Nota: Se crea automáticamente una ubicación por defecto para cada aplicación. Debe proporcionar la id. de referencia de la ubicación en este paso de la inicialización independientemente de si desea aprovechar la funcionalidad de las ubicaciones. Si crea varias ubicaciones, proporcione todas las id. de referencia.

Inicialice la API cuando inicie su aplicación.

  • Si utiliza ActionScript puro, realice este paso en el constructor de su clase de documento.
  • Si utiliza Flex, invóquelo en el evento initialize() de la clase principal.
  • Si utiliza código de línea de tiempo en Flash, realice este paso en el Cuadro (Frame) 1.
  1. Importar las clases de API:
    import com.vungle.extensions.*; import com.vungle.extensions.events.*;
  2. Inicialice la API llamando a create() y pasando una cadena de la id. de su aplicación y una matriz que contenga la id. de referencia de ubicación de la aplicación desde el panel de control de Vungle. Si se dirige tanto a iOS como a Android desde el mismo proyecto, proporcione la id. de aplicación diferente y su matriz de ubicación por plataforma al método create().

    Envuelva su llamada a Vungle.create() en un try/catch porque Vungle puede arrojar un error durante el proceso de creación (por ejemplo, la extensión arroja un error si se ejecuta en el escritorio):
    try { // initialize with your app id Vungle.create("your_vungle_id", [“placement1”, “placement2”, “placement3”]); } catch (error:Error) { // could not create extension. Are you running on something besides iOS/Android? }

Cargar un anuncio con ubicación

Para reproducir un anuncio con ubicación, debe cargarlo. Tenga en cuenta que la ubicación de almacenamiento automático en caché no requiere que se invoque este método. El SDK intentará cargar la ubicación de almacenamiento automático en caché internamente.

Vungle.vungle.loadAd(“non_auto_cached_placement”);

Reproducir un anuncio con ubicación

Los monitores de eventos le indicarán cuando el anuncio esté listo para reproducirse. Cuando una ubicación se encuentre lista, podrá reproducir un anuncio.

If (Vungle.vungle.isAdAvailable(“placement_id”)) { Vungle.vungle.playAd(“placement_id”); }

Agregar monitores de eventos

La extensión de Vungle envía cuatro eventos: VungleEvent.AD_PLAYABLE, VungleEvent.AD_STARTED, VungleEvent.AD_FINISHED, VungleEvent.AD_FAILED, VungleEvent.AD_INIT y VungleEvent.AD_LOG.

  1. La notificación de evento AD_PLAYABLE se envía cuando un anuncio está listo para reproducir.
    Vungle.vungle.addEventListener(VungleEvent.AD_PLAYABLE, onAdPlayable); function onAdPlayable(e:VungleEvent):void { if (e.isAdPlayable) { trace(“ad is playable for placement: “ + e.placement); Vungle.vungle.playAd(e.placement); } else { trace(“ad not playable for placement: “ + e.placement); } }
  2. Los eventos AD_STARTED y AD_FINISHED se envían cuando se muestra y descarta un anuncio, respectivamente:
    Vungle.vungle.addEventListener(VungleEvent.AD_STARTED, onAdStarted); Vungle.vungle.addEventListener(VungleEvent.AD_FINISHED, onAdFinished); function onAdStarted(e:VungleEvent):void { trace("ad displayed for placement: " + e.placement); } function onAdFinished(e:VungleEvent):void { trace("ad dismissed for placement: “ + e.placement + “, CTA = " + e.wasCallToActionClicked); if (e.wasSuccessfulView) { trace("counts a completed view - present reward."); } }
  3. El evento AD_INIT se envía cuando el SDK de Vungle finaliza la inicialización.
    function onAdInit(e:VungleEvent):void { trace(“Vungle SDK is initialized: “ + e.isInitialized”); }
  4. El evento AD_LOG se envía cuando el SDK de Vungle envía un mensaje de registro. Puede usarlo para la depuración. El registro de eventos solo se implementa en el SDK de Vungle para iOS, por lo que este evento es específico de esa plataforma.
    Vungle.vungle.setLoggingEnabled(true); Vungle.vungle.addEventListener(VungleEvent.AD_LOG, onAdLog); private function onAdLog(e:VungleEvent):void { log("ad log: " + e.message); }

Más opciones

Como ya ha visto, puede pasar un objeto con opciones de configuración cuando llama al método playAd().

Nota: Los anuncios con recompensa se mencionan en algunos casos como anuncios incentivados; ambos términos se refieren siempre al mismo tipo de anuncio publicitario. En el código del SDK y en nuestra API de informes, usamos el término “anuncios incentivados”.

Estas son las propiedades disponibles en VungleAdConfig:

Opción

Valor

Descripción

orientation

VungleOrientation

Android

VungleOrientation.AUTO_ROTATE

VungleOrientation.ANDROID_MATCH_VIDEO

iOS

VungleOrientation.IOS_LANDSCAPE

VungleOrientation.IOS_PORTRAIT

soundEnabled

Expresión booleana

Si es verdadero (predeterminado), se habilitará el sonido durante la reproducción de un anuncio de video, sujeto a los ajustes de sonido del dispositivo. Si es falso, la reproducción del video se silenciará. Tenga en cuenta que el usuario puede silenciar o activar el sonido durante la reproducción.

backButtonImmediatelyEnabled

Expresión booleana

Solo para Android. Si es verdadero, permite que el usuario salga inmediatamente de un anuncio con el botón para retroceder. Si es falso (predeterminado), el usuario no podrá usar el botón para retroceder para salir del anuncio hasta que el botón para cerrar se muestre en la pantalla.

immersiveMode

Expresión booleana

Solo para Android. Si es verdadero, permite el modo inmersivo en dispositivos con KitKat+. Es falso por defecto.

incentivizedUserId

String (cadena)

Puede establecer que una id. de usuario único pase a su aplicación con el fin de verificar si el usuario debe recibir una recompensa por ver un anuncio incentivado.

flexViewCloseTimeInSec

Entero

Utilice esta opción para hacer que los anuncios Flex Fiew se descarten automáticamente después de la cantidad de segundos especificada.
Esta función solo trabaja con anuncios Flex View.

incentivizedCancelDialogTitle

String (cadena)

Puede personalizar un mensaje que se mostrará a los usuarios cuando intenten cerrar el video antes de que finalice.

 

Nota: esta opción solo se aplica al tipo de anuncio estándar de Vungle y no a los anuncios de plantilla dinámica. La opción que se aplica a los anuncios de plantilla dinámica se podrá especificar en el panel de control y cuenta con las mismas opciones.

incentivizedCancelDialogBodyText

incentivizedCancelDialogCloseButtonText

incentivizedCancelDialogKeepWatchingButtonText

Ejemplo de código:

var adConfig:VungleAdConfig = new VungleAdConfig(); adConfig.orientation = VungleOrientation.ANDROID_MATCH_VIDEO | VungleOrientation.IOS_LANDSCAPE; adConfig.soundEnabled = false; android: { adConfig.backButtonImmediatelyEnabled = true; adConfig.immersiveMode = true; }; adConfig.incentivizedUserId = "vungle_test_user"; adConfig.incentivizedCancelDialogBodyText = "body_text"; adConfig.incentivizedCancelDialogCloseButtonText = "close_button_text"; adConfig.incentivizedCancelDialogKeepWatchingButtonText = "continue_button_text"; adConfig.incentivizedCancelDialogTitle = "title_text"; Vungle.vungle.playAd(placement, adConfig);

Valores globales por defecto

Puede usar el objeto de configuración global para establecer valores por defecto para las siguientes opciones:

// set any configuration options you like VungleAdConfig.globalConfig.orientation = VungleOrientation.ANDROID_MATCH_VIDEO; VungleAdConfig.globalConfig.soundEnabled = false;

Luego, cada nuevo objeto VungleAdConfig que se cree contará con estos valores por defecto. playAd() sin opciones también implementa la configuración global.

Nota: mientras que su aplicación esté en modo de prueba, no podrá descargar ninguna de las aplicaciones anunciadas. Además, el panel de control no mostrará la cantidad de impresiones. Esto se debe a que los anuncios de prueba solo se utilizan para verificar que el SDK se ha integrado correctamente. Esta funcionalidad estará disponible cuando su aplicación haya empezado a funcionar y se encuentre en modo activo.

Anuncios de Flex View

Para cerrar mediante programación un anuncio Flex View, invoque la función closeFlexViewAd después de que el anuncio haya comenzado:

Vungle.vungle.closeFlexViewAd(placement);

Esta función solo funciona con anuncios de Flex View y solo en el SDK de Vungle para iOS.

Notas adicionales

Cómo usar la clase de documento VungleExample.as en Animate o en Flash Professional CS6

  1. En primer lugar, cree la aplicación y añada la extensión siguiendo los pasos 1 a 3 de este artículo de integración.
  2. Copie y pegue en la misma carpeta de su archivo .fla. No copie y pegue su contenido en la línea de tiempo.
  3. Cambie las id. de la aplicación y las id. de ubicación en la línea 20 a sus id. de Vungle.
  4. En propiedades de Flash, bajo Clase de documento, escriba VungleExample y haga clic en Aceptar.
  5. Compile e instale la aplicación.

Cómo instalar una versión más reciente del SDK de AIR (4.0 o superior) en Flash Professional CS6

Siga este enlace para acceder al SDK de AIR más reciente. Si ya instaló AIR 4.0 o superior, puede omitir este paso. De lo contrario, siga las instrucciones a continuación:

  1. Descomprima el paquete del SDK de AIR 4.0 o superior en una ubicación de su disco duro.
  2. Ejecute Flash Professional CS6.
  3. Seleccione Ayuda → Administrar el SDK de AIR…
  4. Haga clic en el botón del signo + (más) y navegue hasta la ubicación del SDK de AIR descomprimido.
  5. Haga clic en Aceptar.
  6. Seleccione Archivo → Ajustes de publicación.
  7. Seleccione el SDK de AIR más reciente para iOS en el menú desplegable Objetivo.

Cómo instalar una versión más reciente del SDK de AIR (4.0 o superior) en Flash Builder

Siga este enlace para acceder al SDK de AIR más reciente. Si ya instaló AIR 4.0 o superior, puede omitir este paso. Además, puede aprovechar las instrucciones para actualizar los SDK de AIR en Flash Builder más recientes de Adobe.

Solución del error de “Entrada inválida de Adobe Animate”

Si recibe el error que se muestra en la imagen a continuación, consulte este artículo.

image2.png

¿Tiene más preguntas? Enviar una solicitud

Comentarios