Flutter 네이티브 광고

1. 네이티브 광고 레이아웃 만들기

네이티브 광고 에서는 다음과 같은 view 의 종류들이 포함 될 수 있습니다.

• headline : 제목

• body : 내용

• profile

  • displayLogo : 광고주 로고

  • displayName : 광고주 이름

• asset : 소재 이미지

• destinationURL : 링크

• extra

  • id : 커스텀 필드 아이디

  • text : 커스텀 필드의 광고주가 입력한 컨텐츠

예를 들어, 소셜 피드 형식의 네이티브 광고를 구성한다면 다음과 같은 레이아웃을 만들 수 있습니다.

1-1. 커스텀 필드 데이터 추가 및 자유로운 이미지 소재 사용하기

예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

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,
                      ),
                    ),
                  ],
                )
            ],
          ),
        ),
      ),
    );
  }

자세한 예시는 Github에서 확인하실 수 있습니다. 타입 또한 Github에서 확인하실 수 있습니다.

2. 네이티브 광고 불러오기

Ad type	Ad unit ID
Test Native ID	PUBLIC_TEST_UNIT_ID_NATIVE

Step 1. Contsturctor Event Listener

final AdropNativeListener listener = AdropNativeListener(
    onAdReceived: (ad) =>
        debugPrint('Adrop Native Ad loaded with unitId ${ad.unitId}!'),
    onAdFailedToReceive: (ad, errorCode) => 
        debugPrint('error in ${ad.unitId} while loading: $errorCode'),
    ...
);

Step 2. Display a Native AD

class YourComponent extends StatefulWidget {
  const YourComponent({super.key});

  @override
  State<StatefulWidget> createState() => _YourComponentState();
}

class _YourComponentState extends State<YourComponent> {
  final AdropNativeAd nativeAd = AdropNativeAd(
    unitId: 'YOUR_UNIT_ID',
    listener: listener,
  );
  
  bool isLoaded = false;

  @override
  void initState() {
    super.initState();
    nativeAd.load();
  }
  
  Widget nativeAdView(BuildContext context) {
    if (!isLoaded) return Container();
    
    return AdropNativeView(
      ad: nativeAd,
      child: Column(
        children: [
          if (nativeAd.properties.profile?.displayLogo)
              Image.network(
                nativeAd.properties.profile?.displayLogo,
                width: 24,
                height: 24,
              ),
          if (nativeAd.properties.profile?.displayName) 
              Text(
                nativeAd.properties.profile?.displayName,
              ),
          if (nativeAd.properties.headline != null)
            Text(nativeAd.properties.headline),
          if (nativeAd.properties.body != null)
            Text(nativeAd.properties.body),
          if (nativeAd.properties.asset != null)
            Image.network(nativeAd.properties.asset, width: {{yourWidth}}, height: {{yourHeight}}),
          if (nativeAd.properties.extra['sampleExtraId'] != null)
            Text(nativeAd.properties.extra['sampleExtraId']),
        ],
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: nativeAdView(context),
      ),
    );
  }
}
    

샘플코드 자세히 보기