Ludovic ROLAND

Blog technique sur mes expériences de développeur.

De la publicité dans vos applications Android grâce à Facebook Audience Network

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 :

  • Google Ad Mob
  • Twitter MoPub
  • Ogoury
  • Ad Colony
  • Smart Ad Server

Création de l’application Android

Comme souvent dans mes tutoriels, je vous propose de créer ensemble une application Android à l’aide d’Android Studio !

L’application Android de base

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.

Quelques modification

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.

Le fichier build.gradle

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'

Le fragment

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;

L’activité

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
{
  //...
}

Le thème de l’application

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>

Quelques configuration au niveau de Facebook

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.

Création d’une application

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.

Configuration de l’application

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

Validation de l’application

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 :

Une fois l’application validée, vous recevrez un e-mail de confirmation ainsi qu’une alerte :

Retour à la configuration de l’application

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.

Création des espaces publicitaires

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 :

  • les bannières
  • les interstitiels

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 :

Intégration de la publicité

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.

Configuration générale

Nous allons débuter par configurer notre application afin qu’on puisse utiliser le SDK Facebook et afficher les différents formats publicitaires.

Téléchargement et intégration du SDK Facebook Audience Network

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 :

Gradle

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'

Le Manifest

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 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 :

  • INTERNET : cette permission est nécessaire pour faire les requêtes d’affichage de la publicité auprès de la plate-forme Facebook Audience Network.
  • ACCESS_NETWORK_STATE : cette permission est nécessaire afin d’optimiser le comportement du SDK et ne pas tenter de faire des requêtes inutiles si le terminal n’a pas de connexion internet active.

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.

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>

Intégration de la bannière

Je vous propose de commencer par l’intégration de la bannière au sein de notre application de test.

Le layout

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>

Le code du fragment

Tout se passe au sein de la méthode onCreateView de notre fragment. Nous allons mettre en place les quatre étapes suivantes :

  • Nous allons créer une instance d’un objet AdView qui sera notre bannière.
  • Nous allons récupérer une référence de notre RelativeLayout.
  • Nous allons placer la bannière dans son aprent.
  • Nous allons demander à la bannière de charger son contenu à l’aide de la méthode loadAd.

Le constructeur de la classe AdView prend trois paramètres :

  • un Context ;
  • une chaîne de caractères correspondant à l’identifiant unique de la bannière ;
  • la taille de bannière - Plusieurs tailles sont définies dans l’énumération 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 :

Intégration de l’interstitiel

Maintenant que nous maitrisons les bannières, passons aux interstitiels! ;)

Le code du fragment

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 :

  • Nous allons créer une instance de classe InterstitialAd.
  • Nous allons demander à l’interstitiel de charger son contenu à l’aide de la méthode loadAd.
  • Nous allons afficher l’interstitiel à l’aide de la méthode show de notre référence au composant InterstitialAd.

Le constructeur de la classe InterstitialAd prend deux paramètres :

  • un Context ;
  • une chaîne de caractères correspondant à l’identifiant unique de l’interstitiel.

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 !

Ecouter les é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 :

Télécharger le projet

Le projet Android créé pour la rédaction de cet article est disponible sur Github.

Commentaires