AdMob课堂:教你整合Firebase AdMob SDK在苹果iOS Apps内投放广告

这里是admob课堂,对于开发者来说从 App 盈利最简单的方式,就是将你的 App应用放进 App Store,以$0.99美元或以上的售价来销售(赚取内购订阅收入),这个商业模式对某些 App产品来说非常适合,今天我们将介绍如何将Google AdMob广告植入到app来盈利。

在所有网络广告中,Google 的 AdMob 是最受欢迎的。Google 提供了SDK 让开发者能够在自己的 iOS App中嵌入广告。 Google 销售它们的广告空间(如横幅广告(banner))给许多的广告主。你可以通过产品访客的浏览或点击广告来获利。

想要在 App 中使用 AdMob,你只需要使用 Google 的移动广告 SDK(Google Mobile Ads SDK),这个整合的过程并不困难,只需要几行代码就可以展示一个简单的横幅广告。

申请Google AdMob帐号、添加应用、添加广告单元、获取广告单元ID这些,我们在前面的文字都已经讲到,可以通过查询前面的文章获取。

现在你已经在AdMob完成了所有设置,我们开始进行操作。打开Xcode并开启 GoogleAdDemo.xcworkspace 这个起始专例来开始。请注意是开启 GoogleAdDemo.xcworkspace ,而不是 GoogleAdDemo.xcodeproj ,我建议你编译并执行专例模板,这样你会对这个案例 App 有基本概念,这是一个简单的表格 App,内容是一些文章的列表。

图片[1]-AdMob课堂:教你整合Firebase AdMob SDK在苹果iOS Apps内投放广告-GG联盟挑战

要整合Google AdMob 进去专例中,首先需要安装 Google 移动广告框架(Google Mobile Ads framework )至专例中,我已经使用CocoaPods来加入这个专例。简单地说,你需要在你的 Xcode 建立一个 Podfile,并在Podfile 中 App 的 target 下加入以下这两行代码:

pod ‘Firebase/Core’
pod ‘Firebase/AdMob’
然后你需要执行 pod install 来取得 SDK, 并且让 CocoaPods 将这个 SDK 整合进去你的 Xcode 专案中,不管怎样,我假定你使用 Xcode 专案来进行本章内容的学习。

在这个起始专案,倘若你进一步看一下这个专案,你会发现两个专案:GoogleAdDemo 与 Pods。前面这个是原来的专案,而 Pods 是绑定(bundle)这个 Google Mobile Ads SDK 的专案。

要在你的程序中,使用Google Mobile Ads SDK 的话,你需要导入框架,并注册你的 App ID。我们将AppDelegate.swift 档中做初始化。插入这个 import 叙述至档案的最前面:

import GoogleMobileAds
接下来,插入以下的程式至

application(_:didFinishLaunchingWithOptions:) 方法中:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

// Override point for customization after application launch.

GADMobileAds.configure(withApplicationID: "ca-app-pub-8501671653071605~9497926137")

return true

}
请确认你有将 App ID 换成你的。在 App 启动时初始化这个 Google Mobile Ads SDK,让这个 SDK 能够尽早地执行设定的工作。

在表格视图标头显示横幅广告
我们开始以最简单的方式在你的App中呈现横幅广告。我们将会从 Google 请求一个横幅广告,并将这幅广告显示在表格标头(header)。

要在该位置呈现一个横幅广告,你所需要做的便是建立一个 GADBannerView 物件,设定它的委派,以及根视图控制器(root view controller)。然后你呼叫它的 load 方法,并加上一个广告请求来取得一个横幅广告。当广告准备要显示时,他会呼叫GADBannerViewDelegate 协定的adViewDidReceiveAd(bannerView:) 方法。所以你只需要实作这个方法就可以在表格视图标头来显示横幅广告。

好的,我们来进行实作的部分。

现在开启 NewsTableViewController.swift 。首先,导入GoogleMobileAds 框架并采用 GADBannerViewDelegate 协定:

import GoogleMobileAds

class NewsTableViewController: UITableViewController, GADBannerViewDelegate {
接下来, 宣告一个 GADBannerView 型态的变数。这是用来存放横幅视图(banner view)的变数:

lazy var adBannerView: GADBannerView = {
let adBannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)
adBannerView.adUnitID = “ca-app-pub-8501671653071605/1974659335”
adBannerView.delegate = self
adBannerView.rootViewController = self

return adBannerView

}()
以上的程式中,我们使用一个闭包( closure)来初始化 adBannerView 变数,也就是产生一个GADBannerView 的实例(instance)。在初始化过程中,我们告诉这个 SDK 我们想要取得一个智慧横幅广告(smart banner)( kGADAdSizeSmartBannerPortrait ) 。如同名称的意涵,智慧横幅广告可以很聪明的侦测萤幕宽度并根据宽度来调整萤幕大小。同时我们也设定广告单元(Ad Unit)ID,委派(delegate)与根视图控制器(root view controller)。同样的,请将 ID 换成你自己的。

我们使用延迟初始化(lazy initialization,有时候称作延迟实例化(lazy instantiation)或延迟载入(lazy loading))来初始化 adBannerView 变数。在 Swift,你使用 lazy 关键字来指示某个变数可以稍后才初始化,更精确地说法是,这个变数只有在使用时才会被实例化。这个技术对于延迟物件的建立,尤其是对需要花点时间来载入物件或者是你所参照的物件还没准备好物件的建立时特别有用。在初始化期间,我们设定 delegate 与 rootViewController 属性为 self 。不过 NewsTableViewController 在这时候还没准备好。我们使用lazy 来延迟 adBannerView 的初始化。

一定要使用延迟初始化来建立横幅广告视图吗?不,我是想要利用这个机会来介绍延迟初始化,并示范如何使用闭包来做变数的初始化。你也可以像这样,不使用延迟初始化:

var adBannerView: GADBannerView?

override func viewDidLoad() {
super.viewDidLoad()

adBannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)
adBannerView?.adUnitID = "ca-app-pub-8501671653071605/1974659335"
adBannerView?.delegate = self
adBannerView?.rootViewController = self

}
不过,如你所见,前面一种初始化方式可以让我们将所有的初始化程式放在闭包中,程式的可读性更高,也更易于管理。

现在我们已经建立了adBannerView 变数,下一步就是广告的请求。你只需要加入以下这一行程式至 viewDidLoad 方法中就可以办到:

adBannerView.load(GADRequest())
最后,我们采用两个 GADBannerViewDelegate 协定中的可选择性(option)

方法如下:

func adViewDidReceiveAd(_ bannerView: GADBannerView) {
print(“Banner loaded successfully”)
tableView.tableHeaderView?.frame = bannerView.frame
tableView.tableHeaderView = bannerView

}

func adView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: GADRequestError) {
print(“Fail to receive ads”)
print(error)
}
当广告成功载入后, adViewDidReceiveAd 方法会被呼叫。在这个方法中,我们只是指定这个横幅视图至表格视图的标头视图(header view)。这可以让 App 在表格标头显示横幅广告。如果广告载入失败,我们只要保存错误信息至主控台即可。

试着执行范例 App 并测试一下。当 App 启动时,你会见到在表格视图的最前面出现了一个横幅广告。

添加动画效果
有时候在横幅广告加入点精致的动画像是广告如何转场至画面中,使用者的体验会更棒。在这一节,我会告诉你如何让横幅广告动起来。当广告转场至画面时,我们将加入一个滑下动画(slide-down animation)。

这个技巧是应用UIView 动画至横幅广告。当广告第一次载入时,我们重新调整横幅广告的位置让它离开画面。然后我们使用滑下动画。

如同之前所述,adViewDidReceiveAd 方法在广告准备好时被呼叫。要让广告展示出来,我们需要修改方法如下:

func adViewDidReceiveAd(_ bannerView: GADBannerView) {
print(“Banner loaded successfully”)

// 重新调整横幅广告位置来建立滑下特效
let translateTransform = CGAffineTransform(translationX: 0, y: -bannerView.bounds.size.height)
bannerView.transform = translateTransform

UIView.animate(withDuration: 0.5) {
    self.tableView.tableHeaderView?.frame = bannerView.frame
    bannerView.transform = CGAffineTransform.identity
    self.tableView.tableHeaderView = bannerView
} 

}
我们先建立一个 translateTransform 来移动横幅广告视图离开画面,然后呼叫UIView.animate 来将广告滑下至画面中。

执行这个专案并测试 App,这个广告将会以动画效果来呈现。

紧贴的横幅广告
当你滚动表格视图时,广告便消失了。它并没有紧贴表格视图标头。你可能想知道,要如何显示一个随时紧贴的横幅广告。这也是本节所要探索的内容。

这个横幅广告现在已经插入表格标头视图。倘若你想要能够将广告贴紧不放,你可以将其加在区块(section)的标头视图而不是表格的标头视图。

让我们来看如何实作。

插入以下的方法在 NewsTableViewController 类别:

override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
return adBannerView
}

override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {

return adBannerView.frame.height

}
我们以自己的方法来覆写(override)预设的 tableView(_:viewForHeaderInSection:) 方法,并回传横幅广告视图。

预设标头的高度对横幅广告来说太小。所以我们同时覆写了tableView(_:heightForHeaderInSection:) 方法,并回传横幅广告视图框(frame)的高度。

最后,修改adViewDidReceiveAd 方法如下:

func adViewDidReceiveAd(_ bannerView: GADBannerView) {
print(“Banner loaded successfully”)

// 重新调整横幅广告位置来建立滑下特效
let translateTransform = CGAffineTransform(translationX: 0, y: -bannerView.bounds.size.height)
bannerView.transform = translateTransform

UIView.animate(withDuration: 0.5) {
    bannerView.transform = CGAffineTransform.identity
}

}
我们只是移除了跟表格视图标头有关的程式,因为已经用不到了。

如此,现在可以再次准备测试这个 App。横幅广告已经在固定位置显示了。

播放插播广告
除了在 App中使用横幅广告之外,Google Mobile Ads SDK 也可以让你很容易地播放插播广告(interstitial ads,也就是全萤幕的广告)。一般来说,你可以透过插播广告来赚取更多广告费,因为它完全盖住了App的内容,并获得了使用者的注意。

这种广告的缺点就是有点恼人,因为它强迫使用者来检视广告除非他们点击取消。不过这还是依照所设计的频率以及在什么情况下你要播放全萤幕广告而定。我用过一些 App,每几分钟持续出现插播广告。透过谨慎规划的广告编排,可以让你的 App 不那么扰人。举例来说,你可以只出现一次广告,倘若你正在开发游戏的话,你可以设计在游戏关卡之间播放。无论如何,我的重点是告诉你如何在 iOS App 中播放插播广告。我的规划是在使用者打开这个范例 App 时播放这个广告。

首先,你必须先回到 AdMob 的后台((https://apps.admob.com),来帮案例App 建立一个插播广告。选取Manage your apps 并点击GoogleAdMobDemo 旁的 1 active 链接。在下一个画面,点击 New Ad Unit 来建立一个新的广告单元。

这一次,我们建立一个插播广告。给这个广告单元创建一个名称并点击Save 来创建这个广告单元。 AdMob 应该会为你生成另一个广告单元 ID。

接下来,回到 Xcode 专案。

插播广告的实际效果跟横幅广告非常相似。这边我们使用GADInterstitial 类别来取代GADBannerView 类别。所以先宣告一个变数来储存GADInterstitial 物件:

var interstitial: GADInterstitial?
不过, GADBannerView 与 GADInterstitial 的差异在于,GADInterstitial 是只使用一次的物件。这表示此插播广告出现过后,就无法再载入其他广告。

由于这个因素,我们建立了一个辅助方法,称作 createAndLoadInterstitial() 来建立广告。在NewsTableViewController 类别插入这个广告:

private func createAndLoadInterstitial() -> GADInterstitial? {
interstitial = GADInterstitial(adUnitID: “ca-app-pub-8501671653071605/2568258533”)

guard let interstitial = interstitial else {
    return nil
}

let request = GADRequest()
// Remove the following line before you upload the app
request.testDevices = [ kGADSimulatorID ]
interstitial.load(request)
interstitial.delegate = self

return interstitial

}
我们先以广告单元ID(记得替换成你自己的)来初始化一个 GADInterstitial 物件,然后我们建立一个 GADRequest ,呼叫 load 方法,并设定委派为 self 。这跟我们在横幅广告所做的一样。你可能会注意到,我们也设定广告请求的 testDevices 属性。如果你没有设定其值,你将无法在测试装置载入插播广告。这里的kGADSimulatorID 表示我们的测试装置是内建于模拟器中。

当视图载入时,我们会建立这个广告。所以插入以下的程式至 viewDidLoad() 方法中:

interstitial = createAndLoadInterstitial()
跟 GADBannerView 类似,为了检查广告的状态,我们需要采用一个协定。更新类别的定义如下来采用GADInterstitialDelegate 协定:

class NewsTableViewController: UITableViewController, GADBannerViewDelegate, GADInterstitialDelegate
现在实作这个协定的选择性方法如下:

func interstitialDidReceiveAd(_ ad: GADInterstitial) {
print(“Interstitial loaded successfully”)
ad.present(fromRootViewController: self)
}

func interstitialDidFail(toPresentScreen ad: GADInterstitial) {
print(“Fail to receive interstitial”)
}
当插播广告准备好之后,interstitialDidReceiveAd(ad:) 将会被呼叫。在这个方法,我们呼叫 GADInterstitial 的 present 方法来播放广告。

现在你已经准备好测试这个 App。在启动 App之后,你应该会见到一个全萤幕的测试广告。

以上内容部分采摘自互联网,如有侵权,请联系我们移除。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享