안드로이드 앱에 쿠팡 파트너스 배너 노출하기

안드로이드 앱에 쿠팡 파트너스 배너 노출하기

이번 글은 안드로이드 앱에 쿠팡 파트너스 배너를 노출하는 방식에 대한 내용입니다.

공개형 블로그에 노출하는 방법은 많이 공개되어 있지만, 앱에 노출하는 방식에 대해서는 내용이 많이 없네요.

이 내용도 쿠팡 파트너스 페이지의 도움말을 통해 구현하였습니다.

코틀린 기반으로 설명 드리며, 자바로의 구현 부분은 쿠팡 도움말 페이지를 참고하시면 될 것 같습니다.

 

 

1. 레이아웃 준비

간단하게 activity_main.xml에 webview를 추가합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

2. MainActivity.kt

webview의 자바스크립트를 enable 해주시고,

loadUrl() 메소드말고 loadData() 메소드를 통해 직접 javascript 를 삽입합니다.

배너 클릭 시 이동을 위해 shouldOverrideUrlLoading 메소드를 override 해 줍니다.

html 변수의 div 태그는 배너 출력을 위해서는 반드시 필요합니다.

 

자바스크립트의 width를 100%로 지정해 주셔야 화면을 꽉 채워서 배너가 표시됩니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.apply {
            javaScriptEnabled = true
        }

        webView.webViewClient = object: WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView?, url: String): Boolean {
                val intent = Intent(Intent.ACTION_VIEW)
                intent.data = Uri.parse(url)
                intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_SINGLE_TOP
                startActivity(intent)
                return true
            }
        }

        val html = "<div>" +
                "<script src=\"https://ads-partners.coupang.com/g.js\"></script>" +
                "<script>new PartnersCoupang.G({\"id\":335219,\"subId\":null,\"width\":'100%'})" +
                "</script>" +
                "</div>"
        webView.loadData(html, "text/html", "UTF8")
    }
}

실행해 보시면 아래와 같이 쿠팡 배너가 성공적으로 출력되는 것을 보실 수 있습니다.

쿠팡 배너 출력 짠~~

 

저는 제 앱의 종료 팝업에 배너를 노출시켰고, 관심사 기반을 구현하기 위해서 추가적으로 광고ID(adid)를 추출하여 노출하였습니다.

이를 위해서는 아래와 같은 절차로 진행하시면 됩니다.

 

1. 쿠팡 배너 출력용 레이아웃 파일 생성(layout/dialog_coupang.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        />

</LinearLayout>

2. 배너 로딩(MainActivity.kt)

 1) onCreate()에서 layoutInflater를 통해 레이아웃 파일을 불러온 후

 2) 쿠팡 배너를 로딩하고, 백버튼 클릭 시 AlertDialog에서 로딩된 배너를 노출합니다.

 3) adid 추출을 위해서는 coroutine을 사용하여 adid를 추출하고, 추출된 adid를 html로 전달합니다.

    코드가 좀 복잡해 보이는게, adid 추출은 비동기적으로 실행되어야 하기 때문입니다.

class MainActivity : AppCompatActivity() {
    private val TAG = "MainActivity"
    private lateinit var quitView: View

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        quitView = layoutInflater.inflate(R.layout.dialog_coupang, null)
        loadCoupangBanner()
    }

    private fun loadCoupangBanner() {
        val webView = quitView.findViewById<WebView>(R.id.webView)
        webView.settings.apply {
            javaScriptEnabled = true
        }

        webView.webViewClient = object: WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView?, url: String): Boolean {
                val intent = Intent(Intent.ACTION_VIEW)
                intent.data = Uri.parse(url)
                intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_SINGLE_TOP
                startActivity(intent)
                return true
            }
        }

        GlobalScope.launch(Dispatchers.IO) {
            val adid = AdvertisingIdClient.getAdvertisingIdInfo(this@MainActivity).id
            withContext(Dispatchers.Main) {
                val html = "<div>" +
                        "<script src='https://ads-partners.coupang.com/g.js'></script>" +
                        "<script>" +
                        "new PartnersCoupang.G(" +
                        "{'id':336682," +
                        "'subId':'imheroApp'," +
                        "'width':'100%'," +
                        "'height':300," +
                        "'deviceId':'${adid}'" +
                        "})</script>" +
                        "</div>"
                Log.d(TAG, html)
                webView.loadData(html, "text/html", "UTF-8")
            }
        }
    }

    override fun onBackPressed() {
        if (quitView.parent != null) {
            val viewGroup = quitView.parent as ViewGroup
            viewGroup.removeView(quitView)
        }

        val builder = AlertDialog.Builder(this)
        builder
            .setView(quitView)
            .setMessage("앱을 종료하시겠습니까?")
            .setPositiveButton("종료") { p0, p1 ->
                finish()
            }
            .setNegativeButton("리뷰 부탁드려요!") { p0, p1 ->
                val viewGroup = quitView.parent as ViewGroup
                viewGroup.removeView(quitView)
                MyUtils.goToStore()
            }
        builder.create().show()
    }

}

앱에서 백버튼을 누르면 아래와 같이 쿠팡 배너가 출력되는 것을 보실 수 있습니다.

실제 동작되는 화면이 궁금하시면 앱을 다운로드 받아 주세요.(네ㅠㅠ 다운로드 수가 너무 적어서요.. ㅠㅠ)

play.google.com/store/apps/details?id=com.cocolab.imhero