지난 포스팅에서는 AdMob 계정을 생성하고, 내 앱을 등록하고, 배너광고를 생성하는 방법 까지 알아봤습니다.
[iOS앱 개발] Google AdMob 배너광고를 앱에 추가해보자 [1]
앱 내 배너광고 이런 식으로 앱의 하단이나 상단에 배너광고를 보신적이 있으실껍니다. 내 앱에 구글 광고를 추가하게 위해서는 GoogleAdMob에서 앱을 추가하면 사용할 수 있는데요. 이번 포스팅에
jimmy-ios.tistory.com
이번 포스팅에서는 실제 프로젝트에서 배너광고를 띄우는 방법을 차근차근 알아보겠습니다.
iOS 프로젝트에서 AdMob 시작하기
Firebase를 연동해 Google 애널리틱스를 사용하는 방법은 위에 firebase 문서를 보시면 되고 저는 아직 처음 만들어 보는거라 그냥 AdMob만 연결해주도록 하겠습니다. 그래서 Google AdMob 문서를 기준으로 만들어 보겠습니다.
iOS와 Xcode버전이 업데이트 되면서 약간 다른 부분도 있으니 제 방법을 보면서 따라오시면 될것 같습니다.
https://github.com/googleads/swift-package-manager-google-mobile-ads.git
저는 SPM사용을 선호하기 때문에 CocoaPods는 생략하겠습니다.
위 Git주소를 Xcode에서 AddPackages로 추가해줍니다.
SPM으로 Google 모바일 광고 SDK를 설치해줍니다.
※※※ 주의사항 ※※※ 이 부분이 약간 다릅니다.
위 사진은 공식 문서에 나와있는 방식인데 실제로 해보니 저렇게 뜨지 않더라고요.
실제 프로젝트에서는 Other Link Flags를 클릭해보면 Debug와 Release 2개의 설정이 나옵니다.
저는 Release 만 -ObjC(앞에 O와 뒤에 C는 대문자입니다)를 등록해줬는데 오류가 발생했습니다.
그래서 그냥 2개 다 작성해주니 오류가 해결됐습니다.
그 다음은 Info.plist에 AdMob app ID와 SKAdNetworkIdentifier 키를 추가해줘야 합니다.
엄청나게 긴 뭔가가 있는데요 그냥 복사해서 Info.plist에 추가해 주겠습니다.
SKAdNetworkIdentifie가 뭐하는 녀석인지는 다음에 알아보겠습니다.....
Info.plist를 Source Code로 열어주겠습니다.
이렇게 나오게 되는데 <dict> 와 <dict>사이에 아래 코드를 복사해서 넣어주면 되겠습니다.
아래 더보기를 클릭하면 SKAdNetworkIdentifie 코드가 나옵니다
---------
<key>GADApplicationIdentifier</key>
<string>##여러분의 appID를 여기에 넣어주시면 됩니다##</string>
<key>SKAdNetworkItems</key>
<array>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>cstr6suwn9.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>4fzdc2evr5.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>4pfyvq9l8r.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>2fnua5tdw4.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>ydx93a7ass.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>5a6flpkh64.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>p78axxw29g.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>v72qych5uu.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>ludvb6z3bs.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>cp8zw746q7.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>c6k4g5qg8m.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>s39g8k73mm.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>3qy4746246.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>3sh42y64q3.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>f38h382jlk.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>hs6bdukanm.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>prcb7njmu6.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>v4nxqhlyqp.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>wzmmz9fp6w.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>yclnxrl5pm.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>t38b2kh725.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>7ug5zh24hu.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>9rd848q2bz.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>y5ghdn5j9k.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>n6fk4nfna4.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>v9wttpbfk9.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>n38lu8286q.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>47vhws6wlr.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>kbd757ywx3.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>9t245vhmpl.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>a2p9lx4jpn.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>22mmun2rn5.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>4468km3ulz.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>2u9pt9hc89.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>8s468mfl3y.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>av6w8kgt66.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>klf5c3l5u5.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>ppxm28t8ap.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>424m5254lk.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>ecpz2srf59.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>uw77j35x4d.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>mlmmfzh3r3.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>578prtvx9j.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>4dzt52r2t5.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>gta9lk7p23.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>e5fvkxwrpn.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>8c4e2ghe7u.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>zq492l623r.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>3rd42ekr43.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>3qcr597p9d.skadnetwork</string>
</dict>
</array>---------
<key>GADApplicationIdentifier</key>
<string>##여러분의 appID를 여기에 넣어주시면 됩니다##</string>
위 코드 블럭에는 지난번 받았던 앱ID를 넣어주시면 됩니다
모바일 광고 SDK 초기화
광고를 로드하기 전에 GADMobileAds.sharedInstance에서 startWithCompletionHandler: 메서드를 호출합니다. 그러면 SDK가 초기화되고 초기화가 완료된 후 (또는 30초의 제한 시간이 경과한 후에) 완료 핸들러를 다시 호출합니다. 이 작업은 앱 실행 시 한 번만 하는 것이 좋습니다. startWithCompletionHandler:를 최대한 빨리 호출해야 합니다.
라고 공식문서에 나와있는데요
간단하게 AppDelegate에 초기화 코드를 작성해주면 됩니다.
공식 문서에서는 위 같이 나와있는데요 iOS12 버전 이후로는 @UIApplicationMain이 아닌 @Main으로 나와있으니 당황하지 않으셔도 괜찮습니다.
import UIKit
import GoogleMobileAds
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// GoogleMobileAds
GADMobileAds.sharedInstance().start()
return true
}위와 같이 작성해주시면 됩니다.
배너 광고 구현
이제 배너 광고 구현으로 넘어가 봅시다.
GADBannerView만들기
공식 문서에서는 프로그래매틱 방식을 알려주던데 전 커스텀 하기 편하게Storyboard로 구현해봤습니다.
스토리보드에서 UIView를 추가해줍니다. 레이아웃은 SuperView의 하단과 UIView의 하단을 맞춰주고 가운데정렬을 해줬습니다.
그리고 UIView의 Class를 GadBannerView로 꼭 바꿔줘야 합니다.
저는 나중에 배너의 크기를 변경해서 사용할 예정이라 GadBannerView의 Width와 Height 제약을 IBOutlet으로 만들어줬습니다.
googleBannerView는 스토리보드에서 만들어준 배너광고 뷰입니다.
googleBannerWidth와 googleBannerHeight는 스토리보드에서 추가해준 googleBannerView의 너비와 높이 입니다.
bannerTestID는 광고를 테스트하기 위한 ID이구요.
bannerAdsID1과 bannerAdsID2는 실제 제가 받은 배너 광고 ID입니다.
bannerAdsID1는 제가 실수했던 파트너 입찰입니다... 테스트를 하기 위해서 배너광고를 2개 만들어서 넣었습니다.
여러분은 일반 배너광고 ID하나만 넣으시면 됩니다.
배너 광고 로드
override func viewDidLoad() {
super.viewDidLoad()
googleBannerView.adUnitID = bannerAdsID2
googleBannerView.rootViewController = self
googleBannerView.load(GADRequest())
googleBannerWidth.constant = view.frame.width
googleBannerView.delegate = self
}googleBannerView.adUnitID = bannerAdsID2 : 배너 광고 ID를 등록해주는 코드입니다.
googleBannerView.rootViewController = self : 광고를 클릭할 때 오버레이를 표시하는 데 사용됩니다. 일반적으로 GADBannerView를 포함하는 뷰 컨트롤러로 설정해야 합니다
googleBannerView.load(GADRequest()) : GADBannerView가 제자리에 있고 속성이 구성되면 광고를 로드할 차례입니다. GADRequest 객체에서 loadRequest:를 호출하면 됩니다.
googleBannerWidth.constant = view.frame.width : 배너뷰의 넓이를 뷰의 너비와 같게 설정해주는 코드인데요 처음 배너뷰를 만들때무터 뷰의 너비와 같게 설정해주면 이 코드는 필요가 없습니다. 저는 나중에 커스텀 할 걸 고려해서 이렇게 만들었습니다.
googleBannerView.delegate = self : 배너뷰의 이벤트를 관리하는 Delegate인데요. 광고를 수신했을 애니매이션 효과를 추가 하는 등 프로토콜 메서드로 구현가능합니다. 이건 뒷부분에서 좀 더 다뤄보겠습니다.
실제 구현된
좌측은 테스트ID를 입력해서 받아온 테스트 광고입니다.
광고 허가가 떨어지기 전에 내 앱에서 실제로 광고를 받아올 수 있는지 테스트하기 위한 용도입니다.
우측은 실제 광고ID를 입력해서 받아온 광고인데요. 여기서 정말 중요한 포인트가 있습니다.
※※※ 주의사항 ※※※ (테스트 기기 등록) 이거 안하면 광고 막힙니다.
개발자가 자신의 광고를 1번이라고 클릭하게 되는 순간 바로 광고 정지를 당하게 되는데요...
이같은 불상사를 막기 위해서 테스트 기기 등록 이라는 것을 해줘야 합니다.
Xcode의 시뮬레이터에서는 다행이 테스트광고를 자동으로 받아오게 설정되어있습니다.
AdMob에 들어가 설정에 들어가면 기기 테스트 항목이 있는데요. 내가 실제로 테스트하는 디바이스를 등록해야 합니다.
광고 ID/IDFA라는 것을 등록해줘야 하는데 이걸 iOS디바이스에서는 기본적으로 제공하지 않습니다.
가져오기 위해서는 코드를 쳐서 가져오는 방법이 있고 누군가 만들어둔 앱을 사용해서 가져와야 합니다.
저는 누군가 만든 ID/IDFA를 가져오는 앱을 사용했습니다.
My Device ID by AppsFlyer
My Device ID by AppsFlyer lets app developers quickly find and share device details such as: * IP address * IDFA Use My Device ID to directly register test devices and test AppsFlyer SDK integration within your app. For more information about using a te
apps.apple.com
위 앱을 사용하면 ID를 쉽게 가져올 수 있는데요 앱을 켰을 때 나오는 앱 추적을 반드시 허용해 줘야지만 ID를 가져올 수 있습니다.
ID를 가져왔다면 이제 내 디바이스에서 광고를 클릭하는 실수는 해결했습니다.
광고 식별자 IDFA
앱을 키면 사용자의 활동을 추적하도록 허용하겠습니까? 라는 알림이 뜨는데요. 이게 바로 광고 식별자(IDFA) 입니다.
애플에서 2020년 발표한 개인정보 보호 정책인데요. 이로 인해서 Facebook에서 사용자 맞춤형 광고를 사용할 수 없게 되었죠...
이게 관한 자세한 내용은 [iOS] IDFA(광고 식별자)를 더 이상 디폴트로 사용할 수 없게 된다구요? 에서 확인해 볼 수 있습니다.
[iOS] IDFA(광고 식별자)를 더 이상 디폴트로 사용할 수 없게 된다구요?
iOS 14의 AppTracking Transparency를 통한 새로운 개인 정보 보호 정책에 대하여
sujinnaljin.medium.com
애플의 이러한 정책으로 인해 맞춤형 광고가 어려워졌고 광고의 단가가 내려가게 되었습니다.
iOS 14 부터 장착된 AppTracking Transparency(ATT) 프레임워크를 통해 광고 추적에 대한 팝업 알림을 무조건 띄워서 맞춤형 광고를 받아 오거나.
구글에서 제공하는 SKAdNetworkIdentifier를 사용해서 광고의 단가를 높일 수 있다고 합니다.
오늘은 내 앱에서 Google AdMob의 배너광고를 실제로 만드는 방법까지 알아봤습니다.
다음 포스팅에서는 IDFA(광고 식별자)를 사용해 앱 사용자에게 광고 추적에 대한 팝업 알림을 띄우고 허가를 받는 방법에 대해서 알아보겠습니다.
