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

Ce que vous allez créer

Les bannières publicitaires sont une source de revenus importante 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 identifiant 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 numéro d'unité sur le site Web AdMob. Si vous n'avez pas de compte Google, je vous suggère de vous en créer un nouveau. C'est gratuit et vous donne accès à tous les services Google..

Une fois que vous êtes entré dans la page d'accueil AdMob, cliquez sur le bouton rouge. Monétiser la nouvelle application bouton.

Si votre application n'est pas encore sur l'iTunes App Store, vous devrez sélectionner Ajouter votre application manuellement.Puis tapez 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 nouvelle génération ID de l'application AdMob en dessous de l'icône gris pomme. Notez que ce n'est pas la même chose que l'ID d'unité à coller dans votre projet Xcode. Nous allons arriver à l'ID d'unité dans un peu.

Cliquez sur Bannière pour sélectionner le format de l'annonce. Je vous suggère de laisser 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 de l'annonce, vous pouvez cliquer sur la la norme liste déroulante et sélectionnez Personnalisé. Pour une bannière personnalisée, vous pouvez personnaliser la couleur de l'arrière-plan, de la bordure, du titre, du texte et de l'URL..

Enfin, tapez un nom dans le champ 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 ID d'unité. Cliquez sur sauvegarder passer à la troisième étape.

L'étape 3 est facultative et vous permet de relier votre application AdMob à Firebase et de partager vos données à partir de l'outil gratuit Firebase Analytics. Pour l'instant, il suffit de cliquer sur Sauter continuer.

Enfin, vous pouvez télécharger le dernier GoogleMobileAds.framework fichier du serveur Firebase. Cette quatrième étape vous montrera également l'ID de bloc d'annonces que vous devrez coller dans le champ 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 paquet.. 

Retournez sur le site Web AdMob et cliquez sur Terminé. L’écran suivant vous montrera le N ° d'annonce 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..

Implémenter 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-le. GoogleMobileAds.framework seulement.

Collez-le dans votre dossier de projet.


Maintenant, entrez votre projet Xcode et allez à la Général onglet, faites défiler jusqu'au Cadres et bibliothèque liés section, et faites glisser le GoogleMobileAds.framework déposer dessus.

Il se peut que vous deviez ajouter des cadres iOS supplémentaires à votre projet Xcode pour qu'AdMob puisse recevoir et afficher des bannières dans votre application.. 

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

  • EventKit 
  • EventKitUI 
  • AVFoundation 
  • AdSupport 
  • AudioToolbox 
  • AVFoundation 
  • CoreGraphics 
  • CoreTelephony 
  • CoreMedia 
  • MessageUI 
  • StoreKit 
  • Configuration du système 

La chose à faire est de passer à la Paramètres de construction onglet et rechercher bitcode. Xcode affichera le Activer le bitcode option, et vous devrez le configurer pour être Non.

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

Le code

Selon la structure de votre application, vous souhaiterez que les annonces AdMob soient affichées dans vos contrôleurs de vue. Donc, vous devez entrer le .rapide fichier du contrôleur auquel vous souhaitez que les annonces soient affichées et importez les structures suivantes en haut du fichier:

importer GoogleMobileAds importer AudioToolbox

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

classe ViewController: UIViewController, GADBannerViewDelegate 

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

// Bannière publicitaire et vues interstitielles var adMobBannerView = GADBannerView ()

La ligne de code suivante est une simple chaîne rappelant l’ID de bloc annonce que vous avez créé précédemment:

// IMPORTANT: REMPLACEZ LA CHAÎNE ROUGE CI-DESSOUS PAR L'ID D'UNITÉ ANNUELLE OBTENU EN ENREGISTRANT VOTRE APP DANS http://apps.admob.com, laissez ADMOB_BANNER_UNIT_ID = "ca-app-pub-9733347540588953/7805958028" 

Ici, vous devrez remplacer ca-app-pub-9733347540588953/6145924825avec votre propre identifiant d'unité de bannière, revenez à votre compte AdMob Unités d'annonce page dans votre navigateur pour copier cette chaîne et la coller dans le code ci-dessus.

Ajoutez maintenant les fonctions ci-dessous dans votre viewDidLoad () méthode:

remplacer func viewDidLoad () super.viewDidLoad () // Init bannière AdMob initAdMobBanner ()

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

// MARK: - ADMOB BANNER func initAdMobBanner () if UIDevice.current.userInterfaceIdiom == .phone // iPhone adMobBannerView.adSize = GADAdSizeFromCGSize (CGSize (largeur: 320, hauteur: 50)) adMobBannerView.frame = CGRect : 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 = auto adMobBannerView.delegate = auto view.addSubview (adMobBannerView) adMobBannerView.load (request) // Masquer la bannière func hideBanner (_ banner: UIView) UIView.beginAnimations ("hideBanner", contexte: nil) banner.frame = CGRect (x: view.frame.size.width / 2 - banner.frame.size.width / 2, y: view.frame.size.height - banner.frame.size.height, largeur: banner.frame.size.width, hauteur: banner.frame.size.height) UIView .commitAnimations () banner.isHidden = true // Afficher la bannière func showBanner (_ banner: UIView) UIView.beginAnimations ("showBanner", contexte: nil) banner.frame = CGRect (x: view.frame.size.width / 2 - banner.frame.size.width / 2, y: view.frame.size.height - banner.frame.size.height, largeur: banner.frame.size.width, hauteur: banner.frame.size.height) UIView.commitAnimations () banner.isHidden = false // Bannière AdMob disponible pour adViewDidReceiveAd (vue: GADBannerView!) ShowBanner (adMobBannerView) // AUCUNE bannière disponible pour ad func adView (_ vue: GADBannerView! DidfailToReceRWC) !) hideBanner (adMobBannerView)

Notez que les bannières AdMob ont des tailles différentes en fonction du périphérique utilisé. Par conséquent, les premières lignes de code dans func initAdMobBanner () définir 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ères pour les appareils iPhone et iPad sont celles que nous avons définies dans le code ci-dessus:

  • 320 x 50 px pour iPhone
  • 468 x 60 px pour iPad

Modèle CodeCanyon

Sur CodeCanyon, je vends un modèle d'application iOS fourni avec les bannières AdMob intégrées et prenant é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: iOS AdMob Banner + Interstital Ads Template | Universel (rapide).

Il existe des centaines d'autres modèles d'applications iOS sur CodeCanyon. Allez les vérifier! Vous pourriez juste é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.