내 앱에 광고를 적용해보자!( 광고 매체사별 비교 )

안녕하세요 개발새발 블로그입니다.

오늘은 App 을 개발한 후 광고를 붙여 수익을 얻는 방법을 알아보죠!

 

 

1. 광고 매체사별 장단점

Google Admob

장점 : 높은 수익성, 안정적인 수익 보장

단점 : 부정 클릭 등 정책위반 사유 주의 

 

애드싱크

장점 : 높은 수익률

단점 : 인터페이스 악화 및 사용자 불편감

 

카카오 애드핏

장점 : 노출 당 금액이 높음

단점 : 이미지 또는 텍스트 배너만 사용 가능

 

카울리

장점 : Google Admob 과 비슷한 광고 형태 제공

단점 : Google Admob 보다 수익이 낮음.

 

 

2. 광고 형태의 종류

상시노출되는 띠배너 보다 전면배너가 수익성이 오히려 높게나옵니다.

그리고 전면배너 보단 App에 디자인에 맞춰서 내가 꾸밀수 있는 네이티브애드가 사용자에게 불편함을 덜 주게만들수있습니다.

 

 

3. 직접 적용해봅시다!(Google Admob)

ㄴ 직접 운영하고 있는 롤스카우터 (LoL Scouter) App 에 광고를 적용해보겠습니다!

 

 

 Step 1. 먼저 Google Admob 에 가입해서 App을 등록합니다

앱 -> 앱추가를 클릭합니다.

 

 

 

간단하게 만들수 있습니다.

 

 

Step2. 광고 단위 만들기.

Google 에서는 여러가지 광고를 제공합니다. 원하는 광고형식을 선택한 후

 

광고 단위 만들기 를 누르면 쉽게 생성됩니다.

 

 

 

Step3. 만들어진 광고 단위 App 에 적용후 띄우기. (네이티브 광고를 사용하겠습니다.)

 

먼저 manifest에 <application> 안에 만들었던 App ID를 적용해줍니다.

앱 설정에서 등록한 App의 ID 를 확인 하실 수 있습니다.

 

 

 

그리고 gradle 에 google admob을 implement 해줍니다.

implementation "com.google.android.gms:play-services-ads:18.3.0"

 

 

 

 

이 후 XML로 광고를 띄울 화면을 만들어주겠습니다.

 

UnifiedNativeAdview 안에 원하는대로 화면을 구성합니다.

이미지 또는 동영상을 띄울 레이아웃은 

위 이미지 처럼 MediaView로 할당해주면 됩니다.

 

  - 요약

<UnifiedNativeAdview>

<LinearLayout>  ...   </LinearLayout>

<LinearLayout>  ...   </LinearLayout>

<LinearLayout>  ...   </LinearLayout> 등등

<MediaView/>

</UnifiedNativeAdview>

 

형태가 됩니다.

 

저는 위 이미지 처럼 구현 하였습니다. 빨간 칸은 <UnifiedNativeAdview> 공간이고 

파란 칸은 <MediaView/> 가 되겠습니다. 나머지는 원하시는대로 커스텀하시면 됩니다.

 

 

다음으로 Admob 광고를 얻어오겠습니다.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        adsBinding = DataBindingUtil.setContentView(this, R.layout.dialog_camera_ads)
 
        MobileAds.initialize(this) {}
 

onCreate에 MobileAds.initialize(this) {} 라고 작성해주시고

 

 

 

    private fun getAdmob() {
        val builder = AdLoader.Builder(this, ADMOB_AD_UNIT_ID)
        builder.forUnifiedNativeAd {
                unifiedNativeAd ->
            populateUnifiedNativeAdView(unifiedNativeAd)
        }
        val adLoader = builder.withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(errorCode: Int) {
                Toast.makeText(this@AdsActivityCamera, "Failed to load native ad: " + errorCode, Toast.LENGTH_SHORT).show()
                adsBinding.adsLoad.visibility = View.GONE
            }
        }).build()
 
        adLoader.loadAd(AdRequest.Builder().build())
   }

adLoader.loadAd(AdRequest.Builder().build() 를 사용하는 순간 광고를 요청하게됩니다.

그리고 광고를 수신하면 

 

unifiedNativeAd ->
populateUnifiedNativeAdView(unifiedNativeAd)

를 통하여 populateUnifiedNativeAdView메소드로 광고를 보내줍니다.

ㄴ>

(populateUnifiedNativeAdView = 받은 광고 정보를 아까 만든 레이아웃 요소에 맞게 뿌려주는 메소드(임의로 만들었습니다. 바로 적용하셔도됩니다.))

 

 

< populateUnifiedNativeAdView (받아온 광고 적용 예시) >

private fun populateUnifiedNativeAdView(
        nativeAd: UnifiedNativeAd){
        currentNativeAd?.destroy()
        currentNativeAd = nativeAd
 
        adsBinding.UnifiedNativeAdView.mediaView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_media)
 
        // Set other ad assets.
        adsBinding.UnifiedNativeAdView.headlineView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_headline)
        adsBinding.UnifiedNativeAdView.bodyView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_body)
        adsBinding.UnifiedNativeAdView.callToActionView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_call_to_action)
        adsBinding.UnifiedNativeAdView.iconView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_app_icon)
        adsBinding.UnifiedNativeAdView.priceView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_price)
        adsBinding.UnifiedNativeAdView.starRatingView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_stars)
        adsBinding.UnifiedNativeAdView.storeView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_store)
        adsBinding.UnifiedNativeAdView.advertiserView = adsBinding.UnifiedNativeAdView.findViewById(R.id.ad_advertiser)
 
 
        // The headline and media content are guaranteed to be in every UnifiedNativeAd.
        (adsBinding.UnifiedNativeAdView.headlineView as TextView).text = nativeAd.headline
        adsBinding.UnifiedNativeAdView.mediaView.setMediaContent(nativeAd.mediaContent)
 
        // These assets aren't guaranteed to be in every UnifiedNativeAd, so it's important to
        // check before trying to display them.
        if (nativeAd.body == null) {
            adsBinding.UnifiedNativeAdView.bodyView.visibility = View.INVISIBLE
        } else {
            adsBinding.UnifiedNativeAdView.bodyView.visibility = View.VISIBLE
            (adsBinding.UnifiedNativeAdView.bodyView as TextView).text = nativeAd.body
        }
 
        if (nativeAd.callToAction == null) {
            adsBinding.UnifiedNativeAdView.callToActionView.visibility = View.INVISIBLE
        } else {
            adsBinding.UnifiedNativeAdView.callToActionView.visibility = View.VISIBLE
            (adsBinding.UnifiedNativeAdView.callToActionView as Button).text = nativeAd.callToAction
        }
 
        if (nativeAd.icon == null) {
            adsBinding.UnifiedNativeAdView.iconView.visibility = View.GONE
        } else {
            (adsBinding.UnifiedNativeAdView.iconView as ImageView).setImageDrawable(
                nativeAd.icon.drawable)
            adsBinding.UnifiedNativeAdView.iconView.visibility = View.VISIBLE
        }
 
        if (nativeAd.price == null) {
            adsBinding.UnifiedNativeAdView.priceView.visibility = View.INVISIBLE
        } else {
            adsBinding.UnifiedNativeAdView.priceView.visibility = View.VISIBLE
            (adsBinding.UnifiedNativeAdView.priceView as TextView).text = nativeAd.price
        }
 
        if (nativeAd.store == null) {
            adsBinding.UnifiedNativeAdView.storeView.visibility = View.INVISIBLE
        } else {
            adsBinding.UnifiedNativeAdView.storeView.visibility = View.VISIBLE
            (adsBinding.UnifiedNativeAdView.storeView as TextView).text = nativeAd.store
        }
 
        if (nativeAd.starRating == null) {
            adsBinding.UnifiedNativeAdView.starRatingView.visibility = View.INVISIBLE
        } else {
            (adsBinding.UnifiedNativeAdView.starRatingView as RatingBar).rating = nativeAd.starRating!!.toFloat()
            adsBinding.UnifiedNativeAdView.starRatingView.visibility = View.VISIBLE
        }
 
        if (nativeAd.advertiser == null) {
            adsBinding.UnifiedNativeAdView.advertiserView.visibility = View.INVISIBLE
        } else {
            (adsBinding.UnifiedNativeAdView.advertiserView as TextView).text = nativeAd.advertiser
            adsBinding.UnifiedNativeAdView.advertiserView.visibility = View.VISIBLE
        }
 
        // This method tells the Google Mobile Ads SDK that you have finished populating your
        // native ad view with this native ad.
        adsBinding.UnifiedNativeAdView.setNativeAd(nativeAd)
 
        // Get the video controller for the ad. One will always be provided, even if the ad doesn't
        // have a video asset.
        val vc = nativeAd.videoController
        adsBinding.adsLoad.visibility = View.GONE
    }

 

 

요약 정리 

1. 광고 Manifests 추가 및 gradle 추가.

2. 광고 받아온 후 적용할 레이아웃 작성.

3. 광고 요청 및 받기

4. 받은 광고 레이아웃에 원하는 정보 골라서 뿌려주기. 

 

입니다.

 

위 코드를 적용하여 현재 스토어에서 운영되고있는 앱에 적용한 모습입니다.

앱 종료시 팝업 광고

카메라 촬영후 검색동안 뜨는 팝업 광고

전적 검색 RecyclerView에 중간중간 포함되는 광고

 

주의)

1. 광고 테스트하실때는 google 에서 제공하는 Test광고 ID 로 확인하셔야 합니다.

2. 실제 스토어에 업데이트할떄는 playstore App 설정에서 광고있음으로 선택하셔서 런칭하셔야 광고가 제대로 나옵니다.

 

 

Google Admob 네이티브 광고 가이드 : https://developers.google.com/admob/android/native/start?hl=ko

네이티브 광고  |  Android  |  Google Developers

Google Admob Test 광고 단위  ID : ca-app-pub-3940256099942544/2247696110