# Flutter 관련 네이티브 광고 통합

> 레벨플레이 SDK를 사용하여 네이티브 광고를 플러터 앱에 통합하여 사전 정의 및 커스텀 광고 커스터마이징 템플릿을 모두 제공합니다.

네이티브 광고는 앱의 다른 콘텐츠 블렌딩 커스터마이즈 수 있는 광고 형태입니다. 이렇게 하면 광고가 더 자연스럽게 표시되므로 사용자 경험 리텐션 향상됩니다.

## 필수 조건##prerequisites

레벨플레이 플러그인 8.4.0 이상을 애플리케이션에 올바르게 [통합했는지 확인합니다](/grow/levelplay/sdk/flutter/plugin-integration.md).

## 레벨플레이 네이티브 광고 통합##integrate-levelplay-native-ads

Flutter 플러그인을 사용하여 레벨플레이 네이티브 광고를 연동하는 방법에는 두 가지가 있습니다.

* 네이티브 템플릿: 플러그인이 XML 및 XIB 파일 형식으로 제공하는 사전 정의된 템플릿
* 커스텀 템플릿: 개발자가 제작하고 디자인한 템플릿

## 네이티브 템플릿##native-templates

네이티브 템플릿은 네이티브 광고 로직을 구현하는 사전 정의된 뷰입니다. 이 설정은 광고가 로드된 후의 조회 수를 처리하고 광고가 삭제된 후 삭제합니다.

두 가지 템플릿 옵션이 있습니다.

* 소형: 미디어 뷰가 포함되지 않는 템플릿입니다.
* 중간: 미디어 뷰를 제공하는 템플릿입니다.

일반적으로 스타일이 비슷하지만 원하는 대로 커스터마이즈 수도 있습니다.

네이티브 템플릿을 연동하려면 다음 단계를 완료하십시오.

### Create LevelPlayNativeAd Object##create-levelplaynativead-object

광고를 `LevelPlayNativeAdView` 컨테이너에 로드할 책임이 있는 `LevelPlayNativeAd` 오브젝트를 만듭니다. 이 오브젝트 load, destroy와 같은 광고 메서드를 처리하고 이벤트 콜백의 광고 배치와 리스너를 정의합니다.

```dart
_nativeAd = LevelPlayNativeAd.builder()
        .withPlacementName([YOUR_PLACEMENT])
        .withListener([YOUR_LEVEL_PLAY_NATIVE_AD_LISTENER])
        .build();

```

### 리스너 구현##implement-the-listener

코드에 `LevelPlayNativeAdListener`를 구현합니다. 레벨플레이 SDK는 네이티브 광고 활동을 알려주는 여러 콜백을 작동시킵니다. SDK는 리스너에게 다음의 모든 이벤트를 알립니다.

```dart
/**
 네이티브 광고가 클릭된 후 호출됩니다.
 @param nativeAd Level Play 네이티브 광고입니다.
 @param adInfo 광고 정보입니다.
 */ 
@override
void onAdClicked(LevelPlayNativeAd? nativeAd, IronSourceAdInfo? adInfo) {}
/**
 네이티브 광고 노출이 기록된 후 호출됩니다.
 @param nativeAd Level Play 네이티브 광고입니다.
 @param adInfo 광고 정보입니다.
 */
 @override
 void onAdImpression(LevelPlayNativeAd? nativeAd, IronSourceAdInfo? adInfo) {}
/**
 네이티브가 광고를 로드하려고 시도했지만 실패한 후 호출됩니다.
 @param nativeAd Level Play 네이티브 광고입니다.
 @param error 오류의 원인
 */  
@override
void onAdLoadFailed(LevelPlayNativeAd? nativeAd, IronSourceError? error) {}
/**
 네이티브 광고가 성공적으로 로드된 후 호출됨
 @param nativeAd Level Play 네이티브 광고입니다.
 @param adInfo 광고 정보입니다.
 */
@override
void onAdLoaded(LevelPlayNativeAd? nativeAd, IronSourceAdInfo? adInfo) {}

```

### LevelPlayNativeAdView 생성##create-levelplaynativeadview

로드된 네이티브 광고를 호스트할 컨테이너를 정의하는 `LevelPlayNativeAdView` 위젯을 만듭니다. 이 오브젝트 너비와 높이 또는 컨테이너의 상자 제약을 결정하여 네이티브 광고 경계를 정의합니다. 또한 다음과 같은 네이티브 광고 요소 스타일링을 처리 할 수 있습니다: 제목, 바디, 광고주 및 행동 버튼 호출.

네이티브 템플릿의 기본 타입은 `SMALL`이며 위젯 생성 시 템플릿 타입을 정의하여 변경할 수 있습니다. 

```dart
LevelPlayNativeAdView(
          높이: 350, // 중간 타입에 권장 높이
          너비: 300, // 중간 타입에 권장 너비
          nativeAd: _nativeAd,
          onPlatformViewCreated: () {
            _nativeAd?.loadAd(); // Recommeneded place to loadAd
          },
          templateType: LevelPlayTemplateType.MEDIUM,
          templateStyle: [LevelPlayNativeAdTemplateStyle] optional
)
LevelPlayNativeAdView(
          높이: 175, // 소형 타입에 권장된 높이
          너비: 300, // 소형 타입에 권장 너비
          nativeAd: _nativeAd,
          onPlatformViewCreated: () {
            _nativeAd?.loadAd(); // Recommeneded place to loadAd
          },
          templateType: LevelPlayTemplateType.SMALL,
          templateStyle: [LevelPlayNativeAdTemplateStyle] optional
)

```

### 광고 로드##load-the-ad

loadAd를 호출 네이티브 광고를 로드합니다. 네이티브 광고 뷰 컨테이너의 `onPlatformViewCreated` 콜백을 수신한 후 또는 개발자가 결정한 다른 시간에 호출할 수 있습니다.

```dart
_nativeAd?.loadAd();

```

### 네이티브 광고 제거##destroy-the-native-ad

네이티브 광고를 삭제하려면 다음 메서드를 호출.

```dart
  _nativeAd?.destroyAd();

```

삭제된 네이티브 광고는 더 이상 로드할 수 없습니다. 다시 게재하려면 광고 컨테이너 위젯을 다시 생성해야 합니다.

## 커스텀 템플릿##custom-templates

커스텀 템플릿을 사용하면 특정 요구 사항에 맞게 고유한 스타일과 기능을 디자인할 수 있습니다. 이를 통해 레이아웃과 기능을 개인화하여 고유한 사용자 경험 제공할 수 있습니다.

이러한 템플릿은 광고 디자인에 대한 더 높은 수준의 제어가 필요한 경우에 주로 사용됩니다. Android 및 iOS 플랫폼 모두에서 구현할 수 있으며 추가 코드 구현이 필요합니다.

커스텀 템플릿을 만들려면 네이티브 코드를 작성하고 커스텀 레이아웃을 직접 개발해야 합니다. 통합하려면 아래 단계를 따르십시오.

### NativeAdViewFactory 생성##create-nativeadviewfactory

LevelPlayNativeAdViewFactory를 확장하는 클래스 Android 또는 iOS 구현은 커스터마이즈된 레이아웃 사용하여 로드된 광고를 표시합니다.

#### Android##android

```kotlin
// Android Implementation 
import com.ironSource.ironsource_mediation.LevelPlayNativeAdViewFactory
android.widget.Button 임포트
import android.widget.ImageView
import android.widget.TextView
import com.ironsource.mediationsdk.ads.nativead.LevelPlayMediaView
import com.ironsource.mediationsdk.ads.nativead.LevelPlayNativeAd
import com.ironsource.mediationsdk.ads.nativead.NativeAdLayout
import io.flutter.plugin.common.BinaryMessenger
/**
 * 이 클래스 커스텀 네이티브 광고를 구현하는 방법의 예입니다.
 * 클래스 BinaryMessenger와
 * 개발자가 로드하려는 네이티브 광고 레이아웃. 또한
 * LevelPlayNativeAdViewFactory를 확장하고
 * 메서드를 bindNativeAdToView로 연결하여 뷰를
 * 로드된 네이티브 광고
 */
class NativeAdViewFactoryExample(
    levelPlayBinaryMessenger: BinaryMessenger,
    layoutId: Int
) : LevelPlayNativeAdViewFactory(levelPlayBinaryMessenger, layoutId) {
    override fun bindNativeAdToView(nativeAd: LevelPlayNativeAd?, nativeAdLayout: NativeAdLayout) {
        // Extract views
        val titleView = nativeAdLayout.findViewById<TextView>(R.id.adTitle)
        val bodyView = nativeAdLayout.findViewById<TextView>(R.id.adBody)
        val advertiserView = nativeAdLayout.findViewById<TextView>(R.id.adAdvertiser)
        val callToActionView = nativeAdLayout.findViewById<Button>(R.id.adCallToAction)
        val iconView = nativeAdLayout.findViewById<ImageView>(R.id.adAppIcon)
        val mediaView = nativeAdLayout.findViewById<LevelPlayMediaView>(R.id.adMedia)
        // Bind native ad to view
        if (nativeAd != null) {
            if (nativeAd.title != null) {
                titleView.text = nativeAd.title
                nativeAdLayout.setTitleView(titleView)
            }
            if (nativeAd.body != null) {
                bodyView.text = nativeAd.body
                nativeAdLayout.setBodyView(bodyView)
            }
            if (nativeAd.advertiser != null) {
                advertiserView.text = nativeAd.advertiser
                nativeAdLayout.setAdvertiserView(advertiserView)
            }
            if (nativeAd.callToAction != null) {
                callToActionView.text = nativeAd.callToAction
                nativeAdLayout.setCallToActionView(callToActionView)
            }
            if (nativeAd.icon != null) {
                iconView!!.setImageDrawable(nativeAd.icon!!.drawable)
                nativeAdLayout.setIconView(iconView)
            }
            if (mediaView != null) {
                nativeAdLayout.setMediaView(mediaView)
            }
            nativeAdLayout.registerNativeAdViews(nativeAd)
        }
    }
}

```

#### iOS##ios

```objc
// iOS Implementation
/// h file
#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>
#import <IronSource/IronSource.h>
#import "LevelPlayNativeAdViewFactory.h"
/**
 * 이 클래스 커스텀 네이티브 광고를 구현하는 방법의 예입니다.
 * 클래스 BinaryMessenger와
 * 개발자가 로드하려는 네이티브 광고 레이아웃. 또한
 * LevelPlayNativeAdViewFactory를 확장하고
 * 메서드를 bindNativeAdToView로 연결하여 뷰를
 * 로드된 네이티브 광고
 */
@interface NativeAdViewFactoryExample : LevelPlayNativeAdViewFactory <LevelPlayNativeAdViewFactoryDelegate>
- (인스턴스 타입)initWithMessenger:(id<FlutterBinaryMessenger>)levelPlayBinaryMessenger 레이아웃Name:(nullable NSString *)layoutName;
@end
/// m file
#import "NativeAdViewFactoryExample.h"
@implementation NativeAdViewFactoryExample
- (instancetype)initWithMessenger:(id<FlutterBinaryMessenger>)levelPlayBinaryMessenger 레이아웃이름:(nullable NSString *)레이아웃이름 {
    self = [super initWithMessenger:levelPlayBinaryMessenger delegate:self layoutName:layoutName];
    return self;
}
- (void)bindNativeAdToView:(LevelPlayNativeAd *)nativeAd isNativeAdView:(ISNativeAdView *)isNativeAdView {
    // Extract views
    UILabel *titleView = isNativeAdView.adTitleView;
    UILabel *bodyView = isNativeAdView.adBodyView;
    UILabel *advertiserView = isNativeAdView.adBodyView;
    UIButton *callToActionView = isNativeAdView.adCallToActionView;
    UIImageView *iconView = isNativeAdView.adAppIcon;
    LevelPlayMediaView *mediaView = isNativeAdView.adMediaView;
    // Bind native ad to view
    if (nativeAd != nil) {
        if (nativeAd.title != nil) {
            titleView.text = nativeAd.title;
            [isNativeAdView setAdTitleView:titleView];
        }
        if (nativeAd.body != nil) {
            bodyView.text = nativeAd.body;
            [isNativeAdView setAdBodyView:bodyView];
        }
        if (nativeAd.advertiser != nil) {
            advertiserView.text = nativeAd.advertiser;
            [isNativeAdView setAdAdvertiserView:advertiserView];
        }
        if (nativeAd.callToAction != nil) {
            [callToActionView setTitle:nativeAd.callToAction forState:UIControlStateNormal];
            [isNativeAdView setAdCallToActionView:callToActionView];
        }
        if (nativeAd.icon != nil) {
            iconView.image = nativeAd.icon.image;
            [isNativeAdView setAdAppIcon:iconView];
        }
        if (mediaView != nil) {
            [isNativeAdView setAdMediaView:mediaView];
        }
        // Register native ad views with the provided native ad
        [isNativeAdView registerNativeAdViews:nativeAd];
    }
}
@end

```

### NativeAdViewFactory 등록##register-your-nativeadviewfactory

MainActivity 또는 AppDelegate에 클래스를 등록합니다.

> **Note:**
>
> 고유한 뷰 유형 문자열은 Flutter 측의 LevelPlayNativeAdView 위젯에서 설정한 viewType과 일치해야 합니다.

#### Android##android

```kotlin
 // Android Implementation 
import com.ironSource.ironsource_mediation.IronSourceMediationPlugin
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
클래스 MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        // Custom native ad view template must be registered here
        IronSourceMediationPlugin.registerNativeAdViewFactory(flutterEngine, [YOUR_UNIQUE_VIEW_TYPE], NativeAdViewFactoryExample(flutterEngine.dartExecutor.binaryMessenger, R.lay아웃.my_ 커스텀_native_ad_view)) // xml ID
    }
    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)
        // Custom native ad view template must be unregistered here
        IronSourceMediationPlugin.unregisterNativeAdViewFactory(flutterEngine, viewType)
    }
}

```

Android NativeAdView 레이아웃의 예제는 [my\_ 커스텀\_native\_ad\_view\_template.xml](https://github.com/ironsource-mobile/Flutter-SDK/blob/master/example/android/app/src/main/res/layout/my_custom_native_ad_view.xml)을 참조하십시오.

#### iOS##ios

```objc
 // iOS Implementation 
#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"
#import "NativeAdViewFactoryExample.h"
#import "IronSourceMediationPlugin.h"
@implementation AppDelegate
- (BOOL)애플리케이션(UIApplication *)애플리케이션
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
  UIViewController *rootViewController = self.window.rootViewController;
  // Check if the root view controller is a FlutterViewController
  if ([rootViewController isKindOfClass:[FlutterViewController class]]) {
    // Cast the root view controller to FlutterViewController
    FlutterViewController *flutterViewController = (FlutterViewController *)rootViewController;
    NativeAdViewFactoryExample *nativeAdViewFactoryExample = [[NativeAdViewFactoryExample alloc] initWithMessenger: flutterViewController.binaryMessenger layoutName: @"MyCustomNativeAdViewTemplate"]; // xib 이름
    // Custom native ad view template must be registered here
    [IronSourceMediationPlugin registerNativeAdViewFactory:self
                                                  viewTypeId:[YOUR_UNIQUE_VIEW_TYPE]
                                         nativeAdViewFactory:nativeAdViewFactoryExample];
  }
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

```

iOS NativeAdView 레이아웃의 예시는 [MyCustomNativeAdViewTemplate.xib](https://github.com/ironsource-mobile/Flutter-SDK/blob/master/example/ios/Runner/MyCustomNativeAdViewTemplate.xib)를 참조하십시오.

### LevelPlayNativeAdView 생성##create-levelplaynativeadview

로드된 네이티브 광고를 호스트 컨테이너를 정의하려면 LevelPlayNativeAdView 위젯을 생성합니다. 이 오브젝트 너비와 높이 또는 컨테이너의 상자 제약을 결정하여 네이티브 광고 경계를 정의합니다. 또한 다음과 같은 네이티브 광고 요소 스타일링을 처리 할 수 있습니다: 제목, 바디, 광고주 및 행동 버튼 호출.

> **Note:**
>
> 커스텀 템플릿을 생성할 때 viewType이 네이티브 Android 또는 iOS 섹션에 지정된 고유한 뷰 타입과 일치하는지 확인합니다.

```dart
LevelPlayNativeAdView(
          height: [HEIGHT], // 권장된 높이
          width:[WIDTH], // 권장 너비
          nativeAd: _nativeAd,
          onPlatformViewCreated: () {
            _nativeAd?.loadAd(); // Recommeneded place to loadAd
          },
          viewType: [YOUR_UNIQUE_VIEW_TYPE]
)

```

### 광고 로드##load-the-ad

loadAd를 호출 네이티브 광고를 로드합니다. 이 메서드는 네이티브 광고 뷰 컨테이너의 onPlatformViewCreated 콜백 또는 개발자가 결정한 다른 타이밍에서 호출할 수 있습니다.

```dart
_nativeAd?.loadAd();

```

### 네이티브 광고 제거##destroy-the-native-ad

네이티브 광고를 삭제하려면 destroyAd 메서드를 다음과 같이 호출하다.

```dart
_nativeAd?.destroyAd();

```

삭제된 네이티브 광고는 더 이상 로드할 수 없습니다. 다시 게재하려면 광고 컨테이너 위젯을 다시 생성해야 합니다.

## 레벨플레이 Mediation 데모 앱##levelplay-mediation-demo-app

통합 데모 앱은 앱에 네이티브 광고 유닛 API를 통합하는 방법을 보여 줍니다.

[Flutter 데모 애플리케이션 다운로드](https://github.com/ironsource-mobile/Flutter-SDK/tree/master/example)

[Integration Test Suite](/grow/levelplay/sdk/flutter/integration-test-suite/.md)와의 연동을 확인합니다.

## 다음 단계##next-steps

추가 인터스티셜 광고 광고 네트워크를 연동하거나 추가 광고 형식을 설정 연동 가이드를 따르십시오.

* [Mediation Networks 추가](/grow/levelplay/sdk/flutter/mediation-networks.md)
* [보상형 광고](/grow/levelplay/sdk/flutter/rewarded-ads-integration.md)
* [인터스티셜 광고](/grow/levelplay/sdk/flutter/interstitial-integration.md)
* [배너 광고](/grow/levelplay/sdk/flutter/banner-integration.md)