Compose에서 Google AdMob 광고 띄우기

광고를 붙여 앱을 한 번 출시해보고 싶다는 생각이 들어 Compose로 된 아주아주 간단한 앱에 광고를 붙여보려고 한다.
여기선 banner 광고를 붙이는 과정을 정리했다.

Manifest 설정

adMob으로 앱에 넣을 광고를 만들면 앱 ID와 SDK ID 값을 준다.
Manifest엔 앱 ID를 넣어주면 된다.
application 태그 안에

<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="앱 ID" />

를 넣어준다.

adMob 초기화

MainActivity의 onCreate에 아래의 코드를 넣어 초기화해준다.

MobileAds.initialize(this)

banner 생성

@Composable
fun HomeScreen(onClicked: (Int) -> Unit) {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text(text = "Record My Location") })
        }
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
            ) {
                Row(
                    modifier = Modifier.weight(1f),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Card(
                        modifier = Modifier
                            .padding(8.dp)
                            .weight(1f)
                            .height(100.dp)
                            .clickable { onClicked(1) },
                    ) {
                        Box(
                            contentAlignment = Alignment.Center,
                            modifier = Modifier.fillMaxSize()
                        ) {
                            Text(text = "View Location on Map", textAlign = TextAlign.Center)
                        }
                    }
                    Card(
                        modifier = Modifier
                            .padding(8.dp)
                            .weight(1f)
                            .height(100.dp)
                            .clickable { onClicked(2) }
                    ) {
                        Box(
                            contentAlignment = Alignment.Center,
                            modifier = Modifier.fillMaxSize()
                        ) {
                            Text(text = "Record the current location", textAlign = TextAlign.Center)
                        }
                    }
                }
            }
        }
    }
}

간단한 버튼이 두 개 있는 화면 하단에 배너를 배치할 생각이다.

아쉽게도 adMob은 아직 Compose를 지원하는 컴포저블 함수가 없기 때문에 xml 방식의 View를 컴포저블 함수에서 사용해야 하는 상황이다. 구글 문서 참고

AndroidView 컴포저블을 사용하면 된다.

@Composable
fun BannersAds() {
    AndroidView(
    	modifier = Modifier.fillMaxWidth(),
        factory = { context ->
            AdView(context).apply {
                setAdSize(AdSize.BANNER)
                adUnitId = "ca-app-pub-3940256099942544/6300978111"
                loadAd(AdRequest.Builder().build())
            }
        },
        update = { adView ->
            adView.loadAd(AdRequest.Builder().build())
        }
    )
}

여기서 factory는 최초 한 번 실행되는 부분을 정의한다.
update는 리컴포지션이 일어날 때 실행되는 부분이다.
따라서 factory에 배너에 대한 정의를 해주고 update에선 배너를 다시 뷰에 추가해주는 작업만 하고 있다.

또!!! 굉장히 중요한 부분이 있는데!!!
바로 adUnitId에 들어가는 ID이다.
Manifest엔 adMob에서 발급받은 app ID를 넣어야하지만 배너에 사용하는 아이디는 반드시 sample ID에서 본인이 띄울 광고 유형에 맞는 id를 넣어줘야 한다.
직접 경험한 건 아니고 책에서 읽은 거지만, 스토어에 배포하는 앱이 아닌 테스트용으로 빌드한 앱에 adMob에 발급받은 ID를 넣으면 문제가 생길 수 있고 심한 경우 계정이 지워진다는 글을 봤다...
나중에 스토어에 올릴 경우에 adUnitId = "ca-app-pub-3940256099942544/6300978111"에 adMob에서 발급받은 id 값으로 수정해서 배포하면 될 것 같다.

결과