Native 광고

native ads를 사용하면 앱의 기존 디자인과 일관된 방식으로 앱을 수익화할 수 있습니다. AppLovin MAX Flutter 플러그인을 사용하면 광고의 개별 에셋에 액세스할 수 있습니다. 이를 통해 앱의 디자인 및 분위기와 일치하도록 광고 레이아웃을 설계할 수 있습니다. SDK가 이미지 캐싱 및 메트릭 추적을 자동으로 처리합니다. 개발자는 광고를 표시하는 방법, 시기, 위치에만 집중할 수 있습니다.

이 플러그인은 수동 연동만 지원합니다. 커스텀 뷰에 native ad 에셋을 수동으로 로드할 수 있습니다. 이 연동 방식은 크게 세 가지 단계로 구성됩니다.

• Flutter UI 컴포넌트 선언
• native ad 새로고침
• native ad 제거

수동 API를 사용하려면 Create New Ad Unit 화면에서 Manual 템플릿을 선택하세요.

Flutter UI 컴포넌트 선언

MaxNativeAdView는 native ad 컴포넌트를 담는 컨테이너입니다. 이 컴포넌트가 마운트되면 제공된 adUnitId 속성에 대한 native ad를 자동으로 로드합니다.

플러그인은 native ad의 에셋을 렌더링하는 컴포넌트를 제공합니다. 앱의 다른 컴포넌트와 마찬가지로 이 컴포넌트들의 스타일을 지정할 수 있습니다. AppLovin의 정책을 준수하려면 광고에 개인정보 보호 정보(Privacy Information) 아이콘이 포함되어야 합니다. 이 아이콘은 중요한 개인정보 처리방침 고지로 연결됩니다. MaxNativeAdOptionsView 컴포넌트를 사용하여 이 아이콘에 바인딩할 수 있습니다.

다음 표는 native ad 에셋을 렌더링하는 데 도움이 되는 컴포넌트를 보여줍니다.

다음 코드 샘플은 이러한 모든 native ad 컴포넌트를 사용하는 샘플 native ad를 보여줍니다. AppLovin은 네트워크가 특정 에셋을 반환할 것을 보장하지 않습니다. 완전하게 작동하는 예제는 AppLovin-MAX-Flutter GitHub 프로젝트의 예제 앱을 참조하세요.

Container(
  margin: const EdgeInsets.all(8.0),
  height: 300,
  child: MaxNativeAdView(
    adUnitId: widget.adUnitId,
    controller: _nativeAdViewController,
    listener: NativeAdListener(onAdLoadedCallback: (ad) {
      logStatus('Native ad loaded from ${ad.networkName}');
      setState(() {
        _mediaViewAspectRatio = ad.nativeAd?.mediaContentAspectRatio ?? _kMediaViewAspectRatio;
      });
    }, onAdLoadFailedCallback: (adUnitId, error) {
      logStatus('Native ad failed to load with error code ${error.code} and message: ${error.message}');
    }, onAdClickedCallback: (ad) {
      logStatus('Native ad clicked');
    }, onAdRevenuePaidCallback: (ad) {
      logStatus('Native ad revenue paid: ${ad.revenue}');
    }),
    child: Container(
      color: const Color(0xffefefef),
      padding: const EdgeInsets.all(8.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.all(4.0),
                child: const MaxNativeAdIconView(
                  width: 48,
                  height: 48,
                ),
              ),
              Flexible(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    MaxNativeAdTitleView(
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                      maxLines: 1,
                      overflow: TextOverflow.visible,
                    ),
                    MaxNativeAdAdvertiserView(
                      style: TextStyle(fontWeight: FontWeight.normal, fontSize: 10),
                      maxLines: 1,
                      overflow: TextOverflow.fade,
                    ),
                    MaxNativeAdStarRatingView(
                      size: 10,
                    ),
                  ],
                ),
              ),
              const MaxNativeAdOptionsView(
                width: 20,
                height: 20,
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Flexible(
                child: MaxNativeAdBodyView(
                  style: TextStyle(fontWeight: FontWeight.normal, fontSize: 14),
                  maxLines: 3,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Expanded(
            child: AspectRatio(
              aspectRatio: _mediaViewAspectRatio,
              child: const MaxNativeAdMediaView(),
            ),
          ),
          const SizedBox(
            width: double.infinity,
            child: MaxNativeAdCallToActionView(
              style: ButtonStyle(
                backgroundColor: WidgetStatePropertyAll(Color(0xff2d545e)),
                textStyle: WidgetStatePropertyAll(TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
),

광고 새로고침

AppLovin Flutter 플러그인은 MaxNativeAdView가 마운트될 때 첫 번째 native ad를 자동으로 로드합니다. 마운트된 후에는 MaxNativeAdViewController의 loadAd() 메서드를 호출하여 다음 광고를 로드할 수 있습니다.

final MaxNativeAdViewController _nativeAdViewController = MaxNativeAdViewController();
_nativeAdViewController.loadAd();

에셋 크기

AppLovin은 앱의 나머지 디자인 컨텍스트에 적합한 만큼 최대한 많은 네이티브 요소를 포함할 것을 권장합니다. 이러한 요소에는 Title, Media View 또는 Icon 등이 포함될 수 있습니다. 사용자에게 더 많은 정보를 제공하면 사용자가 광고를 클릭할지 여부를 결정하는 데 도움이 됩니다.

AppLovin Exchange 디맨드의 경우, Title, Description 및 CTA에 허용되는 최대 글자 수는 다음과 같습니다.

SDK mediation networks의 경우, 해당 network에서 최대 글자 수를 설정합니다.

미디어 콘텐츠 가로세로 비율(aspect ratio)을 가져오는 방법

adInfo에서 MediaView의 미디어 콘텐츠 가로세로 비율(Media Content Aspect Ratio)을 가져올 수 있습니다. 이는 onAdLoaded 콜백의 인자입니다.

ad.nativeAd?.mediaContentAspectRatio

별점(Star rating)

광고 대상 앱의 별점에 액세스하여 렌더링할 수 있습니다. 해당 값은 사용 가능한 경우 [0.0, 5.0] 범위의 부동 소수점 수입니다.

AppLovin MAX Flutter 플러그인은 MaxNativeAdStarRatingView 컴포넌트에서 별을 자동으로 렌더링합니다. 네트워크에서 별점을 제공하지 않는 경우, AppLovin MAX Flutter 플러그인은 별점 컴포넌트를 비워 둡니다. 개발자는 이에 맞게 레이아웃을 조정해야 합니다.

ad.nativeAd?.starRating에서 현재 광고의 별점을 가져올 수 있습니다.