ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 애드핏 광고 등록
    사이드 프로젝트/이기적인 총무 2020. 11. 24. 14:25

    옛날에는 구글 애드센스로만 광고를 넣을 수 있었는데 요새는 Dable, Tenting 처럼 다양한 플랫폼에서도 블로그나 앱에 광고를 넣을 수 있게됐다. 그중 주변에 나랑 비슷하게 사이드 프로젝트를 진행중이신 분들이 카카오의 애드핏을 많이 추천하셔서 나도 내가 옛날에 열심히 만든 이기적인 총무애 애드핏으로 광고를 넣어봤다. 훌륭한 개발자가 많은 회사라 그런지(?) 넣는 과정은 어렵지 않고 깔끔했는데 이번 포스트에선 애드핏으로 Android 앱 광고를 넣는 방법을 소개해보려고 한다. 

     

    1. 애드핏 라이브러리 임포트 

     

    애드핏에선 안드로이드에 광고를 넣기 위한 별도의 라이브러리를 만들어줬다. 이 라인들을 추가해서 새로운 라이브러리를 임포트하자.

     

    // app 단위 build.gradle
    
    + implementation 'androidx.ads:ads-identifier:1.0.0-alpha04'
    + implementation "com.kakao.adfit:ads-base:3.5.2"
    
    
    // project 단위 build.gradle 
    
    allprojects {
        repositories {
            mavenCentral()
            jcenter()
            + maven { url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/' }

     

    2. 인터넷 및 보안 설정 

     

    AndroidManifest 파일 일부 수정이 필요하다. 아직 인터넷을 허용하지 않은 앱이라면 인터넷과 네트워크 상태 접근 권한을 추가하고 application 단에서는 networkSecurityConfig 파일을 설정해준다. 이 파일이 이미 있다면 아래 network-security-config 옵션을 추가하고 없으면 새롭게 만들어주면 된다. 경로는 아래 코드처럼 app 폴더 내에 넣어주면 된다.

     

    // app/src/main/AndroidManifest.xml
    
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
         package="com.cholab.kwony.jochongmu">
     
    +    <uses-permission android:name="android.permission.INTERNET" />
    +    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    +
         <application
             android:name=".JochongmuApp"
             android:allowBackup="true"
             android:icon="@drawable/app_icon"
             android:label="@string/app_name"
             android:supportsRtl="true"
    +        android:networkSecurityConfig="@xml/network_security_config"
             android:theme="@style/AppTheme">
    
    
    // app/src/main/res/xml/network_security_config.xml 
    
    <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
        <base-config cleartextTrafficPermitted="true" />
    </network-security-config>
    

     

    3. Ad UI 뷰 추가

     

    광고를 추가하고 싶은 부분에 BannerAdView UI component를 추가한다. 아까 임포트한 라이브러리에서 구현한 클래스다. 여기서 주의할게 있는데 애드핏의 대시보드에서 설정한 크기보다 크기가 작으면 집계가 안된다고 한다. 이기적인 총무에서는 width를 꽉채우고 height 값을 320:50 의 비율에 맞춰서 조정하게 해서 광고의 크기를 맞췄다.

     

    <com.kakao.adfit.ads.ba.BannerAdView
        android:id="@+id/fr_party_ad"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="320:50"
        app:layout_constraintBottom_toBottomOf="parent"/>

     

    4. 광고 호출 

     

    BannerAdView 까지 넣었으면 이제 실제로 광고를 호출하면 된다. fragment 또는 activity 단에서 광고를 호출하면 된다. 아래 코드를 보면 setCliendId로 대시보드에서 설정한 광고 id를 넣고 loadAd()를 호출하면 된다. setAdListener를 통해서 광고 호출 후의 작업에 리스너를 등록할 수 있는데 이건 옵션기능이다. 

     

    fr_party_ad.run {
        setClientId("광고단위id")
        setAdListener(object: AdListener {
            override fun onAdLoaded() {
                JoLog.d("ad loaded")
            }
    
            override fun onAdFailed(p0: Int) {
                JoLog.d("failed to upload")
            }
    
            override fun onAdClicked() { }
        })
        loadAd()
    }

    광고단위는 대쉬보드에서 아래 그림의 빨간색에 있는 값이다. 알파벳과 숫자로 섞여있는 난해한 키 값처럼 생겼다.

    광고단위 ID. 타인에게 노출하면 안된다.

    5. 생성주기 별로 리스너 등록 

     

    왠지는 모르겠으나 안드로이드 생성 주기별로 콜백을 불러줘야한다고 한다. 안그러면 안된다고 한다.

     

    override fun onPause() {
        super.onPause()
        fr_main_ad?.pause()
    }
    
    override fun onResume() {
        super.onResume()
        fr_main_ad?.resume()
    }
    
    override fun onDestroy() {
        super.onDestroy()
        fr_main_ad?.destroy()
    }

     

    6. 완성 

     

    문제 없이 끝내면 아래 그림처럼 광고를 호출하게 된다. 구현하고 승인 전까지는 카카오 비즈니스 광고가 뜨는데 승인 후에는 카카오 애드핏에서 알아서 광고를 내려준다. 몇 일 전까지는 무신사 광고만 나왔었는데 오늘은 스푼라디오 광고가 나오고 있다. 어떤 메커니즘인지 궁금해지네.

     

    7. 적용후

     

    수입은 얼마 안나오지만(지금까지 편의점 캔커피 만큼도 벌지 못했다) 광고를 넣으니 책임감이 더 막중해진 느낌이다. UX도 개선하고 싶고 사소한 버그들도 어서 고치고 아이콘들도 더 이쁘게 바꿔보고 싶고 ios 버전도 만들어서 다른 유저들한테도 홍보하고 싶다. 역시 돈이 걸려있다면 사람의 마음 가짐이 달라지는걸까? ㅋㅋ

    댓글

Designed by Tistory.