[플러터, 애드몹] 네이티브 광고로 mx 플레이어와 같은 광고 구현하기- 1탄- 애드몹 기본설정하기
애드몹(admob)에는 규격화된 광고 형태인 배너광고, 전면광고, 앱오닝광고, 리워드 광고가 있습니다. 하지만 앱의 UI와 잘 어울릴 수도 있지만 아직 규격화 되어 있어 어울리지 않을 수도 있고 커스텀이 되지 않습니다. 앱의 UI와 유사하게 하여 앱와 광고가 잘 어울리게 하기 위해서는 네이티브 광고(native ads)를 사용하면 됩니다.
하지만 네이티브 광고는 커스텀하게 광고를 보여 주기 위해서는 플러터(dart)문법 보다는 코틀린 또는 자바, 그리고 UI를 구현하기 위한 지식이 필요합니다. 저는 플러터로 앱개발을 시작했기 때문에 해당 부분에 대한 지식을 깊게는 모르지만 공식 홈페이지 예제를 보면서 공부한 내용을 바탕으로 아래와 같이 mx 플레이어에 나온 큰화면의 광고를 구현해보도록 하겠습니다.
구현 순서
1. 기본설정: 패키지 설치, 광고아이디 설정, 앱 아이디 설정, main함수에서 초기화
2. 레이아웃 구현
3. factory 구현
4. main activity 구현
5. 플러터로 네이티브 광고 구현
기본 설정
네이티브 광고든 일반 배너광고든 일단 애드몹(admob) 광고를 앱에 구현하기 위해서는 몇가지 기본 설정이 필요합니다.
패키지 설치
pubspec.yaml에 아래 패키지를 추가하고 pub get을 합니다.
dependencies:
google_mobile_ads: ^4.0.0admob 앱 ID 설정
앱 ID를 설정해야 애드몹 광고를 사용할 수 있습니다. 그리고 AndroidManifest.xml에 admob 앱 ID를 아래와 같이 입력하면 됩니다. ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy 이 부분에 자신의 앱 ID를 입력하시면 되고 앱 ID는 애드몹 계정을 만드시면 얻을 수 있습니다.
<manifest>
<application>
<!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
<application>
<manifest>모바일 광고 SDK 초기화
main.dart의 main 함수에서 SDK를 초기화하는 코드를 실행해야 합니다. 아래는 공식 문서의 설명을 인용하였습니다.
광고를 로드하기 전에 SDK를 초기화하고 초기화가 완료되거나 30초의 제한 시간이 지나면 완료되는 Future를 반환하는 MobileAds.instance.initialize()를 호출하여 앱에서 모바일 광고 SDK를 초기화하도록 합니다. 이 작업은 앱을 실행하기 직전에 한 번만 처리하면 됩니다.
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(MyApp());
}
네이티브 광고 아이디 설정
네이티브 광고 아이디는 Map 형식을 이용해서 디버그 모드와 릴리스 모드에 따라 광고 유니트 아이디(AD UNIT ID)가 변경되게 합니다. 릴리스 모드에는 직접 만드신 네이티브광고의 ID를 입력하시면 되고 디버그모드는 애드몹에서 만들어준 테스트 아이디이므로 그냥 쓰셔도 됩니다.
const Map<String, String> NATIVE_ID = kReleaseMode
? {
릴리스 모드
'ios': '[YOUR iOS AD UNIT ID]',
'android': 'ca-app-pub-xxxxxxxxxxxxxxxxx/xxxxxxxxx',
}
디버그모드
: {
'ios': 'ca-app-pub-3940256099942544/3986624511',
'android': 'ca-app-pub-3940256099942544/2247696110',
};
여기까지 어떤 애드몹을 사용하시던 무조건 해야되는 기본 설정입니다.
setting.gradle 설정
setting.gradle에 아래와 같은 코드를 추가합니다. 사실 공식문서에 추가하라고 되어 있는 그냥 어떤 의미인지 모르고 추가만 했습니다. 아래는 공식 문서의 설명입니다.
Android에서 Google 모바일 광고 플러그인을 구현하려면
NativeAdFactory API를 구현하는 클래스가 필요합니다. Android 프로젝트에서 이 API를 참조하려면 settings.gradle에 다음 줄을 추가합니다.
setting.gradle 추가 코드
def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
pluginsFile.withInputStream { stream -> plugins.load(stream) }
}
plugins.each { name, path ->
def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
include ":$name"
project(":$name").projectDir = pluginDirectory
}
여기까지 기본 설정입니다. 다음은 네이티브 광고 UI를 구현하는 방법을 정리해 보겠습니다.
댓글