- 모바일 앱 수익화를 위한 구글의 광고 플랫폼입니다. 개발자들이 자신의 앱에 광고를 게재하고 수익을 창출할 수 있도록 도와주는 서비스입니다.
특징
설명
다양한 광고 형식
배너, 전면, 리워드 광고 등 여러 형태 지원
높은 성과
우수한 광고 채우기율(Fill Rate)과 수익률(eCPM) 제공
분석 도구
상세한 분석 도구와 리포트를 통한 성과 모니터링
글로벌 네트워크
전 세계적인 광고주 네트워크 보유
간편한 사용
손쉬운 구현과 관리 가능
1. 광고 유형
광고 유형
설명
배너
앱 레이아웃의 일부를 차지하는 직사각형 광고가 게재됩니다. 이 광고는 일정 기간 후 자동으로 새로고침됩니다. 즉 사용자가 앱에서 같은 화면에 머물러 있어도 정기적으로 새 광고가 게재됩니다. 또한 가장 구현하기 간단한 광고 형식이기도 합니다.
전면
앱에서 페이지 전체를 채우는 광고입니다. 게임 앱의 레벨 완료 후와 같이 앱 인터페이스에서 자연스럽게 멈추거나 전환하는 시점에 전면 광고를 게재하세요.
보상형 전면 광고(베타)
자연스러운 앱 전환 시 자동으로 게재되는 광고를 통해 코인이나 추가 생명 아이템 등의 리워드를 제공할 수 있는 새로운 보상형 광고 형식입니다. 보상형 광고와 달리 사용자는 수신 동의하지 않고도 보상형 전면 광고를 볼 수 있습니다. 보상형 전면 광고에는 보상형 광고에 표시되는 수신 동의 메시지 대신 리워드를 공지하고 사용자가 원할 경우 수신 해제할 수 있는 시작 화면이 필요합니다.
리워드
사용자가 게임을 하거나 설문조사에 참여하거나 동영상을 시청하면 코인, 추가 생명, 포인트와 같은 인앱 리워드를 제공합니다. 광고 단위별로 보상을 다르게 설정할 수 있고 사용자가 받게 될 보상 가치와 항목을 지정할 수 있습니다.
네이티브 고급
광고 제목, 클릭 유도 문구와 같은 애셋이 앱에 표시되는 방식을 맞춤설정할 수 있는 광고입니다. 광고에 직접 스타일을 지정하여 사용자 환경을 더욱 풍부하게 만드는 자연스럽고 방해가 되지 않는 광고를 표시할 수 있습니다.
앱 열기
사용자가 앱을 열거나 앱으로 다시 전환할 때 표시되는 광고 형식입니다. 광고가 로드 화면을 오버레이합니다.
- 앱 레이아웃의 일부를 차지하는 직사각형 광고가 게재됩니다. 이 광고는 일정 기간 후 자동으로 새로고침됩니다. - 즉 사용자가 앱에서 같은 화면에 머물러 있어도 정기적으로 새 광고가 게재됩니다. 또한 가장 구현하기 간단한 광고 형식이기도 합니다.
특징
설명
크기 옵션
BANNER, LARGE_BANNER, MEDIUM_RECTANGLE 등 다양한 크기 제공
자동 새로고침
다양한 광고가 자동으로 노출되는 기능
반응형 레이아웃
화면 크기에 따라 자동으로 조절되는 레이아웃 지원
구현 및 유지보수
간단한 구현과 쉬운 유지보수 가능
1. 배너 광고 코드
💡 배너 광고 코드 - 플랫폼별 광고 ID 설정: iOS와 Android 각각에 대해 개발 환경(DEV)에서는 테스트 ID를, 프로덕션 환경에서는 실제 광고 ID를 사용합니다. - iOS 백그라운드 처리: iOS에서 앱이 백그라운드 상태에서 돌아올 때 발생할 수 있는 광고 표시 문제를 해결하기 위해 useForeground 훅을 사용하여 자동으로 새로운 광고를 로드합니다. - 배너 광고 표시: View 컴포넌트 내에서 BannerAd를 중앙 정렬하고, 하단에 20의 마진을 주어 배치합니다.
import React, { useRef } from "react";
import { Platform, View } from "react-native";
import {
BannerAd,
BannerAdSize,
TestIds,
useForeground,
} from "react-native-google-mobile-ads";
import { GOOGLE_ADMOV_ANDROID_BANNER, GOOGLE_ADMOV_IOS_BANNER } from "@env";
type AdUnitIdType = string;
const AD_UNIT_ID: AdUnitIdType = Platform.select({
ios: __DEV__ ? TestIds.BANNER : GOOGLE_ADMOV_IOS_BANNER!,
android: __DEV__ ? TestIds.BANNER : GOOGLE_ADMOV_ANDROID_BANNER!,
}) as AdUnitIdType;
/**
* [공통] 배너 광고
* @returns
*/
const AdmobBannerAd: React.FC = () => {
const bannerRef = useRef<BannerAd | null>(null);
/**
* 플랫폼 iOS에 대해서만 이를 적용합니다.
* - 앱이 "suspended state"(백그라운드 상태)에 있을 때 WKWebView가 종료될 수 있음
* - 이로 인해 앱이 포그라운드로 돌아올 때 배너 광고가 비어있을 수 있음
* - 이 문제를 해결하기 위해 앱이 포그라운드로 돌아올 때 수동으로 새로운 광고를 요청하는 것이 권장됨
*/
useForeground(() => {
if (Platform.OS === "ios") {
bannerRef.current?.load();
}
});
return (
<View style={{ alignItems: "center", marginBottom: 20 }}>
<BannerAd
ref={bannerRef}
unitId={AD_UNIT_ID}
size={BannerAdSize.BANNER}
/>
</View>
);
};
export default AdmobBannerAd;
2. 결과 화면
💡 결과 화면
- 아래와 같이 배너 광고가 출력됨을 확인하였습니다.
3) 구글 애드몹(Google Admob) 광고 종류 : 전면 광고
💡 구글 애드몹(Google Admob) 광고 종류 : 전면 광고
- 앱에서 페이지 전체를 채우는 광고입니다. 게임 앱의 레벨 완료 후와 같이 앱 인터페이스에서 자연스럽게 멈추거나 전환하는 시점에 전면 광고를 게재하세요.
특징
설명
화면 크기
전체 화면을 차지하는 광고 형식
표시 시점
자연스러운 앱 전환 시점에 표시
사용자 경험
적절한 타이밍에 표시하여 사용자 경험 최적화
수익성
배너 광고보다 높은 수익 창출 가능
1. 전면 광고 코드
💡 전면 광고 코드
- 플랫폼별 광고 ID 설정: 개발 환경에서는 TestIds를, 프로덕션 환경에서는 실제 광고 ID를 플랫폼(iOS/Android)에 따라 다르게 설정합니다. - 광고 인스턴스 생성: useEffect 내에서 InterstitialAd.createForAdRequest()를 사용하여 전면 광고 인스턴스를 생성합니다. - 이벤트 리스너 설정: 광고가 로드되면 자동으로 show() 함수를 호출하여 광고를 표시 - 메모리 관리: 컴포넌트가 언마운트될 때 이벤트 리스너를 정리하여 메모리 누수를 방지합니다.
import React, { useEffect, useState } from "react";
import { Platform } from "react-native";
import {
InterstitialAd,
TestIds,
AdEventType,
} from "react-native-google-mobile-ads";
import { GOOGLE_ADMOV_ANDROID_FRONT, GOOGLE_ADMOV_IOS_FRONT } from "@env";
type AdUnitIdType = string;
const AD_UNIT_ID: AdUnitIdType = Platform.select({
ios: __DEV__ ? TestIds.INTERSTITIAL : GOOGLE_ADMOV_ANDROID_FRONT!,
android: __DEV__ ? TestIds.INTERSTITIAL : GOOGLE_ADMOV_IOS_FRONT!,
}) as AdUnitIdType;
/**
* [공통] 전면 광고
* @returns
*/
const AdmobFrontAd: React.FC = () => {
const [interstitialAd, setInterstitialAd] = useState<InterstitialAd | null>(
null
);
useEffect(() => {
// 전면 광고 인스턴스 생성
const newInterstitial = InterstitialAd.createForAdRequest(AD_UNIT_ID, {
keywords: ["fashion", "clothing"],
});
// 광고 로드 이벤트 리스너
const unsubscribeLoaded = newInterstitial.addAdEventListener(
AdEventType.LOADED,
() => {
newInterstitial.show();
}
);
// 광고 에러 이벤트 리스너
const unsubscribeError = newInterstitial.addAdEventListener(
AdEventType.ERROR,
(error) => {
console.error("Interstitial ad error:", error);
}
);
// 광고 로드 시작
newInterstitial.load();
setInterstitialAd(newInterstitial);
// Clean up
return () => {
unsubscribeLoaded();
unsubscribeError();
};
}, []);
return null;
};
export default AdmobFrontAd;
2. 결과 화면
💡 결과 화면
- 아래와 같이 전면 광고가 출력됨을 확인하였습니다.
4) 구글 애드몹(Google Admob) 광고 종류 : 보상형 전면 광고
💡 구글 애드몹(Google Admob) 광고 종류 : 보상형 전면 광고
- 전면 광고와 보상형 광고의 특성을 결합한 광고 형식입니다. - 사용자가 광고를 시청하면 보상을 받을 수 있으며, 광고는 전체 화면을 차지합니다.
특징
설명
광고 형태
전체 화면을 차지하는 동영상 또는 인터랙티브 광고
보상 시스템
광고 시청 완료 시 사용자에게 인앱 보상 제공
사용자 참여
자발적인 참여를 유도하여 긍정적인 사용자 경험 제공
수익성
일반 전면 광고보다 높은 수익률 기대 가능
적용 사례
게임 내 아이템 획득, 추가 콘텐츠 잠금 해제 등
1. 보상형 전면 광고 코드
💡 보상형 전면 광고 코드 - 이 광고 형식은 일반 전면 광고보다 높은 수익률을 기대할 수 있으며, 주로 게임 내 아이템 획득이나 추가 콘텐츠 잠금 해제 등에 활용됩니다.
- 광고 ID 설정: 개발 환경에서는 TestIds를, 프로덕션 환경에서는 실제 광고 ID를 iOS/Android 플랫폼에 따라 다르게 설정합니다. - 광고 인스턴스 생성: RewardedInterstitialAd.createForAdRequest()를 사용하여 보상형 전면 광고 인스턴스를 생성합니다. - 이벤트 처리 : 광고 로드 완료 시 loaded 상태를 true로 변경, 상 지급 시 콘솔에 로그 출력 - 상태 관리: loaded 상태를 통해 광고가 로드되었는지 추적합니다.
- 네이티브 광고는 앱의 디자인과 자연스럽게 어우러지는 광고 형식입니다. - 광고가 앱의 기본 UI 요소처럼 보이도록 사용자 지정이 가능합니다.
특징
설명
맞춤형 디자인
앱의 디자인과 일치하도록 광고 스타일 조정 가능
통합성
앱의 콘텐츠와 자연스럽게 어우러짐
사용자 경험
기존 UI/UX를 해치지 않는 광고 표시
다양한 형식
이미지, 동영상, 텍스트 등 여러 형태 지원
성과
자연스러운 광고로 인한 높은 참여율
1. 네이티브 광고 코드
💡 네이티브 광고 코드 - 앱의 디자인과 자연스럽게 어우러지도록 설계되었으며, 이미지, 동영상, 텍스트 등 다양한 형태를 지원합니다. - 광고 ID 설정: 개발 환경(DEV)에서는 TestIds를 사용하고, 프로덕션 환경에서는 실제 iOS/Android 플랫폼별 광고 ID를 사용합니다. - NativeAdView를 사용하여 광고 컨테이너를 생성 - 아이콘, 헤드라인, 미디어 뷰 등 다양한 광고 에셋을 표시 - 각 에셋은 NativeAsset 컴포넌트로 래핑되어 관리상태 관리: useState를 사용하여 nativeAd 상태를 관리하고, useEffect를 통해 광고를 로드합니다.
import React, { useEffect, useState } from "react";
import { Image, Platform, Text } from "react-native";
import {
NativeAd,
TestIds,
AdEventType,
NativeAdView,
NativeAsset,
NativeAssetType,
NativeMediaView,
} from "react-native-google-mobile-ads";
import {
GOOGLE_ADMOV_ANDROID_NATIVE_ADVANCED,
GOOGLE_ADMOV_IOS_NATIVE_ADVANCED,
} from "@env";
type AdUnitIdType = string;
const AD_UNIT_ID: AdUnitIdType = Platform.select({
ios: __DEV__ ? TestIds.NATIVE : GOOGLE_ADMOV_IOS_NATIVE_ADVANCED!,
android: __DEV__ ? TestIds.NATIVE : GOOGLE_ADMOV_ANDROID_NATIVE_ADVANCED!,
}) as AdUnitIdType;
/**
* [공통] 네이티브 고급 광고
* @returns
*/
const AdmobNativeAd: React.FC = () => {
const [nativeAd, setNativeAd] = useState<NativeAd>();
useEffect(() => {
NativeAd.createForAdRequest(AD_UNIT_ID)
.then(setNativeAd)
.catch(console.error);
}, []);
if (!nativeAd) {
return null;
}
return (
// Wrap all the ad assets in the NativeAdView component, and register the view with the nativeAd prop
<NativeAdView nativeAd={nativeAd}>
// Display the icon asset with Image component, and use NativeAsset to
register the view
{nativeAd.icon && (
<NativeAsset assetType={NativeAssetType.ICON}>
<Image source={{ uri: nativeAd.icon.url }} width={24} height={24} />
</NativeAsset>
)}
// Display the headline asset with Text component, and use NativeAsset to
register the view
<NativeAsset assetType={NativeAssetType.HEADLINE}>
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
{nativeAd.headline}
</Text>
</NativeAsset>
// Always display an ad attribution to denote that the view is an
advertisement
<Text>Sponsored</Text>
// Display the media asset
<NativeMediaView />
// Repeat the process for the other assets in the NativeAd.
</NativeAdView>
);
};
export default AdmobNativeAd;
2. 결과 화면
💡 결과 화면
- 아래와 같이 네이티브 광고가 출력이 됨을 확인하였습니다.
6) 구글 애드몹(Google Admob) 광고 종류 : 앱 열기
💡 구글 애드몹(Google Admob) 광고 종류 : 앱 열기
- 앱 열기 광고는 애플리케이션이 시작될 때 표시되는 광고 형식입니다. - 사용자가 앱을 실행할 때 보게 되는 첫 번째 광고이며, 효과적인 수익화 방법 중 하나입니다.
특징
설명
표시 시점
앱 실행 시 처음 보여지는 광고
광고 형태
전면 광고 형식으로 표시됨
로딩 시간
앱 시작 시 미리 로드되어 대기 시간 최소화
사용자 경험
앱 실행 초기에 한 번만 표시되어 사용성 저해 최소화
수익성
높은 노출도로 인한 효과적인 수익 창출 가능
1. 앱 열기 광고 코드
💡 앱 열기 광고 코드 - 광고 ID 설정: 개발 환경(DEV)에서는 TestIds를, 프로덕션 환경에서는 실제 iOS/Android 플랫폼별 광고 ID를 사용합니다. - 광고 인스턴스 생성: AppOpenAd.createForAdRequest()를 사용하여 광고 인스턴스를 생성하고, 키워드를 설정할 수 있습니다. - 이벤트 처리: 광고가 로드되면 자동으로 show() 메서드를 호출하여 표시합니다. 에러 발생 시 콘솔에 에러 메시지를 출력합니다.
import React, { useEffect, useState } from "react";
import { Platform } from "react-native";
import {
AppOpenAd,
TestIds,
AdEventType,
} from "react-native-google-mobile-ads";
import { GOOGLE_ADMOV_IOS_OPEN_APP, GOOGLE_ADMOV_ANDROID_OPEN_APP } from "@env";
type AdUnitIdType = string;
const AD_UNIT_ID: AdUnitIdType = Platform.select({
ios: __DEV__ ? TestIds.APP_OPEN : GOOGLE_ADMOV_IOS_OPEN_APP!,
android: __DEV__ ? TestIds.APP_OPEN : GOOGLE_ADMOV_ANDROID_OPEN_APP!,
}) as AdUnitIdType;
/**
* [공통] 앱 열기 광고
* @returns
*/
const AdmobAppOpenAd: React.FC = () => {
const [appOpenAd, setAppOpenAd] = useState<AppOpenAd | null>(null);
useEffect(() => {
// 앱 열기 광고 인스턴스 생성
const newAppOpen = AppOpenAd.createForAdRequest(AD_UNIT_ID, {
keywords: ["fashion", "clothing"],
});
// 광고 로드 이벤트 리스너
const unsubscribeLoaded = newAppOpen.addAdEventListener(
AdEventType.LOADED,
() => {
newAppOpen.show();
}
);
// 광고 에러 이벤트 리스너
const unsubscribeError = newAppOpen.addAdEventListener(
AdEventType.ERROR,
(error) => {
console.error("App open ad error:", error);
}
);
// 광고 로드 시작
newAppOpen.load();
setAppOpenAd(newAppOpen);
// Clean up
return () => {
unsubscribeLoaded();
unsubscribeError();
};
}, []);
return null;
};
export default AdmobAppOpenAd;
