Comment ajouter des bannières AdMob à votre application iOS Swift

Les bannières publicitaires sont une importante source de revenus pour de nombreux développeurs d’applications. Dans ce didacticiel, vous apprendrez à ajouter des annonces AdMob à votre application iOS à l’aide de Swift 3 et Xcode 8.

Créer un ID d’unité de bannière

La toute première chose à faire pour préparer votre application iOS à afficher des bannières publicitaires est de créer son ID d’unité Site Web AdMob. Si vous n’avez pas de compte Google, je vous suggère d’en créer un nouveau. C’est gratuit et il vous donne accès à tous les services Google.

Une fois que vous avez accédé à la page d’accueil AdMob, cliquez sur le bouton rouge Monétiser une nouvelle application bouton.

Si votre application n’est pas encore sur l’iTunes App Store, vous devrez sélectionner Ajoutez votre application manuellement. Tapez ensuite le nom de votre application, sélectionnez le iOS Plate-forme et cliquez sur le Ajouter une application bouton.

Sur l’écran suivant, vous verrez votre nouvellement généré ID d’application AdMob sous l’icône grise Apple. Veuillez noter que ce n’est pas le même que l’ID d’unité qui doit être collé dans votre projet Xcode. Nous reviendrons sur l’ID de l’unité dans un instant.

Cliquez sur Bannière pour sélectionner le format de l’annonce. Je vous suggère de quitter le Type d’annonce, Rafraîchissement automatique, et Style d’annonce textuelle paramètres à leurs valeurs par défaut. Si vous souhaitez personnaliser le style d’annonce, vous pouvez cliquer sur le Standard combo et sélectionnez Personnalisé. Pour une bannière personnalisée, vous pouvez personnaliser l’arrière-plan, la bordure, le titre, le texte et la couleur de l’URL.

Enfin, saisissez un nom dans le Nom du bloc d’annonces boîte. Ce ne sera pas votre identifiant de bannière, mais simplement un nom de référence pour votre identifiant d’unité. Cliquez sur Sauvegarder pour passer à la troisième étape.

L’étape 3 est facultative et vous permet d’associer votre application AdMob à Firebase et de partager vos données à partir de l’outil gratuit Firebase Analytics. Pour l’instant, cliquez simplement sur Sauter continuer.

Enfin, vous pouvez télécharger la dernière GoogleMobileAds.framework fichier du serveur Firebase. Cette quatrième étape vous montrera également l’ID du bloc d’annonces que vous devrez coller dans le fichier principal .rapide fichier de votre projet Xcode, comme nous le verrons plus tard.

Clique sur le Téléchargez le SDK Google Mobile Ads lien. Un nouvel onglet s’ouvrira dans votre navigateur et vous pourrez télécharger le dernier fichier zip officiel du package.

Revenez sur le site Web AdMob et cliquez sur Fait. L’écran suivant vous montrera le ID du bloc d’annonces que vous venez de créer, prêt à être copié et collé dans votre .rapide fichier dans Xcode. Je suppose que vous avez déjà créé un nouveau projet Xcode ou que vous en avez un dans lequel vous souhaitez ajouter des annonces AdMob.

Mettez en œuvre AdMob dans votre projet Xcode

Extraire le googlemobileadssdkios.zip fichier que vous avez précédemment téléchargé à partir du serveur Firebase, ouvrez son dossier et copiez GoogleMobileAds.framework seul.

Collez-le dans votre dossier de projet.

Entrez maintenant votre projet Xcode et accédez au Général onglet, faites défiler jusqu’à Cadres et bibliothèque liés section et faites glisser le GoogleMobileAds.framework file dessus.

Vous devrez peut-être ajouter des cadres iOS supplémentaires à votre projet Xcode pour qu’AdMob reçoive et affiche des bannières dans votre application.

Clique sur le + signez en bas et importez les frameworks suivants un par un:

• EventKit
• EventKitUI
• AVFoundation
• AdSupport
• AudioToolbox
• AVFoundation
• CoreGraphics
• CoreTéléphonie
• CoreMedia
• MessageUI
• StoreKit
• Configuration du système

La chose à faire est de passer au Paramètres de construction onglet et recherchez bitcode. Xcode fera apparaître le Activer Bitcode option, et vous devrez le définir pour être Non.

Vous êtes maintenant prêt à écrire du code pour que les annonces AdMob s’affichent dans votre application!

Le code

En fonction de la conception de votre application, vous souhaiterez que les annonces AdMob s’affichent dans vos contrôleurs d’affichage. Vous devez donc entrer dans le .rapide fichier du contrôleur pour lequel vous souhaitez que les publicités soient affichées et importez les cadres suivants en haut du fichier:

import GoogleMobileAds
import AudioToolbox

Adoptez le GADBannerViewDelegate protocole en l’ajoutant à la fin de votre déclaration de classe:

class ViewController: UIViewController, 
GADBannerViewDelegate
{

Ajoutez la bannière AdMob au-dessus du viewDidLoad() méthode dans votre classe:

// Ad banner and interstitial views
var adMobBannerView = GADBannerView()

La ligne de code suivante est une simple chaîne qui rappelle l’ID du bloc d’annonces que vous avez précédemment créé:

// IMPORTANT: REPLACE THE RED STRING BELOW WITH THE AD UNIT ID YOU'VE GOT BY REGISTERING YOUR APP IN https://apps.admob.com
let ADMOB_BANNER_UNIT_ID = "ca-app-pub-9733347540588953/7805958028"
    

Ici, vous devrez remplacer ca-app-pub-9733347540588953/6145924825 avec votre propre ID de bloc de bannière, alors revenez à votre AdMob Blocs d’annonces page dans votre navigateur pour copier cette chaîne et la coller dans le code ci-dessus.

Maintenant, ajoutez les fonctions ci-dessous dans votre viewDidLoad() méthode:

override func viewDidLoad() {
        super.viewDidLoad()

    // Init AdMob banner
    initAdMobBanner()
}

Enfin, collez la déclaration de méthode suivante où vous le souhaitez dans votre .rapide file (avant le crochet fermant la classe et non dans une méthode existante):

// MARK: -  ADMOB BANNER
func initAdMobBanner() {
    
    if UIDevice.current.userInterfaceIdiom == .phone {
        // iPhone
        adMobBannerView.adSize =  GADAdSizeFromCGSize(CGSize(width: 320, height: 50))
        adMobBannerView.frame = CGRect(x: 0, y: view.frame.size.height, width: 320, height: 50)
    } else  {
        // iPad
        adMobBannerView.adSize =  GADAdSizeFromCGSize(CGSize(width: 468, height: 60))
        adMobBannerView.frame = CGRect(x: 0, y: view.frame.size.height, width: 468, height: 60)
    }
    
    adMobBannerView.adUnitID = ADMOB_BANNER_UNIT_ID
    adMobBannerView.rootViewController = self
    adMobBannerView.delegate = self
    view.addSubview(adMobBannerView)
        
    let request = GADRequest()
    adMobBannerView.load(request)
}
    

// Hide the banner
func hideBanner(_ banner: UIView) {
        UIView.beginAnimations("hideBanner", context: nil)
        banner.frame = CGRect(x: view.frame.size.width/2 - banner.frame.size.width/2, y: view.frame.size.height - banner.frame.size.height, width: banner.frame.size.width, height: banner.frame.size.height)
        UIView.commitAnimations()
        banner.isHidden = true
}
    
// Show the banner
func showBanner(_ banner: UIView) {
        UIView.beginAnimations("showBanner", context: nil)
        banner.frame = CGRect(x: view.frame.size.width/2 - banner.frame.size.width/2, y: view.frame.size.height - banner.frame.size.height, width: banner.frame.size.width, height: banner.frame.size.height)
        UIView.commitAnimations()
        banner.isHidden = false
}
    
// AdMob banner available
func adViewDidReceiveAd(_ view: GADBannerView!) {
        showBanner(adMobBannerView)
}
    
// NO AdMob banner available
func adView(_ view: GADBannerView!, didFailToReceiveAdWithError error: GADRequestError!) {
        hideBanner(adMobBannerView)
}

Veuillez noter que les bannières AdMob ont des tailles différentes en fonction de l’appareil utilisé. Par conséquent, les premières lignes de code dans func initAdMobBanner() définissez la taille des bannières pour iPhone / iPod Touch et iPad.

Si vous souhaitez connaître les tailles de bannière disponibles pour les annonces AdMob, vous pouvez consulter la Documentation AdMob. Quoi qu’il en soit, les meilleures tailles de bannière pour les appareils iPhone et iPad sont celles que nous avons définies dans le code ci-dessus:

• 320 x 50 px pour les iPhones
• 468 x 60 px pour iPad

Modèle CodeCanyon

Sur CodeCanyon, je vends un Modèle d’application iOS qui comprend les bannières AdMob intégrées et prend également en charge les annonces interstitielles. Donc, si vous souhaitez accélérer votre développement, vous pouvez simplement acheter ce modèle et lancer votre application.

Trouvez-le ici: Bannière AdMob iOS + modèle d’annonces interstitales | Universel (Swift).

Il y a des centaines d’autres Modèles d’application iOS sur CodeCanyon. Allez les découvrir! Vous pourriez économiser des heures de travail sur votre prochaine application.

Conclusion

Merci d’avoir lu et à la prochaine fois! Veuillez consulter certains de nos autres cours et tutoriels sur le développement d’applications iOS avec Swift.