Slik legger du til AdMob-bannerannonser i din iOS-swift-app

Hva du skal skape

Bannerannonser er en viktig inntektskilde for mange apputviklere. I denne opplæringen lærer du hvordan du legger til AdMob-annonser i iOS-appen din, ved hjelp av Swift 3 og Xcode 8.

Opprett en Banner Unit ID

Den aller første tingen å gjøre for å forberede iOS-appen din til å vise bannerannonser, er å opprette enhets-ID på AdMobs nettsted. Hvis du ikke har en Google-konto, foreslår jeg at du registrerer deg for en ny-den er gratis, og den gir deg tilgang til alle Google-tjenester.

Når du har kommet inn på AdMobs startside, klikker du på den røde Tjene penger på ny app knapp.

Hvis appen din ikke er i iTunes App Store ennå, må du velge Legg til appen manuelt.Skriv deretter inn søknadens navn, velg iOS Plattform, og klikk på Legg til app knapp.

På neste skjerm ser du din nylig genererte AdMob App ID under Apple grå ikonet. Vær oppmerksom på at det ikke er det samme som enhetens ID som må limes inn i ditt Xcode-prosjekt. Vi kommer til enhetens ID i en liten stund.

Klikk banner for å velge annonseformat. Jeg foreslår at du forlater Annonse type, Automatisk oppdatering, og Tekstannonsestil innstillinger til standardverdiene. Hvis du vil tilpasse annonsestilen, kan du klikke på de Standard kombinasjonsboks og velg tilpasset. For et egendefinert banner kan du tilpasse bakgrunnsfargen, grensen, tittelen, teksten og nettadressen.

Til slutt skriver du inn et navn i Annonseenhetsnavn eske. Det vil ikke være din banneridentifikator, men bare et referansenavn for enheten din. Klikk Lagre å gå videre til tredje trinn.

Trinn 3 er valgfritt, og lar deg koble AdMob-appen til Firebase og dele dataene dine fra det gratis Firebase Analytics-verktøyet. For nå, klikk bare på Hopp å gå videre.

Til slutt kan du laste ned det siste GoogleMobileAds.framework fil fra Firebase-serveren. Dette fjerde trinnet vil også vise deg annonseenhetens ID du må lim inn i hoveddelen .fort filen av Xcode-prosjektet, som vi ser senere.

Klikk på Last ned SDK for Google Mobile Ads link. En ny fane åpnes i nettleseren din, og du vil kunne laste ned den nyeste offisielle pakken zip-filen. 

Gå tilbake til AdMobs nettsted og klikk Ferdig. Neste skjermbilde viser deg Annonseenhet-ID du har nettopp opprettet, klar til å bli kopiert og limt inn i din .fort fil i Xcode. Jeg antar at du allerede har opprettet et nytt Xcode-prosjekt, eller du har din egen, der du vil legge til AdMob-annonser.

Implementer AdMob i ditt Xcode-prosjekt

Trekk ut googlemobileadssdkios.zip fil du tidligere har lastet ned fra Firebase-serveren, åpne mappen og kopier GoogleMobileAds.framework bare.

Lim inn det i prosjektmappen din.


Skriv inn Xcode-prosjektet ditt og gå til Generell fanen, bla ned til Koblede rammer og bibliotek delen, og dra GoogleMobileAds.framework fil over til den.

Du må kanskje legge til flere iOS-rammer til ditt Xcode-prosjekt for at AdMob skal motta og vise bannere i appen din. 

Klikk på + Tegn på nederst og importer inn følgende rammer en etter en:

  • EventKit 
  • EventKitUI 
  • Foundation- 
  • AdSupport 
  • AudioToolbox 
  • Foundation- 
  • Coregraphics 
  • CoreTelephony 
  • CoreMedia 
  • MessageUI 
  • StoreKit 
  • Systemkonfigurasjon 

Ting å gjøre er å bytte til Bygg innstillinger fanen og søk etter bitcode. Xcode vil hente opp Aktiver Bitcode alternativet, og du må sette den til å være Nei.

Du er nå klar til å skrive noen kode for å få AdMob-annonser vist i appen din!

Koden

Basert på hvordan appen din er bygget, vil du at AdMob-annonser skal vises i visningskontrollene dine. Så du må skrive inn .fort fil av kontrolleren du vil at annonser skal vises og importere følgende rammeverk øverst i filen:

importere GoogleMobileAds importere AudioToolbox

vedta GADBannerViewDelegate protokoll ved å legge den til slutten av klassedeklarasjonen din:

klasse ViewController: UIViewController, GADBannerViewDelegate 

Legg til AdMob-bannervisningen over viewDidLoad () metode i klassen din:

// Annonsebanner og mellomliggende visninger var adMobBannerView = GADBannerView ()

Følgende linje med kode er en enkel streng som gjenkjenner annonseenhets-IDen du tidligere har opprettet:

// VIKTIG: Bytt den røde strengen under med den annonseenhetens ID du har fått ved å registrere din app på http://apps.admob.com la ADMOB_BANNER_UNIT_ID = "ca-app-pub-9733347540588953/7805958028" 

Her må du erstatte ca-app-pub-9733347540588953/6145924825med ditt eget banner-ID, så gå tilbake til AdMob Annonsenheter side i nettleseren din for å kopiere den strengen og lime den inn i koden ovenfor.

Legg nå funksjonene under i din viewDidLoad () metode:

overstyr func viewDidLoad () super.viewDidLoad () // Init AdMob banner initAdMobBanner ()

Til slutt limer du inn følgende metodedeklarasjon hvor du vil i din .fortfil (før klassens sluttbrakett og ikke inn i en eksisterende metode):

// MARK: - ADMOB BANNER func initAdMobBanner () hvis UIDevice.current.userInterfaceIdiom == .phone // iPhone adMobBannerView.adSize = GADAdSizeFromCGSize (CGSize (bredde: 320, høyde: 50)) adMobBannerView.frame = CGRect (x : 0, y: view.frame.size.height, width: 320, height: 50) ellers // iPad adMobBannerView.adSize = GADAdSizeFromCGSize (CGSize (bredde: 468, høyde: 60)) adMobBannerView.frame = CGRect x: 0, y: view.frame.size.height, width: 468, høyde: 60) adMobBannerView.adUnitID = ADMOB_BANNER_UNIT_ID adMobBannerView.rootViewController = self adMobBannerView.delegate = selvvisning.addSubview (adMobBannerView) la request = GADRequest () adMobBannerView.load (request) // Skjul banner func hideBanner (_ banner: UIView) UIView.beginAnimations ("hideBanner", kontekst: 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, høyde: banner.frame.size.height) UIView .commitAnimations () banner.isHidden = true // Vis banner func showBanner (_ banner: UIView) UIView.beginAnimations ("showBanner", kontekst: 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, høyde: banner.frame.size.height) UIView.commitAnimations () banner.isHidden = false // AdMob banner tilgjengelig func adViewDidReceiveAd (_ visning: GADBannerView!) ShowBanner (adMobBannerView) // NEI AdMob banner tilgjengelig func adView (_ view: GADBannerView !, didFailToReceiveAdWithError feil: GADRequestError !) hideBanner (adMobBannerView)

Vær oppmerksom på at AdMob-bannere har forskjellige størrelser basert på den brukte enheten, så de første kodelinjene i func initAdMobBanner () sett størrelsen på bannere for iPhone / iPod Touch og iPad.

Hvis du er nysgjerrig på de tilgjengelige bannerstørrelsene for AdMob-annonser, kan du sjekke ut AdMob-dokumentasjonen. Uansett er de beste bannerstørrelsene for iPhone og iPad-enheter de som vi har angitt i koden ovenfor:

  • 320 x 50 px for iPhones
  • 468 x 60 px for iPads

CodeCanyon Mal

På CodeCanyon selger jeg en iOS-appmal som følger med AdMob-bannere bygget inn, og har også støtte for interstitialannonser. Så, hvis du vil øke hastigheten på utviklingen din, kan du bare kjøpe den malen og starte din app.

Finn det her: IOS AdMob Banner + Interstitial Ads Template | Universal (Swift).

Det er hundrevis av andre iOS-appmaler på CodeCanyon. Gå sjekk dem ut! Du kan bare spare arbeidstimer på din neste app.

Konklusjon

Takk for at du leser, og jeg ser deg neste gang! Vennligst sjekk ut noen av våre andre kurs og opplæringsprogrammer om iOS app utvikling med Swift.