swiftui로 admob 광고 붙이기

swiftui로 admob 광고 붙이는 방법입니다.

 

다음 글을 참조해서 admob을 생성하고 광고 단위를 만듭니다.

2023.07.15 - [다시 개발자] - admob 생성 및 광고 단위 만들기

 

그리고 SDK를 xcode에 연결합니다.

https://developers.google.com/admob/ios/quick-start?hl=ko 

시작하기  |  iOS  |  Google for Developers

 

위 내용이 어려우면 다음 글을 참조하십시오.

2023.07.18 - [다시 개발자] - xcode에 CocoaPods 라이브러리 적용하기

 

승인 전까지 테스트 광고 ID를 이용해 구현하도록 하겠습니다. 

더욱이 테스트 광고 ID를 사용하면 무효 트래픽이 발생하지 않는다고 하니 개발할 때는 반드시 테스트 광고 ID를 사용하는 것이 좋겠습니다.

 

https://developers.google.com/admob/ios/test-ads?hl=ko 

테스트 광고 사용 설정  |  iOS  |  Google for Developers

 

그럼 본격적으로 시작하겠습니다.

 

Info.plist에 App ID를 등록합니다.

Info.plist에 들어갈 Key는 GADApplicationIdentifier 입니다.

그리고 App ID는 광고 단위를 만들 때 위에 있던 것이 바로 App ID 입니다.

 

참고로, App ID는 테스트 광고 든 실제 광고 든 동일합니다.

 

프로젝트 > Target > Info를 선택한 후 맨 아래의 ⊕ 을 클릭합니다.

 

이때 GADApplicationIdentifier는 Key 리스트에 없기 때문에 그냥 복사해서 붙여 넣기를 합니다. 그리고 value에 app ID을 입력합니다.

 

 

다음은 swiftui로 구현을 합니다.

 

https://developers.google.com/admob/ios/banner?hl=ko 

배너 광고  |  iOS  |  Google for Developers

Google developer에서 제공한 예제는 UIKit을 활용하는 것이라 아쉽게도 사용을 포기하고 swiftui로 구현된 오픈소스를 찾았습니다.

 

https://medium.com/geekculture/adding-google-mobile-ads-admob-to-your-swiftui-app-in-ios-14-5-5073a2b99cf9

Adding Google Mobile Ads (Admob) to your SwiftUI app in iOS 14.5

 

그리고 소스는 Github에 올라온 것을 받아서 구현을 했습니다.

https://github.com/patrickhaertel/SwiftUIMobileAds/tree/main

GitHub - patrickhaertel/SwiftUIMobileAds: SwiftUIMobileAds allows you to integrate v8 of the Google Mobile Ads SDK into your Swi

 

해당 소스를 받아 컴파일을 했더니 여러 가지 이유로 성공하지 못했습니다. 그래서 필요한 소스만 받아서 직접 구현을 했습니다.

 

우선 블로그에 있는 내용처럼 Info.plist의 내용을 추가합니다.

참고로 GADApplicationIdentifier이 외에 SKAdNetworkIdentifier값이 포함된 SKAdNetworkItems은 google developer에도 명시되어 있습니다.

 

SwiftUIMobileAds를 download 받은 후 SwiftUIMobileAds.xcworkspace을 실행합니다. 다음 Info을 클릭한 후 SKAdNetworkItems 선택 오른쪽 마우스 클릭 > Copy를 클릭합니다. 그리고 내 프로젝트의 Info에 Paste를 하면 됩니다.

 

동일한 방법으로 "App Transport Security Settings"도 복사해 붙여 넣기를 합니다.

 

그다음 SwiftUIMobileAds의 Views Group에 있는 4개의 파일과 SwiftUIMobileAds을 복사해서 붙여 넣습니다.

 

SwiftUIMobileAds.swift 파일을 열고 테스트 광고 ID를 최신 값으로 수정합니다.

public final class SwiftUIMobileAds {     public static let testBannerId = "ca-app-pub-3940256099942544/2934735716"     public static let testInterstitialId = "ca-app-pub-3940256099942544/4411468910"     public static let testRewardedId = "ca-app-pub-3940256099942544/1712485313" }

 

프로젝트 main 파일을 SwiftUIMobileAds의 SwiftUIMobileAdsExampleApp.swift와 동일하게 수정합니다.

import SwiftUI import AppTrackingTransparency import GoogleMobileAds @main struct SwiftUIMobileAdsExampleApp: App {          init() {         ATTrackingManager.requestTrackingAuthorization { status in             GADMobileAds.sharedInstance().start(completionHandler: nil)         }     }          var body: some Scene {         WindowGroup {             ContentView()         }     } }

 

SwiftUIMobileAds의 ContentView.swift을 복사해 옵니다.

import SwiftUI import SwiftUIMobileAds struct ContentView: View {     @State var showRewardedAd: Bool = false     @State var showIntersitialAd: Bool = false     @State var rewardGranted: Bool = false          var body: some View {         ZStack {             VStack {                 if rewardGranted {                     Text("Here's a gift 🎁")                 } else {                     Button("Get a Reward") {                         showRewardedAd.toggle()                     }                 }                                  Button("Show Interstitial Ad") {                     showIntersitialAd.toggle()                 }                 .padding()                 .foregroundColor(Color(.systemPurple))             }                          SwiftUIBannerAd(adPosition: .bottom, adUnitId: SwiftUIMobileAds.testBannerId)         }         .presentRewardedAd(isPresented: $showRewardedAd, adUnitId: SwiftUIMobileAds.testRewardedId) {             print("Reward Granted")             rewardGranted.toggle()         }         .presentInterstitialAd(isPresented: $showIntersitialAd, adUnitId: SwiftUIMobileAds.testInterstitialId)     } } struct ContentView_Previews: PreviewProvider {     static var previews: some View {         ContentView()     } }

 

참고로 저는 SwiftUIMobileAds에서 SwiftUIMobileAds.h를 복사하지 않아서 ContentsView에서 삭제를 했습니다. 그리고 실행하면 다음과 같이 배너 광고, 전면 광고, 보상형 광고가 제대로 나오는 것을 알 수 있습니다.

 

실행 화면	보상형 광고	시청 후 텍스트 변경	전면 광고

 

참고로, SwiftUIMobileAds는 MIT License 정책을 따릅니다. 따라서 자유롭게 사용을 하면서 반드시 MIT License를 공개해 주십시오.

MIT License Copyright (c) 2021 Patrick Haertel Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.