Démarrez avec Vungle (SDK v. 5.1 et supérieur) - Adobe AIR

Suivez ces instructions pour intégrer notre plugin Vungle Adobe Air dans une application modèle standard. Le code source référencé ici est disponible sur notre dépôt public GitHub.

Contenu

Avant de commencer

  • L'extension Vungle exige un SDK Adobe AIR 4.0 ou supérieur. Pour obtenir des instructions sur la mise à jour du SDK AIR sous Flash Builder ou Flash Professional, reportez-vous à la section " Remarques supplémentaires ".

  • Si vous travaillez avec Android, l'extension Vungle AIR exige que JDK 6 ou JDK 7 (selon la version Flash que vous utilisez) soit installé sur le système de développement. Android 3.0 (Honeycomb - API version 11) ou supérieur est requis pour faire fonctionner l'application..

  • Vous pouvez vous reporter à la documentation classe ActionScript 3.

  • Examinez example/VungleExample.as pour obtenir un exemple de classe d'application. (Si vous être un utilisateur Flash Professional et ne savez pas comment utiliser une classe de document, reportez-vous à la section " Utilisation de la classe de document VungleExample.as sous Animate ou Flash Professional CS6 ? " à la fin de cet article.)

Étape 1. Inclure la bibliothèque d'extension

Commencez par créer un nouveau projet AIR pour mobile et ajoutez l'extension native.

Si vous ciblez Android, vous pouvez également ajouter la bibliothèque de services Google Play à votre projet. En raison des nombreuses autres extensions déjà incluses dans cette bibliothèque, elle peut être déjà présente. Pour ajouter l'extension, répétez les étapes ci-dessous, mais utilisez com.vungle.extensions.android.GooglePlayServices.ane au lieu de com.vungle.extensions.Vungle.ane.

Pour Animate et Flash Professional CS6 ou supérieur

  1. Créez un nouveau projet AIR pour Android ou projet AIR pour iOS.
  2. Sélectionnez Fichier → Paramètres de publication
  3. Sélectionnez l'icône de la clé à molette à côté de Script pour accéder aux paramètres ActionScript.
  4. Dans l'onglet Chemin d'accès à la bibliothèque, cliquez sur Rechercher le fichier (ANE) d'extension native et sélectionnez le fichier vungle.extensions.Vungle.ane. Cliquez sur OK.
  5. Sélectionnez l'icône de la clé à molette à côté de Cible pour accéder aux paramètres du lecteur.
  6. Si vous ciblez Android : dans l'onglet Permissions, activez INTERNET, WRITE_EXTERNAL_STORAGE et ACCESS_NETWORK_STATE.
  7. Sélectionnez l'option Gérer manuellement les permissions et les ajouts Manifest pour cette application et cliquez sur OK.

Sous Flash Builder 4.6 ou supérieur

  1. Dans Propriétés du projet, sous Chemin de génération Actionscript, sélectionnez Extensions natives.
  2. Choisissez Ajouter ANE... et naviguez jusqu'au fichier vungle.extensions.Vungle.ane.
  3. Sélectionnez Mise en package de la génération Actionscript → Google Android.
  4. Dans l'onglet Extensions natives, sélectionnez l'option Package à côté de l'extension.
  5. Si vous ciblez iOS, répétez les étapes 3 et 4 pour Apple iOS.

Étape 2. Mettre à jour votre descripteur d'application

Pour que Vungle fonctionne, des modifications doivent être apportées au fichier XML de votre application. Modifiez le fichier XML créé par votre IDE avec les modifications suivantes.

Remarque : si vous utilisez Flash Professional, veillez à suivre les étapes ci-dessus pour inclure la bibliothèque d'extension " pour Animate et Flash Professional CS6 ou supérieur '' ; sinon, Flash pourrait annuler vos modifications juste après leur application.

  1. Définissez votre SDK AIR sur 4.0 (ou supérieur) dans le fichier descripteur de l'application :
    <application xmlns="http://ns.adobe.com/air/application/4.0">
  2. Incluez un lien à l'extension dans le descripteur :
    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    </extensions>
  3. Si vous ciblez Android : vous devez inclure l'extension des services Google Play. Ajoutez également son ID d'extension.
    <extensions>
    <extensionID>com.vungle.extensions.Vungle</extensionID>
    <extensionID>com.vungle.extensions.android.GooglePlayServices</extensionID>
    </extensions>

Pour les applications AIR qui ciblent Android

Si vous ciblez Android, mettez à jour vos ajouts Android Manifest dans l'élément XML pour :

  • inclure les permissions INTERNET, WRITE_EXTERNAL_STORAGE et ACCESS_NETWORK_STATE
  • ajouter les définitions d'activité VideoFullScreenAdActivity,MraidFullScreenAdActivity, et MraidFullScreenAdActivity
  • ajouter la balise de métadonnées de la version 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>

Étape 3. Intégrer l'API Vungle

L'API Vungle peut être ajoutée à votre application en quelques lignes d'ActionScript.

Initialiser l'extension Vungle

Remarque : un emplacement par défaut est créé automatiquement pour chaque application. Vous devez fournir son ID de référence de l'emplacement lors de l'étape d'initialisation que vous envisagiez ou non de profiter de ses fonctions. Si vous créez plusieurs emplacements, fournissez tous les ID de référence.

Initialisez l'API lorsque votre application se lance.

  • Si vous utilisez du pur ActionScript, exécutez cette action dans le constructeur de votre classe de document.
  • Si vous utilisez Flex, faites l'appel dans l'événement initialize() de la classe principale.
  • Si vous utilisez un code de la ligne de temps sous Flash, faites-le sur la 1ere image.
  1. Importez les classes d'API :
    import com.vungle.extensions.*; 
    import com.vungle.extensions.events.*;
  2. Initialisez l'API en appelant create(), et en passant en paramètre d'entrée une chaîne de votre ID d'application et un tableau contenant l'ID de référence de l'emplacement de l'application provenant du tableau de bord Vungle. Si vous ciblez iOS et Android à partir du même projet, fournissez un ID d'application différent et son tableau d'emplacement par plateforme à la méthode create().

    Incluez l'appel vers Vungle.create()dans un try/catch car Vungle peut retourner une erreur lors du processus de création (par exemple, l'extension retourne une erreur en cas d'exécution sur le bureau) :
    try
    {
        // initialiser avec votre id d'application
        Vungle.create("your_vungle_id", [“placement1”, “placement2”, “placement3”]);
     
    } catch (error:Error) {
        // impossible de créer une extension. Exécutez-vous autre chose qu'iOS/Android ?
    }

Charger une publicité d'emplacement

Pour jouer une publicité d'emplacement, vous devez charger une publicité pour cet emplacement. Notez que votre emplacement mis en cache automatiquement n'exige pas que vous appeliez cette méthode. Le SDK essaiera de charger la publicité pour l'emplacement mis en cache automatiquement en interne.

Vungle.vungle.loadAd(“non_auto_cached_placement”);

Jouer une publicité d'emplacement

Vous aurez lorsque la publicité est prête à être jouée via les écouteurs d'événements. Lorsqu'un emplacement est disponible pour jouer une publicité, vous pouvez la jouer.

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

Ajouter des écouteurs d'événements

L'extension Vungle envoie quatre événements : VungleEvent.AD_PLAYABLE, VungleEvent.AD_STARTED, VungleEvent.AD_FINISHED, VungleEvent.AD_FAILED, VungleEvent.AD_INIT et VungleEvent.AD_LOG.

  1. L'événement AD_PLAYABLE est envoyé lorsqu'une publicité est prête à être jouée.
    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. Les événements AD_STARTED et AD_FINISHED sont envoyés lorsqu'une publicité est affichée et rejetée, respectivement : 
    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. L'événement AD_INIT est envoyé lorsque le SDK Vungle a terminé l'initialisation. 
    function onAdInit(e:VungleEvent):void
    {
        trace(“Vungle SDK is initialized: “ + e.isInitialized”);
    }
  4. L'événement AD_LOG est envoyé lorsqu'un message de journal est envoyé par le SDK Vungle. Vous pouvez l'utiliser pour le débogage. La journalisation est implémentée uniquement dans le SDK Vungle pour iOS, afin que cet événement soit propre à la plateforme. 
    Vungle.vungle.setLoggingEnabled(true);
    Vungle.vungle.addEventListener(VungleEvent.AD_LOG, onAdLog);
    
    private function onAdLog(e:VungleEvent):void
    {
        log("ad log: " + e.message);
    }

Plus d'options

Comme vous avez pu le constater, vous pouvez donner en paramètre un objet avec des options de configuration lorsque vous appelez la méthode playAd(). Voici les propriétés disponibles dans VungleAdConfig:

Option

Valeur

Description

orientation

VungleOrientation

Android

●      VungleOrientation.AUTO_ROTATE

●      VungleOrientation.ANDROID_MATCH_VIDEO

iOS

●      VungleOrientation.IOS_LANDSCAPE

●      VungleOrientation.IOS_PORTRAIT

soundEnabled

Booléen

Si true (par défaut), le son sera activé pendant la lecture de la publicité vidéo, sous réserve des réglages sonores de l'appareil. Si false, la lecture vidéo commencera en mode muet. Notez que l'utilisateur peut activer ou désactiver le son pendant la lecture.

backButtonImmediatelyEnabled

Booléen

Pour Android uniquement, si la valeur est true, cette option permet à l'utilisateur de quitter immédiatement une publicité grâce au bouton de retour. Si la valeur est false (par défaut), l'utilisateur ne peut pas utiliser le bouton de retour pour quitter la publicité, jusqu'à ce que le bouton de fermeture à l'écran s'affiche.

immersiveMode

Booléen

Pour Android uniquement, si la valeur est true, l'option active ou désactive le mode immersif sur les appareils KitKat+. La valeur est sur false par défaut)

incentivizedUserId

Chaîne

Vous pouvez définir un ID utilisateur unique à transmettre à votre application pour vérifier que cet utilisateur doit être récompensé pour avoir regardé une publicité qui répond au mécanisme d'incitation.

incentivizedCancelDialogTitle

Chaîne

Vous pouvez personnaliser un message à afficher aux utilisateurs lorsqu'ils tentent de fermer la vidéo avant qu'elle ne soit terminée.

 

Remarque : cette option s'applique uniquement aux publicités Vungle standard et non pas aux publicités Dynamic Template. L'option qui s'applique aux publicités Dynamic Template pourra être configurée sur le tableau de bord et dispose des mêmes options.

incentivizedCancelDialogBodyText

incentivizedCancelDialogCloseButtonText

incentivizedCancelDialogKeepWatchingButtonText

Exemple de code :

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

Valeurs globales par défaut

Vous pouvez utiliser l'objet de configuration globale pour définir des valeurs par défaut pour les options :

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

Ensuite, chaque nouvel objet VungleAdConfig est créé avec ces valeurs définies par défaut. playAd() sans option utilise également la configuration globale.

Remarque : quand votre application est en mode Test, vous ne serez pas en mesure de télécharger les applications présentées. En outre, le Tableau de bord n'affichera pas le nombre d'impressions. Ceci est dû au fait que les publicités de test sont uniquement destinées à vérifier si vous avez intégré le SDK correctement. Cette fonctionnalité devient disponible seulement après que votre application est activée.

Remarques supplémentaires

Utilisation de la classe de document VungleExample.as dans Animate ou Flash Professional CS6

  1. Tout d'abord, créez l'application et ajoutez l'extension en suivant les étapes 1 à 3 de cet article d'intégration.
  2. Copiez-collez dans le même dossier que votre .fla. Ne copiez et ne collez pas son contenu dans la ligne de temps.
  3. Modifiez les ID d'application et ID d'emplacement sur la ligne 20 pour qu'ils deviennent vos propres ID Vungle.
  4. Dans les propriétés Flash, sous Classe de document, saisissez VungleExample et cliquez sur OK.
  5. Créez et installez l'application.

Installation d'une nouvelle version du SDK AIR (4.0 ou supérieur) sous Flash Professional CS6

Suivez ce lien pour trouver le dernier SDK AIR. Si vous avez déjà installé AIR 4.0 ou supérieur, vous pouvez ignorer cette étape. Sinon, suivez les instructions ci-dessous :

  1. Dézippez le package SDK AIR 4.0 ou supérieur dans un emplacement sur votre disque dur.
  2. Lancez Flash Professional CS6.
  3. Sélectionnez Aide → Gérer AIR SDK...
  4. Cliquez sur le + (plus) et naviguez jusqu'à l'emplacement du SDK AIR dézippé.
  5. Cliquez sur OK.
  6. Sélectionnez Fichier → Paramètres de publication.
  7. Sélectionnez le dernier SDK AIR pour iOS dans le menu déroulant Cible.

Installation d'une nouvelle version du SDK AIR (4.0 ou supérieur) sous Flash Builder

Suivez ce lien pour trouver le dernier SDK AIR. Si vous avez déjà installé AIR 4.0 ou supérieur, vous pouvez ignorer cette étape. Vous pouvez également utiliser les dernière instructions Adobe pour mettre à jour les SDK AIR Flash Builder.

Résolution de l'erreur d'entrée invalide Adobe Animate

Si vous obtenez une erreur comme illustré dans l'image ci-dessous, reportez-vous à cet article.

image2.png

Vous avez d’autres questions ? Envoyer une demande

Commentaires