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
- Étape 1. Inclure la bibliothèque d'extension
- Étape 2. Mettre à jour votre descripteur d'application
- Étape 3. Intégrer votre API Vungle
-
Remarques supplémentaires
- Utilisation de la classe de document VungleExample.as dans Animate ou Flash Professional CS6
- Installation d'une nouvelle version du SDK AIR (4.0 ou supérieur) sous Flash Professional CS6
- Installation d'une nouvelle version du SDK AIR (4.0 ou supérieur) sous Flash Builder
- Résolution de l'erreur d'entrée invalide Adobe Animate
Avant de commencer
-
L'extension Vungle nécessite la version 4.0 du SDK Adobe AIR ou une version ultérieure. Pour obtenir des instructions expliquant comment mettre à jour le SDK AIR sous Flash Builder ou Flash Professional, consultez la section "Notes supplémentaires".
- Si vous travaillez sous Android, l'extension Vungle AIR nécessite d'installer JDK 6 ou JDK 7 (selon la version de Flash que vous utilisez) sur le système de développement. Android 3.0 (Honeycomb - version 11 de l'API) ou une version ultérieure est nécessaire pour l'exécution de l'application.
- Vous pouvez consulter la Documentation des classes d'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 nouvel AIR pour votre projet mobile et ajoutez l'extension native. Vous devrez ajouter deux ou trois fichiers .ane
:
com.vungle.extensions.Vungle.ane
com.vungle.extensions.android.AndroidSupportLib.ane
-
com.vungle.extensions.android.GooglePlayServices.ane
(Si vous ciblez Android, vous serez peut-être obligé d'ajouter la bibliothèque des Services Google Play à votre projet, mais étant donné que de nombreuses autres extensions incluent déjà cette bibliothèque, elle est peut-être déjà présente.)
Pour Animate et Flash Professional CS6 ou supérieur
- Créez un nouveau projet AIR pour Android ou projet AIR pour iOS.
- Sélectionnez Fichier → Paramètres de publication
- Sélectionnez l'icône de la clé à molette à côté de Script pour accéder aux paramètres ActionScript.
- Dans l'onglet Chemin de la bibliothèque, cliquez sur Rechercher un fichier Native Extension (ANE) puis sélectionnez le fichier
vungle.extensions.Vungle.ane
. Cliquez sur OK. - Sélectionnez l'icône de la clé à molette à côté de Cible pour accéder aux paramètres du lecteur.
- Si vous ciblez Android : dans l'onglet Autorisations, activez
'INTERNET'
,'WRITE_EXTERNAL_STORAGE'
et'ACCESS_NETWORK_STATE'
. - Sélectionnez l'option Gérer manuellement les permissions et les ajouts Manifest pour cette application et cliquez sur OK.
- Répétez les étapes 1 à 7, en sélectionnant
com.vungle.extensions.android.AndroidSupportLib.ane
à l'étape 4. - Si vous ciblez Android et que cette bibliothèque n'est pas présente, répétez à nouveau ces étapes, en sélectionnant le fichier
com.vungle.extensions.android.GooglePlayServices.ane
à l'étape 4.
Sous Flash Builder 4.6 ou supérieur
- Dans Propriétés du projet, sous Chemin de génération Actionscript, sélectionnez Extensions natives.
- Choisissez Ajouter ANE… et naviguez jusqu'au fichier
vungle.extensions.Vungle.ane
. - Sélectionnez Mise en package de la génération Actionscript → Google Android.
- Dans l'onglet Extensions natives, sélectionnez l'option Package à côté de l'extension.
- Répétez les étapes 1 et 2, en sélectionnant
com.vungle.extensions.android.AndroidSupportLib.ane
à l'étape 2. - 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.
- Définissez votre SDK AIR sur 4.0 (ou version ultérieure) dans le fichier descripteur de l'application :
<application xmlns="http://ns.adobe.com/air/application/4.0">
- Incluez un lien à l'extension dans le descripteur :
<extensions>
<extensionID>com.vungle.extensions.Vungle</extensionID>
<extensionID>com.vungle.extensions.android.AndroidSupportLib</extensionID>
</extensions> - 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.AndroidSupportLib</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
etACCESS_NETWORK_STATE
- ajouter les définitions d'activité
VideoFullScreenAdActivity,
définitions d'activitéMraidFullScreenAdActivity,
etMraidFullScreenAdActivity
- ajouter la balise de métadonnées google-play-services version :
<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 placement par défaut est créé automatiquement pour chaque application. Vous devez fournir l'ID de référence de son placement lors de l'étape d'initialisation que vous envisagiez ou non de profiter de ses fonctions. Si vous créez plusieurs placements, 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.
- Importez les classes d'API :
import com.vungle.extensions.*; import com.vungle.extensions.events.*;
- Initialisez l'API en appelant
create()
et en faisant passer une chaîne de votre ID d'application et un tableau contenant l'ID de référence du placement de l'application depuis le tableau de bord Vungle. Si vous ciblez iOS et Android via le même projet, saisissez un ID d'application différent et son tableau de placement pour chaque plateforme selon la méthodecreate()
.
Terminez votre appel àVungle.create()
dans une instruction try/catch, car Vungle peut renvoyer une erreur lors du processus de création (par exemple, l'extension renvoie une erreur si elle est exécutée 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é de placement
Pour jouer une publicité de placement, vous devez charger une publicité pour ce placement. Notez que votre placement mis en cache automatiquement n'exige pas que vous appeliez cette méthode. Le SDK essaiera de charger la publicité pour le placement mis en cache automatiquement en interne.
Vungle.vungle.loadAd(“non_auto_cached_placement”);
Diffuser une publicité de placement
Vous aurez lorsque la publicité est prête à être jouée via les écouteurs d'événements. Lorsqu'un placement 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
.
- L'événement
AD_PLAYABLE
est envoyé lorsqu'une publicité est prête à être diffusé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); } }
- Les événements
AD_STARTED
etAD_FINISHED
sont respectivement envoyés lorsqu'une publicité est affichée et masquée :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."); } }
- L'événement
AD_INIT
est envoyé lorsque le SDK Vungle a fini son initialisation.function onAdInit(e:VungleEvent):void { trace(“Vungle SDK is initialized: “ + e.isInitialized”); }
- 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 consignation est uniquement implémentée dans la version iOS du SDK Vungle. Cet événement est donc spécifique à une plate-forme.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 déjà pu le voir, vous pouvez transmettre un objet avec des options de configuration lorsque vous appelez la méthode playAd()
.
Remarque : Les publicités récompensées sont parfois nommées publicités répondant au mécanisme d'incitation ; les deux termes font toujours référence au même type de publicité. Dans le code SDK et dans notre API de création, nous utilisons le terme « répondant au mécanisme d'incitation ».
Voici les propriétés disponibles dans VungleAdConfig
:
Option |
Valeur |
Description |
|
VungleOrientation |
Android ● ● iOS ● ● |
|
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. |
|
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. |
|
Booléen |
Pour Android uniquement, si la valeur est true, l'option active ou désactive le mode immersif sur les appareils sous KitKat ou une version ultérieure. La valeur est sur false par défaut) |
|
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. |
flexViewCloseTimeInSec |
Int |
Utilisez cette option pour que les annonces Flex View soient automatiquement masquées après le nombre de secondes spécifié. |
|
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. |
|
||
|
||
|
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.
Publicités Flex View
Pour fermer une publicité Flex View par la programmation, appelez la fonction closeFlexViewAd
une fois que l'annonce a démarré :
Vungle.vungle.closeFlexViewAd(placement);
Cette fonction ne s'applique qu'aux publicités Flex View et uniquement sur le SDK iOS Vungle.
Remarques supplémentaires
Utilisation de la classe de document VungleExample.as dans Animate ou Flash Professional CS6
- Tout d'abord, créez l'application et ajoutez l'extension en suivant les étapes 1 à 3 de cet article d'intégration.
- Copiez-collez dans le même dossier que votre
.fla
. Ne copiez et ne collez pas son contenu dans la ligne de temps. - Modifiez les ID d'application et ID de placement sur la ligne 20 pour qu'ils deviennent vos propres ID Vungle.
- Dans les propriétés Flash, sous Classe de document, saisissez
VungleExample
et cliquez sur OK. - 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 :
- Dézippez le package SDK AIR 4.0 ou supérieur dans un emplacement sur votre disque dur.
- Lancez Flash Professional CS6.
- Sélectionnez Aide → Gérer AIR SDK...
- Cliquez sur le + (plus) et naviguez jusqu'à l'emplacement du SDK AIR dézippé.
- Cliquez sur OK.
- Sélectionnez Fichier → Paramètres de publication.
- 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.
Commentaires