[Swift] Google AdMob 커스텀 광고달기

 

진행중인 프로젝트에서 유지비를 충당하고자 광고를 달아 봤는데요

나중에 앱에다가 광고를 달고 많은 수익을 내서 먹고살았으면 좋겠어요 ㅎㅎ

 

우선 구글 AdMob을 사용해서 광고를 달았는데요

지원하는 광고형식에는 여러가지가 있어요

밑에 다는 배너

전체화면으로 보이는 전면

보상형같이 몇초기다리는 그런 광고

아니면 제맘대로 커스텀 디자인해서 보여줄 수 있는 네이티브 광고

앱의 컨텐츠와 자연스러움을 위해서는 네이티브 광고가 좋죠

 

이렇게말이죠.. ㅎㅎ

네이티브 광고를 구현하는 것을 해볼 거예요

 

문서에도 잘 설명되어있지만..!

 

우선 먼저 iOS14+ 에서는 트레킹에 관한정책이 변경되어서 명시를 해줘야해요

권한을 요청하는 코드를 통해서

if #available(iOS 14, *) {
    ATTrackingManager.requestTrackingAuthorization {
        switch $0 {
        case .authorized:
            print("auth")
        case .denied:
            print("denied")
        case .notDetermined:
            print("not determind")
        case .restricted:
            print("restrict")
        default:
            print("default")
        }
    }
}

plist에 아래의 내용을 추가해주고

요청alert에 내용을 보여주는거에요

꼭 설정해줘야해요 안하면 리젝사유!!

 

뷰를 만들때

그냥 일반 View로 만들어서 해도 돼지만

AdMob라이브러리에서 지원해주는 GADUnifiedNativeAdView가 있어요 이 뷰를 이용하면

 

이렇게 오른쪽위에 i 표시가 자동으로 뜨고

광고데이터를 넣을 수 있는 프로퍼티가있어요

 

GADUnifiedNativeAdView에 프로퍼티에 여러가지의 뷰들이 이미존재하고 해당뷰를 이용해서 만들어두 가능하지만

저는 UIKit의 UILabel, UIView, UIImageView를 이용했어요

 

그리고 꼭 아래처럼

 @IBOutlet private weak var background: GADUnifiedNativeAdView!
 @IBOutlet private weak var adLabel: UILabel!
 @IBOutlet private weak var headlineLabel: UILabel!
 @IBOutlet private weak var bodyLabel: UILabel!
 @IBOutlet private weak var adImageView: UIImageView!
 
 // 아래작업을 하지않으면 클릭시 광고페이지로 이동불가
 background.nativeAd = nativeAd
 background.bodyView = bodyLabel
 background.headlineView = headlineLabel
 background.iconView = adImageView
 background.advertiserView = adLabel

GADUnifiedNativeAdView의 프로퍼티의 뷰와 연결을해줘야

클릭시 자동으로 광고페이지로 이동할 수 있구요

 

 

디자인을 다했으면이제 광고데이터를 불러와야겠죠?

 

 

광고를 불러올때 꼭 테스트 기기를 등록하던가 시뮬레이터만사용해야해요

위의 경우가 아니라면 광고 알고리즘에서 잘못된 접근으로 광고를 못하게 막는데요

그래서 디버그모드와 아닐때를 나눠서 id를 넣어주고

타입을 네이티브로 설정했어요

    lazy var adLoader: GADAdLoader = {
        let id: String
        #if DEBUG
        id = ""
        #else
        id = ""
        #endif
        
        let adLoader = GADAdLoader(adUnitID: id,
                                   rootViewController: self,
                                   adTypes: [.unifiedNative],
                                   options: [])
        adLoader.delegate = self
        return adLoader
    }()

 

위에서만든 adLoader에 .load(GADRequest())를 호출해서 광고를 로드하고

통신으로 데이터를 불러왔다면 delegate의 didReceive함수가 호출되고

거기서 Cell에 넣을 데이터를 지정해주면되요

 

저는 TableView의 랜덤위치에 광고를 넣어줄거기때문에 인덱스 재조정하는 로직이 있구요

extension HomeViewController {
    func requestGoogleAdMob() {
        adLoader.load(GADRequest())
    }
    
    // 이 함수는 무시해도 되는 코드입니다
    func fetchAdMobCellIndex() {
        guard adMobModel == nil, !noticeData.isEmpty else {
            return
        }
        
        // 데이터보다 광고인덱스가 큰경우 재조정
        if noticeData.count-1 < adMobSection {
            adMobSection = noticeData.count
        }
        let adMob = NoticeCell(type: 100, date: nil, data: nil)
        noticeData.insert(adMob, at: adMobSection)
    }
}

extension HomeViewController: GADUnifiedNativeAdLoaderDelegate {
    func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADUnifiedNativeAd) {
        self.nativeAd = nativeAd
        adMobModel = GoogleAdMobModel(headline: nativeAd.headline ?? "",
                                      body: nativeAd.body ?? "",
                                      advertise: nativeAd.advertiser ?? "광고",
                                      iconImg: nativeAd.icon?.image)
    }
    
    func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: GADRequestError) {
        print(error)
    }
}

 

광고의 데이터가 각각 다르기때문에 높이도 동적으로 맞춰줘야해요

 

광고가 업데이트 되는 과정은

서버와 통신을통해 보여줄 데이터를 먼저 가져옴

-> 데이터 + 랜덤인덱스에 adMob타입의 데이터를 추가

-> (data갯수보다 임의의위치가 더 크다면 마지막 위치로 위치 수정)

-> 해당 row에 로딩중 애니메이션 표시

-> 랜덤인덱스가 TableView에 보이면 (willDisplay)

-> 광고요청 adLoader.load

-> didReceive

-> adMobModel 업데이트

-> didSet이용 해당 row의 cell에 접근해서 광고모델 넣어줌 (cell.bind)

-> beginUpdate

-> cell높이 재계산

-> endUpdate

를통해서 컨텐츠 크기에맞게 자연스러운 높이 변화를 주었어요

 

이 때 reloadData를 이용할 때 주의해야해요

willDisplay에서 데이터를 요청하는 로직과 모델이 업데이트 됫을때 리로드를 호출하면 광고를 계속호출하는 무한루프가 생성

 

위와같은 문제가 생길 수 있어서 beginUpdate와 endUpdate로 변화를 줬어요