네이티브 광고로 mx 플레이어와 같은 홍보 구현하기 1탄 애드몹 기본설정하기

네이티브 광고로 mx 플레이어와 같은 홍보 구현하기 1탄 애드몹 기본설정하기

애드몹admob에는 정형화된 광고 형태인 배너광고, 전면광고, 앱오닝광고, 리워드 광고가 있습니다. 하지만 앱의 UI와 잘 어울릴 수도 있지만 아직 규격화 되어 있어 어울리지 않을 수도 있고 커스텀이 되지 않습니다. 앱의 UI와 유사하게 하여 앱와 광고가 잘 맞게 하기 위해서는 네이티브 광고native ads를 사용하면 됩니다. 하지만 네이티브 광고는 커스텀하게 광고를 보여 주기 위해서는 플러터dart문법 보다는 코틀린 혹은 자바, 그리고 UI를 구현하기 위한 지식이 필요합니다.

저는 플러터로 앱개발을 시작했기 때문에 해당 부분에 대한 지식을 깊게는 모르지만 공식 홈페이지 예제를 보면서 공부한 내용을 바탕으로 아래와 같이 mx 플레이어에 나온 큰화면의 광고를 구현해보도록 하겠습니다.

패키지 설치

ubspec.yaml에 아래 패키지를 추가하고 pub get을 합니다. dependencies googlemobileads 4.0.0admob 앱 ID 설정

앱 ID를 설정해야 애드몹 광고를 사용할 수 있습니다. 그리고 AndroidManifest.xml에 admob 앱 ID를 아래와 같이 입력하면 됩니다. caapppubxxxxxxxxxxxxxxxxyyyyyyyyyy 이 부분에 자신의 앱 ID를 입력하시면 되고 앱 ID는 애드몹 계정을 만드시면 얻을 수 있습니다.

FrameLayout

이것은 플러터의 stack 위젯과 같습니다. 아래로 오는것 일 수록 맨 위에 오게 되어 아래 코드의 왼쪽 위에 Ad 글자를 표시할때 사용 했습니다.

com.googlandroigms.ads.nativeaMediaView

가운데 미디어를 보여주기 위한 부분입니다. 200dp를 사용하면 딱 맞는거 같습니다. 여기에서 dp는 플러터의 width나 height의 크기와 제대로 일치하는 것을 확인했습니다.

setting.gradle 설정

setting.gradle에 아래와 같은 코드를 추가합니다. 사실 공식문서에 추가하라고 되어 있는 그냥 어떤 의미인지 모르고 추가만 했습니다. 아래는 공식 문서의 설명입니다.

Android에서 Google 모바일 광고 플러그인을 구현하려면 NativeAdFactory API를 구현하는 클래스가 필요합니다. Android 프로젝트에서 이 API를 참조하려면 settings.gradle에 다음 줄을 추가합니다.

setting.gradle 추가 코드 여기까지 기초 설정입니다. 다음은 네이티브 광고 UI를 구현하는 방법을 정리해 보겠습니다.

자주 묻는 질문