# 배너 광고

### 1 : 준비

* [프로젝트 설정](/adpie/ios/project-settings.md)을 통해 광고 연동을 위한 준비를 합니다.

### 2 : SDK 초기화

* 최초 SDK 를 초기화 완료 후, 광고 요청이 가능합니다.
* [사이트](http://my.adpies.com)에서 발급받은 `Media ID`를 입력합니다.

{% tabs %}
{% tab title="Swift" %}

```swift
import UIKit
import AdPieSDK
import AppTrackingTransparency

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    func application(_ application: UIApplication, 
        didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool 
    {
        return true
    }

    func applicationDidBecomeActive(_ application: UIApplication) {

        func initializeSDK() {
            AdPieSDK.sharedInstance().initWithMediaId("YOUR_MEDIA_ID")
        }
    
        if #available(iOS 14.5, *) {
            ATTrackingManager.requestTrackingAuthorization { _ in
                initializeSDK()
            }
        } else {
            initializeSDK()
        }
    }
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
// AppDelegate.m
#import "AppDelegate.h"
#import <AdPieSDK/AdPieSDK.h>
#import <AppTrackingTransparency/AppTrackingTransparency.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application 
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{
    return YES;
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
    if (@available(iOS 14.5, *)) {
        [ATTrackingManager requestTrackingAuthorizationWithCompletionHandler:^(_){
            [self initializeSDK];
        }];
    } else {
        [self initializeSDK];
    }
}

- (void)initializeSDK {
    [[AdPieSDK sharedInstance] initWithMediaId:@"YOUR_MEDIA_ID_HERE"];
}

@end
```

{% endtab %}
{% endtabs %}

### 3 : 광고뷰 생성

* 띠배너 생성시 가로의 크기는 320 이상, 세로의 크기는 50으로 생성합니다. (가로는 디바이스 전체 너비를 추천합니다.)
* 띠배너의 경우 320 사이즈의 이미지로 가운데에 채워지고 나머지는 배경색으로 채워집니다.

#### 1. 프로그램 코드를 통한 생성

{% tabs %}
{% tab title="Swift" %}

```swift
// ViewController.swift
import UIKit
import AdPieSDK

class BannerAdViewContoller: UIViewController, APAdViewDelegate {

    var adView: APAdView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 세로는 50으로 고정
        adView.rootViewController = self
        adView.delegate = self
        view.addSubview(adView)
        adView.translatesAutoresizingMaskIntoConstraints = false
        let safeAreaGuide = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            adView.bottomAnchor.constraint(equalTo: safeAreaGuide.bottomAnchor),
            adView.leadingAnchor.constraint(equalTo: safeAreaGuide.leadingAnchor),
            adView.trailingAnchor.constraint(equalTo: safeAreaGuide.trailingAnchor),
            adView.heightAnchor.constraint(equalToConstant: 50)
        ])
    }
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
// ViewController.h
#import <UIKit/UIKit.h>
#import <AdPieSDK/AdPieSDK.h>

@interface ViewController : UIViewController <APAdViewDelegate>
@property APAdView *adView;
@end

// ViewController.m
- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 오토 레이아웃, 세로는 50으로 고정
    [self.view addSubview:self.adView];
    self.adView.translatesAutoresizingMaskIntoConstraints = NO;
    UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
    [NSLayoutConstraint activateConstraints:@[
        [self.adView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor],
        [self.adView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor constant:10],
        [self.adView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor constant:-10],
        [self.adView.heightAnchor constraintEqualToConstant:50]
    ]];
}
```

{% endtab %}
{% endtabs %}

#### 2. 인터페이스 빌더(스토리 보드)를 통한 생성

1. `ViewController`에 `AdPie` 라이브러리를 임포트하고, `APAdViewDelegate`프로토콜을 도입(adopt)합니다.

{% tabs %}
{% tab title="Swift" %}

```swift
// ViewController.swift
import UIKit
import AdPieSDK

class ViewController: UIViewController, APAdViewDelegate {

}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
// ViewController.h
#import <UIKit/UIKit.h>
#import <AdPieSDK/AdPieSDK.h>

@interface ViewController : UIViewController <APAdViewDelegate>
@end
```

{% endtab %}
{% endtabs %}

2. 스토리 보드 파일에서 배너 광고를 표시할 UIView를 추가하고, Custom Class을 `APAdView`로 변경합니다.

<figure><img src="/files/eI68FWP8wmc2sCg61ROX" alt=""><figcaption></figcaption></figure>

2. 광고 뷰의 제약(Constraints)을 설정합니다.

* Ad View Width = Superview\.Width
* Ad View Height = 50,
* Ad View Center X = Superview\.Center X
* Ad View Bottom = Bottom Layout Top

<figure><img src="/files/snhsP2E2dPD7vA8sxq7K" alt=""><figcaption></figcaption></figure>

4. 광고 뷰(UIView)를 노출 될 ViewController에 드래그하여 프로퍼티(IBOutlet)로 연결합니다.

{% tabs %}
{% tab title="Swift" %}

```swift
// ViewController.swift
import UIKit
import AdPieSDK

class ViewController: UIViewController, APAdViewDelegate {
    @IBOutlet weak var adView: APAdView!
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
// ViewController.h
#import <UIKit/UIKit.h>
#import <AdPieSDK/AdPieSDK.h>

@interface ViewController : UIViewController <APAdViewDelegate>

@property (weak) IBOutlet APAdView *adView;

@end
```

{% endtab %}
{% endtabs %}

### 4 : 광고 요청과 표출

* [사이트](http://my.adpies.com)에서 발급받은 Slot ID를 입력합니다.
* 광고뷰의 RootViewController 를 등록해야 주기별로 광고 재요청을 합니다. (Refresh)
* 광고 호출에 대한 콜백이 필요한 경우 델리게이트를 등록하며, 자세한 사항은 하단을 참고합니다.

{% tabs %}
{% tab title="Swift" %}

```swift
// ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
        
    // 광고뷰에 Slot ID 입력
    adView.slotId = "YOUR_SLOT_ID_HERE"
    // 광고뷰의 RootViewController 등록 (Refresh를 위해 필요)
    adView.rootViewController = self
    // 델리게이트 등록
    adView.delegate = self
    // 광고 요청
    adView.load()
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
// ViewController.m
- (void)viewDidLoad {
    [super viewDidLoad];

    // 광고뷰에 Slot ID 입력
    self.adView.slotId = @"YOUR_SLOT_ID_HERE";
    // 광고뷰의 RootViewController 등록 (Refresh를 위해 필요)
    self.adView.rootViewController = self;
    // 델리게이트 등록
    self.adView.delegate = self;
    // 광고요청
    [self.adView load];
}
```

{% endtab %}
{% endtabs %}

### 5 : 광고 이벤트

* 광고 호출에 대한 콜백(이벤트)을 받을 수 있습니다.
* ViewController에서 `APAdViewDelegate` 프로토콜을 도입(adopt)합니다.
* 광고 뷰의 delegate 프로퍼티에 콜백(이벤트)를 수신받을 객체를 설정합니다.
* 델리게이트의 메소드 중 성공, 실패에 대한 메소드는 필수사항으로 반드시 구현해야 하며, 나머지 메소드는 필요에 따라서 구현합니다.
* [에러코드](/adpie/ios/common/errorcode.md)를 통해 광고 실패에 대한 이유를 알 수 있습니다.

{% tabs %}
{% tab title="Swift" %}

```swift
// ViewController.swift
import UIKit
import AdPieSDK

class ViewContorller: UIViewController, APAdViewDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        ...
        // 델리게이트 등록
        adView.delegate = self
    }

    // MARK: - APAdView delegates
    func adViewDidLoadAd(_ view: APAdView!) {
        // 광고 표출 성공 후 이벤트 발생
    }
    
    func adViewDidFail(toLoadAd view: APAdView!, withError error: Error!) {
        // 광고 요청 또는 표출 실패 후 이벤트 발생
        // error code : error._code
        // error message : error.localizedDescription
    }
    
    func adViewWillLeaveApplication(_ view: APAdView!) {
        // 광고 클릭 후 이벤트 발생
    }
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
// ViewController.m
@implementation ViewController

- (void)adViewDidLoadAd:(APAdView *)view {
    // 광고 표출 성공 후 이벤트 발생
}

- (void)adViewDidFailToLoadAd:(APAdView *)view withError:(NSError *)error {
    // 광고 요청 또는 표출 실패 후 이벤트 발생
    // error code : [error code]
    // error message : [error localizedDescription]
}

- (void)adViewWillLeaveApplication:(APAdView *)view {
    // 광고 클릭 후 이벤트 발생
}

@end
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://platform-business.gitbook.io/adpie/ios/integration/banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.