네이티브 광고

네이티브 광고는 플랫폼 고유의 UI 구성요소를 통해 사용자에게 표시되는 광고 애셋입니다. 이 광고는 레이아웃을 구축할 때 사용한 것과 동일한 유형의 보기로 나타나며, 게재되는 사용자 환경의 시각적 디자인과 어울리는 형식으로 표시될 수 있습니다. 코딩 측면에서 보면 네이티브 광고가 로드될 때 광고 애셋을 포함하는 NativeAd 객체를 앱에서 수신하고 Google 모바일 광고 SDK가 아닌 앱에서 광고 표시를 처리한다는 뜻입니다.

일반적으로 네이티브 광고는 SDK를 통해 광고를 로드하는 작업과 앱에 광고 콘텐츠를 표시하는 작업을 통해 성공적으로 구현됩니다. 이 페이지에서는 SDK를 사용하여 네이티브 광고를 로드하는 방법을 다룹니다.

플랫폼 설정

네이티브 광고는 플랫폼 고유의 UI 구성요소(예: Android용 View 또는 iOS용 UIView)를 통해 사용자에게 표시됩니다.

네이티브 광고에는 플랫폼 고유의 UI 구성요소가 필요하므로 이 기능을 사용하려면 Android 및 iOS에서 추가 설정을 해야 합니다.

Android

Android에서 Google 모바일 광고 플러그인을 구현하려면 NativeAdFactory를 구현하는 클래스가 필요합니다. NativeAdFactory에는 NativeAd 및 맞춤 옵션을 사용하고 NativeAdView를 반환하는 메서드가 포함되어 있습니다. NativeAdView는 앱에 표시되는 내용입니다.

MainActivity.java에서 이를 구현하거나 MainActivity.java와 동일한 디렉터리에 별도의 클래스를 만들 수 있습니다.

package my.app.path;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

class NativeAdFactoryExample implements NativeAdFactory {
  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    // Create NativeAdView
  }
}

NativeAdFactoryMainActivity.configureFlutterEngine(FlutterEngine)factoryId(고유 String 식별자)에 등록해야 합니다. 앱에서 사용하는 고유 네이티브 광고 레이아웃별로 NativeAdFactory를 구현 및 등록할 수 있고 하나로 모든 레이아웃을 처리할 수도 있습니다.

또한 add-to-app을 사용하여 빌드할 때는 cleanUpFlutterEngine(engine)에서 NativeAdFactory의 등록을 취소해야 합니다.

MainActivity.java는 다음과 같은 형식이어야 합니다.

package my.app.path;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
   super.configureFlutterEngine(flutterEngine);

    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "adFactoryExample", NativeAdFactoryExample());
  }

  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}

Dart에서 NativeAd를 만들 때 factoryIdGoogleMobileAdsPlugin에 팩토리를 추가할 때 사용한 것과 일치해야 합니다. 위의 코드 스니펫에서 adFactoryExamplefactoryId의 이름입니다. 다음은 NativeAdFactory의 예시입니다.

package io.flutter.plugins.googlemobileadsexample;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

/**
 * my_native_ad.xml can be found at
 * //github.com/googleads/googleads-mobile-flutter/tree/master/packages/google_mobile_ads/example/android/app/src/main/res/layout
 */
class NativeAdFactoryExample implements NativeAdFactory {
  private final LayoutInflater layoutInflater;

  NativeAdFactoryExample(LayoutInflater layoutInflater) {
    this.layoutInflater = layoutInflater;
  }

  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    final NativeAdView adView =
        (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);
    final TextView headlineView = adView.findViewById(R.id.ad_headline);
    final TextView bodyView = adView.findViewById(R.id.ad_body);

    headlineView.setText(nativeAd.getHeadline());
    bodyView.setText(nativeAd.getBody());

    adView.setBackgroundColor(Color.YELLOW);

    adView.setNativeAd(nativeAd);
    adView.setBodyView(bodyView);
    adView.setHeadlineView(headlineView);
    return adView;
  }
}

iOS

iOS에서 Google 모바일 광고 플러그인을 구현하려면 FLTNativeAdFactory를 구현하는 클래스가 필요합니다. FLTNativeAdFactory에는 GADNativeAd 및 맞춤 옵션을 사용하고 GADNativeAdView를 반환하는 메서드가 포함되어 있습니다. GADNativeAdView는 앱에 표시되는 내용입니다.

FLTNativeAdFactory 프로토콜은 AppDelegate로 구현하거나 별도의 클래스를 만들면 됩니다.

/* AppDelegate.m */
#import "FLTGoogleMobileAdsPlugin.h"
@interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create GADNativeAdView
}
@end

FLTNativeAdFactoryregisterNativeAdFactory:factoryId:nativeAdFactory:factoryId(고유 String 식별자)에 등록해야 합니다.

앱에서 사용하는 고유 네이티브 광고 레이아웃별로 FLTNativeAdFactory를 구현 및 등록할 수 있고 하나로 모든 레이아웃을 처리할 수도 있습니다. 이렇게 하려면 FLTGoogleMobileAdsPlugin.h를 가져오고 FlutterPluginRegistry(팩토리용 고유 식별자) 및 팩토리 자체를 사용해 registerNativeAdFactory:factoryId:nativeAdFactory:를 호출해야 합니다. GeneratedPluginRegistrant registerWithRegistry:self];가 호출된 후에 팩토리 또한 추가해야 합니다.

AppDelegate.m에서 실행하는 경우 다음과 유사하게 표시됩니다.

#import "FLTGoogleMobileAdsPlugin.h"

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                          factoryId:@"adFactoryExample"
                                    nativeAdFactory:nativeAdFactory];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Dart에서 NativeAd를 만들 때 factoryIDFLTGoogleMobileAdsPlugin에 팩토리를 추가할 때 사용한 것과 일치해야 합니다. 위의 코드 스니펫에서 adFactoryExamplefactoryID의 이름입니다. 다음은 FLTNativeAdFactory의 예시입니다.

/**
 * The example NativeAdView.xib can be found at
 * //github.com/googleads/googleads-mobile-flutter/blob/master/packages/google_mobile_ads/example/ios/Runner/NativeAdView.xib
 */
@interface NativeAdFactoryExample : NSObject <FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create and place ad in view hierarchy.
  GADNativeAdView *adView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  adView.nativeAd = nativeAd;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)adView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)adView.bodyView).text = nativeAd.body;
  adView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                         forState:UIControlStateNormal];
  adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

  ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
  adView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UILabel *)adView.storeView).text = nativeAd.store;
  adView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)adView.priceView).text = nativeAd.price;
  adView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
  adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  adView.callToActionView.userInteractionEnabled = NO;

  return adView;
}
@end

항상 테스트 광고로 테스트

앱을 제작하고 테스트할 때 운영 중인 실제 광고가 아닌 테스트 광고를 사용하세요. 이렇게 하지 않으면 계정이 정지될 수 있습니다.

테스트 광고를 로드하는 가장 쉬운 방법은 네이티브 광고 전용 테스트 광고 단위 ID를 사용하는 것입니다.

테스트 광고 단위는 모든 요청에 대해 테스트 광고를 반환하도록 구성되며 코딩, 테스트, 디버깅 중에 앱에서 자유롭게 사용할 수 있습니다. 단, 앱을 게시하기 전에 이 테스트 광고 단위 ID를 자체 광고 단위 ID로 바꿔야 합니다.

광고 인스턴스화

NativeAd에는 adUnitId, factoryId, AdRequestNativeAdListener가 필요합니다. 다음 예에서는 네이티브 광고를 인스턴스화합니다.

final NativeAd myNative = NativeAd(
  adUnitId: '<ad unit id>',
  factoryId: 'adFactoryExample',
  request: AdRequest(),
  listener: NativeAdListener(),
);

팩토리 ID

factoryId는 Android에서는 GoogleMobileAdsPlugin에, iOS에서는 FLTGoogleMobileAdsPlugin에 팩토리를 추가하는 데 사용한 것과 일치해야 합니다. 두 플랫폼 모두에서 동일한 factoryId를 사용하거나 각 플랫폼에서 자체 항목을 사용할 수 있습니다.

네이티브 광고 이벤트

NativeAdListener를 사용하면 광고 닫음과 같은 수명 주기 이벤트를 수신할 수 있습니다. 다음 예에서는 각 메서드를 구현하고 콘솔에 메시지를 기록합니다.

final NativeAdListener listener = NativeAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
 // Called when a click is recorded for a NativeAd.
 onNativeAdClicked: (NativeAd ad) => print('Ad clicked.'),
);

광고 로드

NativeAd의 인스턴스화가 끝나면 load()를 호출해야 화면에 표시됩니다.

myNative.load();

디스플레이 광고

NativeAd를 위젯으로 표시하려면 load()를 호출한 후 지원되는 광고를 사용하여 AdWidget을 인스턴스화해야 합니다. load()를 호출하기 전에 위젯을 만들 수 있지만 위젯 트리에 위젯을 추가하기 전에 load()를 호출해야 합니다.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget은 Flutter의 Widget 클래스에서 상속되며 다른 위젯처럼 사용할 수 있습니다. iOS에서는 지정된 너비와 높이를 바탕으로 컨테이너에 위젯을 배치해야 합니다. 그렇지 않으면 광고가 게재되지 않을 수 있습니다.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: 500,
  height: 500,
);

광고에서 load()를 호출한 후 액세스할 필요가 없어지면 dispose()를 호출해야 합니다. dispose()를 호출하기 가장 좋은 시점은 위젯 트리나 AdListener.onAdFailedToLoad 콜백에서 AdWidget을 제거한 후입니다.

준비가 끝났습니다. 이제 앱에서 네이티브 광고를 게재할 수 있습니다.

다음 단계