Blog technique sur mes expériences de développeur.
27 juin 2015
La semaine dernière, je vous proposais une introduction au SDK Google AdMob sur Android. Je vous propose aujourd’hui de continuer notre exploration des SDK de publicités disponibles sur Android à travers une introduction au tout nouveau SDK de publicité proposé par Facebook : Facebook Audience Network.
Pour rappel, voici une liste non-exhaustive des SDK, qui en plus du SDK de Facebook, composeront cette série de tutoriels :
Cet article se veut être une introduction au SDK Facebook Audience Network. Aussi, je ne parlerai pas de la médiation ni du format publicitaire dit natif. Nous nous limiterons aux bannières ainsi qu’aux interstitiels, mais ne vous inquiétez pas, je parlerai des autres sujets dans d’autres articles ! ;)
Comme souvent dans mes tutoriels, je vous propose de créer ensemble une application Android à l’aide d’Android Studio !
Dans Android Studio, créez alors un nouveau projet Android grâce à l’assistant graphique.
Puisque le SDK Facebook est compatible à partir de l’API 9 d’Android, il convient de prendre en considération ce choix pendant la création du projet.
Il n’est pas impossible, malgré le fait que vous ayez indiqué que votre projet soit compatible avec l’API 9 d’Android que les bibliothèques de support ne soient intégrées à votre projet. Pour corriger cela, je vous propose quelques modifications.
Nous allons commencer par ajouter la dernière version de la bibliothèque appcompat soit la version 22.2.0.
compile 'com.android.support:appcompat-v7:22.2.0'
Au niveau de votre fragment MainActivityFragment
si vous avez laissé le nom par défaut, il convient de simplement s’assurer que c’est bien la version support qui est utilisés. Pour cela, rendez-vous dans les imports :
import android.support.v4.app.Fragment;
Au niveau de votre activité principale, c’est-à-dire MainActivity
si vous avez laissé le nom par défaut, il convient de simplement s’assurer qu’elle hérite bien de la classe AppCompatActivity
:
public class MainActivity
extends AppCompatActivity
{
//...
}
Au niveau du thème de l’application, assurez-vous simplement d’utiliser le thème AppCompat
par exemple :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
Avant de commencer l’intégration du SDK de Facebook au sein de notre application, il convient, comme souvent, de configurer quelques éléments dans l’espace Facebook dédié aux développeurs.
La première étape consiste à se rendre dans vos applications Facebook accessibles ici. Si vous avez déjà une application, il convient de simplement sélectionner celle qui va bénéficier de l’intégration des publicités. Si vous n’avez pas d’applications, vous devez en créer une en cliquant sur + Add a New App. Vous pouvez ensuite suivre une partie de ce tutoriel dans lequel j’expliquer en détail les différentes étapes.
Une fois sur le tableau de bord de votre application, il convient de se rendre dans le menu Audience Network :
Cliquez ensuite sur Apply Now :
S’affiche alors une pop-in dans laquel on vous demande de saisir l’URL de votre application. Dans le cadre de ce tutoriel, c’est l’URL du Google Play Store qu’il convient de renseigner :
Une fois l’application trouvée, cliquez sur le bouton Suivant :
On vous demande alors vos coordonnées et d’associer l’application mobile à une application Facebook. Une fois le formulaire rempli, cliquez sur Suivant :
Vous êtes maintenant prêt à postuler en cliquant sur le bouton Envoyer. Rendez-vous dans 15 jours lorsque votre compte sera validé ;)
Pour justifier que vous êtes bien autorisé à utiliser cette application, Facebook peut procéder à vérification. Dans mon cas, j’ai du envoyer à Facebook une capture d’écran de la console développeur de l’application pour laquelle je souhaitais utiliser le service comme en témoigne l’e-mail suivant :
To process your application, we need to verify that you are associated with * (com..**). Can you please reply with a simple form of verification (e.g. screenshot of your developer console in the Google Play Store or Apple App Store)? If available, please include the Facebook App ID of your app.
Une fois l’application validée, vous recevrez un e-mail de confirmation ainsi qu’une alerte :
Maintenant que votre application est validée, si vous revenez dans le menu Audience Network de votre application Facebook, vous devriez voir un formulaire dans lequel il convient de saisir quelques informations :
Une fois le formulaire rempli, cliquez sur Get Started.
Nous allons maintenant pouvoir créer nos emplacements publicitaires. Dans ce tutoriel, je vous propose de tester deux types de publicités disponibles sur le SDK à savoir :
Nous allons donc créer 3 emplacements publicitaires. Il convient donc de cliquer sur le bouton Create Ad Placement :
Remplissez alors le formulaire qui s’affiche à l’écran :
Reproduisez alors cette étape une fois pour pouvoir utiliser un interstitiel. Une fois les emplacements publicitaires créés, vous devriez voir leurs identifiants uniques comme en témoigne la capture d’écran ci-dessous :
Maintenant que la configuration côté Facebook est terminé, nous allons pouvoir intégrer notre bannière et notre interstitiel au sein de notre applications.
Nous allons débuter par configurer notre application afin qu’on puisse utiliser le SDK Facebook et afficher les différents formats publicitaires.
Si le SDK “principal” de Facebook est disponible sur Maven Central Repository, ce n’est pas encore le cas du SDK dédié à la publicité. Nous allons donc devoir télécharger et utiliser une bibliothèque au format .jar
Pour télécharger le SDK dédié à Android, il convient de se rendre ici puis de cliquer sur le bouton Download the SDK :
Une fois l’archive téléchargée, il convient de placer le fichier AudienceNetwork.jar
dans le dossier libs
de votre projet Android. Le dossier AudienceNetwork.jar
se trouve, dans mon cas, au chemin suivant : facebook-android-sdk-4.3.0\AudienceNetwork\bin\AudienceNetwork.jar
:
Maintenant que la bibliothèque a été téléchargée et déplacée dans votre projet, il convient de vérifier que votre application peut l’utiliser. Nous allons donc ajouter dans le fichier build.gradle
de notre application la ligne suivante dans les dépendances afin de charger les fichiers du dossier libs
:
compile fileTree(dir: 'libs', include: ['*.jar'])
Bien que ça ne soit pas strictement obligatoire, Facebook, dans la documentation officielle, nous recommande également d’intégrer et configurer les Google Play Services. Nous allons donc ajouter dans le fichier build.gradle
de notre application, une dépendance aux Google Play Services grâce à la ligne suivante :
compile 'com.google.android.gms:play-services:7.5.0'
A noter qu’il convient d’importer la bibliothèque de suppport v4 ! Dans notre cas, ce n’est pas nécessaire car nous utilisons déjà la bibliothèque de support appcompat qui nous donne alors accès à la bibliothèque de support v4 de manière transitive.
Maintenant que nos dépendances sont utilisables dans notre application, nous allons nous attaquer à la mise à jour du manifest à travers la modification du fichier AndroidManifest.xml
et plus précisément à travers l’ajout de méta-data, de permissions et la déclarations d’une nouvelle activité.
Nous allons donc débuter par l’ajout de quelques meta-data dans le fichier AndroidManifest.xml
de notre application Android. Actuellement, ce fameux fichier doit ressembler à ça :
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="fr.rolandl.blog.facebookaudiencenetwork"
>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme"
>
<activity
android:name="fr.rolandl.blog.facebookaudiencenetwork.MainActivity"
android:label="@string/app_name"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
La seule et unique méta-data à déclarer au sein du manifest de notre application est le numéro de version des Google Play Services que nous utilisons.
Pour rappel, les méta-data se déclarent dans la balise <application />
du manifest.
Pour déclarer le numéro de version des Google Play Services en tant que méta-data, il convient d’ajouter l’élément suivant dans le manifest :
<meta-data
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version"
/>
Maintenant que nous en avons terminé avec les méta-data, nous allons nous attaquer à la déclaration des permissions nécessaires à notre application pour afficher des publicités.
A l’image du SDK Google AdMob, celui de Facebook ne nécessitent que deux permissions :
Pour rappel, les permissions se déclarent dans la balise <manifest />
.
Au niveau du manifest, l’ajout des permissions se traduit par l’ajout des éléments suivants :
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
Terminons la modification de notre manifest avec la déclaration d’une activité qui sera utilisée par le SDK Facebook Audience Network, notamment au moment de l’affichage des interstitiels.
Pour rappel, les activités se déclarent dans la balise <application />
du manifest.
Au niveau du manifest, l’ajout de l’activité se traduit par l’ajout de l’élément suivant :
<activity
android:name="com.facebook.ads.InterstitialAdActivity"
android:configChanges="keyboardHidden|orientation|screenSize"
/>
A l’issue de toutes ces étapes votre fichier AndroidManifest.xml
doit alors ressembler à ça :
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="fr.rolandl.blog.facebookaudiencenetwork"
>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme"
>
<meta-data
android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version"
/>
<activity
android:name="fr.rolandl.blog.facebookaudiencenetwork.MainActivity"
android:label="@string/app_name"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="com.facebook.ads.InterstitialAdActivity"
android:configChanges="keyboardHidden|orientation|screenSize"
/>
</application>
</manifest>
Je vous propose de commencer par l’intégration de la bannière au sein de notre application de test.
Dans le cas d’une bannière Google AdMob, nous étions en mesure de déclarer le composant graphique directement dans le layout de notre fragment. Dans le cas d’une bannière Facebook Audience Network nous allons procéder de manière légèrement différente. Nous allons utiliser un ViewGroup
(un RelativeLayout
ou un LinearLayout
par exemple) en tant que placeholder. Nous déclarerons ensuite la bannière dynamiquement et nous l’ajouterons manuellement à son parent pour qu’elle soit rendu graphiquement.
<RelativeLayout
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"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivityFragment"
>
<TextView
android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<RelativeLayout
android:id="@+id/bannerWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
Tout se passe au sein de la méthode onCreateView
de notre fragment. Nous allons mettre en place les quatre étapes suivantes :
AdView
qui sera notre bannière.RelativeLayout
.loadAd
.Le constructeur de la classe AdView
prend trois paramètres :
Context
;AdSize
.Finalement, il convient de détruire notre bannière dans la méthode onDestroy
du fragment :
Puisque le code est vraiment très simple, je vous propose directement le code complet et commenté du fragment :
public final class MainActivityFragment
extends Fragment
{
private AdView banner;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
final View rootView = inflater.inflate(R.layout.fragment_main, container, false);
banner = new AdView(getActivity(), "***_***", AdSize.BANNER_HEIGHT_50);
final RelativeLayout bannerWrapper = (RelativeLayout) rootView.findViewById(R.id.bannerWrapper);
bannerWrapper.addView(banner);
banner.loadAd();
return rootView;
}
@Override
public void onDestroy()
{
if (banner != null)
{
banner.destroy();
}
super.onDestroy();
}
}
Si comme moi vous travaillez sur un émulateur, vous devriez alors voir s’afficher une bannière de test dans votre application comme en témoigne la capture d’écran suivante :
Maintenant que nous maitrisons les bannières, passons aux interstitiels! ;)
A l’image de ce que nous avions fait avec le SDK Google AdMob dans l’article précédent, nous allons travailler de manière entièrement dynamique pour les interstitiels.
Dans la méthode onCreateView
du fragment, nous allons mettre en place les étapes suivantes :
InterstitialAd
.loadAd
.show
de notre référence au composant InterstitialAd.Le constructeur de la classe InterstitialAd
prend deux paramètres :
Context
;Finalement, il convient de détruire notre interstitiel dans la méthode onDestroy
du fragment :
Puisque le code est vraiment très simple, je vous propose directement le code complet et commenté du fragment :
public final class MainActivityFragment
extends Fragment
{
private InterstitialAd interstitial;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
final View rootView = inflater.inflate(R.layout.fragment_main, container, false);
interstitial = new InterstitialAd(getActivity(), "***_***");
interstitial.loadAd();
interstitial.show();
return rootView;
}
@Override
public void onDestroy()
{
if (interstitial != null)
{
interstitial.destroy();
}
super.onDestroy();
}
}
Si vous exécutez votre application maintenant, vous ne verrez rien. Ne vous inquiétez, c’est normal ! En effet, nous avions rencontré le même problème dans l’article précédent. En réalité, nous appelons la méthode show
trop tôt, bien avant que la publicité à afficher dans l’interstitiel ne soit chargée ! Pour corriger ce problème, nous allons devoir écouter certains événements !
Pour écouter les différents évènements qui se produisent autour de notre interstitiel, il convient d’utiliser l’interface InterstitialAdListener
. Cette classe expose cinq méthodes :
onInterstitialDisplayed
: cette méthode est appelée quand l’interstitiel est affiché ;onInterstitialDismissed
: cette méthode est appelée quand l’interstitiel est fermé ;onError
: cette méthode est appelée quand la publicité n’a pas pu être chargée ;onAdClicked
: cette méthode est appelée quand la publicité est cliquée ;onAdLoaded
: cette méthode est appelée quand la publicité est chargée et prête à être affichée ;Dans notre cas, nous devons donc attendre que le contenu publicitaire soit chargé avant de l’afficher. Il convient donc d’être à l’écoute de l’évènement onAdLoaded
:
interstitial = new InterstitialAd(getActivity(), "***_***");
interstitial.setAdListener(new InterstitialAdListener()
{
@Override
public void onInterstitialDisplayed(Ad ad)
{
}
@Override
public void onInterstitialDismissed(Ad ad)
{
}
@Override
public void onError(Ad ad, AdError adError)
{
}
@Override
public void onAdLoaded(Ad ad)
{
interstitial.show();
}
@Override
public void onAdClicked(Ad ad)
{
}
});
interstitial.loadAd();
Suite à ces modifications, comme vous pouvez le constater dans la capture d’écran ci-dessous, l’interstitiel s’affiche correctement :
Le projet Android créé pour la rédaction de cet article est disponible sur Github.