Flutter 네이티브 광고
1
2
3
네이티브 광고 구현
Widget nativeAdView(BuildContext context) {
if (!isLoaded) return Container();
return Container(
margin: const EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),
width: MediaQuery.of(context).size.width,
child: AdropNativeAdView(
ad: nativeAd,
child: Container(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.network(
nativeAd?.properties.profile?.displayLogo ?? '',
width: 24,
height: 24,
),
const SizedBox(
width: 4,
),
Text(
nativeAd?.properties.profile?.displayName ?? '',
)
],
),
const SizedBox(
height: 8,
),
if (nativeAd?.properties.headline != null)
Text(
nativeAd?.properties.headline ?? '',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
if (nativeAd?.properties.body != null)
Text(
nativeAd?.properties.body ?? '',
style: const TextStyle(
fontSize: 14,
),
),
if (nativeAd?.properties.asset != null)
Column(children: [
const SizedBox(
height: 4,
),
Image.network(
nativeAd?.properties.asset ?? '',
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return const CupertinoActivityIndicator();
},
errorBuilder: (context, error, stackTrace) {
return const Icon(Icons.error);
},
width: MediaQuery.of(context).size.width,
height: 300,
)
]),
if (nativeAd?.properties.extra['t1'] != null)
Column(
children: [
const SizedBox(
height: 8,
),
Text(
nativeAd?.properties.extra['t2'] ?? '',
style: const TextStyle(
fontSize: 14,
),
),
Text(
nativeAd?.properties.extra['t3'] ?? '',
style: const TextStyle(
fontSize: 14,
),
),
],
)
],
),
),
),
);
}
4
네이티브 광고 불러오기
class YourComponent extends StatefulWidget {
const YourComponent({super.key});
@override
State<YourComponent> createState() => _YourComponentState();
}
class _YourComponentState extends State<YourComponent> {
late AdropNativeAd nativeAd;
bool isLoaded = false;
@override
void initState() {
super.initState();
nativeAd = AdropNativeAd(
unitId: 'YOUR_UNIT_ID',
listener: AdropNativeListener(
onAdReceived: (ad) {
debugPrint('Native Ad loaded: ${ad.unitId}');
setState(() => isLoaded = true);
},
onAdFailedToReceive: (ad, errorCode) {
debugPrint('Native Ad load failed: $errorCode');
setState(() => isLoaded = false);
},
onAdImpression: (ad) => debugPrint('Native Ad impression'),
onAdClicked: (ad) => debugPrint('Native Ad clicked'),
),
);
nativeAd.load();
}
@override
void dispose() {
nativeAd.dispose();
super.dispose();
}
Widget _buildNativeAd(BuildContext context) {
if (!isLoaded) return const SizedBox.shrink();
final props = nativeAd.properties;
return AdropNativeView(
ad: nativeAd,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (props.profile?.displayLogo != null)
Image.network(
props.profile!.displayLogo!,
width: 24,
height: 24,
),
if (props.profile?.displayName != null)
Text(props.profile!.displayName!),
if (props.headline != null)
Text(props.headline!),
if (props.body != null)
Text(props.body!),
if (props.asset != null)
Image.network(
props.asset!,
width: 120,
height: 120,
),
if (props.extra['sampleExtraId'] != null)
Text(props.extra['sampleExtraId'].toString()),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _buildNativeAd(context),
),
);
}
}5
BackFill 광고 구현
안드로이드
애드컨트롤 콘솔에서 BackFill 설정이 된 유닛을 선택해 주세요.
해당 유닛을 사용하면 간단하게 백필(BackFill) 광고 연동이 가능합니다.
아래의 adrop-ads-backfill를 import해 주세요.
implementation "io.adrop:adrop-ads-backfill:1.7.2"iOS
애드컨트롤 콘솔에서 BackFill 설정이 된 유닛을 선택해 주세요.
해당 유닛을 사용하면 간단하게 백필(BackFill) 광고 연동이 가능합니다.
Podfile에 adrop-ads-backfill을 추가해 주세요.
pod 'adrop-ads', '~> 1.7.2' pod 'adrop-ads-backfill', '>= 1.7.2', '< 1.8.0'pod install 실행
pod install --repo-updateInfo.plist에 AdMob에서 발급받은 appId를 추가해주세요.
Last updated