---
description: iOS 하이브리드 환경에서 AdFit Web SDK 연동을 위한 가이드입니다.
---

# iOS

## 0. AdFit SDK 연동

AdFit 광고 송출을 위해서는 우선 AdFit iOS SDK 연동이 필요합니다.



SPM(Swift Package Manager), CocoaPod 과 같은 의존성 라이브러리를 이용한 설치 방법과 수동으로 직접 라이브러리를 추가하는 방식이 있습니다.

### [1. SPM을 통한 설치](https://adfit.github.io/adfit-ios-sdk/documentation/adfitsdk/install/#1-SPM%EC%9D%84-%ED%86%B5%ED%95%9C-%EC%84%A4%EC%B9%98) <a href="#id-1-spm-ec-9d-84-ed-86-b5-ed-95-9c-ec-84-a4-ec-b9-98" id="id-1-spm-ec-9d-84-ed-86-b5-ed-95-9c-ec-84-a4-ec-b9-98"></a>

* Project > Package Dependencies 탭 이동
* 버튼 클릭 후 ‘https://github.com/adfit/adfit-spm.git’ 주소 입력

### [2. Cocoapods 사용하여 설치](https://adfit.github.io/adfit-ios-sdk/documentation/adfitsdk/install/#2-Cocoapods-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%84%A4%EC%B9%98) <a href="#id-2-cocoapods-ec-82-ac-ec-9a-a9-ed-95-98-ec-97-ac-ec-84-a4-ec-b9-98" id="id-2-cocoapods-ec-82-ac-ec-9a-a9-ed-95-98-ec-97-ac-ec-84-a4-ec-b9-98"></a>

* 프로젝트의 Podfile 에 pod 추가

```
pod 'AdFitSDK'
```

* 터미널에서 pod install 명령을 실행

### [3. 수동 설치](https://adfit.github.io/adfit-ios-sdk/documentation/adfitsdk/install/#3-%EC%88%98%EB%8F%99-%EC%84%A4%EC%B9%98) <a href="#id-3-ec-88-98-eb-8f-99-ec-84-a4-ec-b9-98" id="id-3-ec-88-98-eb-8f-99-ec-84-a4-ec-b9-98"></a>

* AdFitSDK를 [다운로드](https://github.com/adfit/adfit-ios-sdk/archive/master.zip) 받습니다.
* XCFramework 폴더에서 `AdFitSDK.zip` 압축파일의 압축을 해제합니다.
* AdFitSDK.xcframework 파일을 앱 타겟의 General > Frameworks, Libraries, and Embedded Content 항목으로 끌어서 놓습니다.



## 1. WebPage 환경 설정

**1.1 스크립트 설치**

스크립트 설치는 페이지 내에 다른 리소스에 영향을 주지 않도록 페이지 맨 하단에 `</body>` 부분 바로 위에 설치하는 것이 좋습니다.

이때, 설치하고자 하는 페이지에 따라 설정 방법이 달라질 수 있습니다.

```
<script async type="text/javascript" charset="utf-8" src="https://t1.daumcdn.net/kas/static/ba.min.js">
```



**1.2 기본적인 광고 스크립트 설정**

광고를 노출할 페이지에 다음과 같은 광고 설정 스크립트를 삽입합니다.

광고 스크립트 안에 담긴 광고단위 정보는 변경해서 설치해서는 안됩니다.

코드를 수정해서 설치할 경우 광고 요청에 실패하거나 잘못된 광고 요청으로 처리될 수 있습니다.

```html
<ins class="kakao_ad_area" style="display:none;width:100%;"
 data-ad-unit    = "광고단위ID"
 data-ad-width   = "광고단위 가로 사이즈"
 data-ad-height  = "광고단위 세로 사이즈"></ins>
<script async type="text/javascript" charset="utf-8" src="https://t1.daumcdn.net/kas/static/ba.min.js"></script>
```



**1.3  No-Ad 콜백 설정하기**

광고 요청이 실패하거나 노출할 광고가 없는 경우에 이를 제어하도록 NO-AD 콜백 함수를 설정할 수 있습니다. 애드팝콘 SSP 사업팀을 통해 발급받은 AdFit 코드를 아래와 같이 Callback 함수 요소를 추가하여 설정할 수 있습니다.

```html
<ins ...
 data-ad-onfail   = "callBackFunc" // NO-AD시 실행될 Callback 함수명
 ... ></ins>

<script type="text/javascript">
 function callBackFunc(arg1) {
   /*
    * TODO: 기능 구현
    */
 }
</script>
```

Callback 함수 실행시 ins 태그 객체를 첫 번째 인자(arg1)로 전달 받습니다. 또한 한 페이지 내 2개 이상의 광고단위 설치 시 Callback 메서드 명을 달리 해야 합니다.



**1.4 예시 (외부 광고 스크립트를 삽입하는 경우)**

외부 광고 스크립트를 삽입하는 경우 동일한 사이즈의 외부 광고를 사용하여야 합니다.

(예시. Google AdSense 코드. 외부 광고 코드 유형은 반드시 “비동기” 방식을 사용하여야 합니다.)

```html
<html>
<head>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   
<script type="text/javascript">
function callBackFunc(elm) {  
    text = [];  
    text.push('<ins class="adsbygoogle"');  
    text.push('style="display:inline-block;width:250px;height:250px"');  
    text.push('data-ad-client="ca-pub-7893835816116192"');  
    text.push('data-ad-slot="5918517081"></ins>');  
   
    elm.innerHTML = text.join(' ');  
    (adsbygoogle = window.adsbygoogle || []).push({});  
}  
</script>
</head>
<body>
    <ins class="kakao_ad_area" style="display:none;"  
            data-ad-unit="ADUNIT_ID"  //AdFit에서 발급 받은 광고단위코드 값  
            data-ad-width="250"  // 광고단위 가로 사이즈
            data-ad-height="250"  // 광고단위 세로 사이즈
            data-ad-onfail="callBackFunc"</ins>
   
    <script async type="text/javascript" charset="utf-8" src="https://t1.daumcdn.net/kas/static/ba.min.js">
    </script>
</body>
</html>
```



## 2. Native Side(iOS) 환경 설정

#### 2.1 WKWebView 등록하기

Hybrid SDK 연동을 위해선, 사용중인 WKWebView를 등록해 주어야 합니다.

{% tabs %}
{% tab title="Objective-C" %}
```objectivec
#import "MyViewController.h"
#import <AdFit/AdFit-Swift.h>


@implemention MyViewContrller


- (void)viewDidLoad {
    [super viewDidLoad];
    // ... 웹뷰 생성 및 웹뷰 설정
    [AdFit register:webView];
}


@end
```
{% endtab %}

{% tab title="Swift" %}
```swift
import UIKit
import AdFitSDK


class MyViewController: UIViewController {
    private let webView = WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // ... 웹뷰 생성 및 웹뷰 설정
        AdFit.register(webView)
    }
}
```
{% endtab %}
{% endtabs %}

#### 2.2 WKWebView 설정

웹뷰 내에서의 동영상 자동 재생을 위해, 아래의 옵션을 설정해줘야 합니다.

{% tabs %}
{% tab title="Objective-C" %}
```objectivec
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.mediaTypesRequiringUserActionForPlayback = [NSArray array];
configuration.allowsInlineMediaPlayback = YES;
```
{% endtab %}

{% tab title="Swift" %}
```swift
let configuration = WKWebViewConfiguration()
configuration.mediaTypesRequiringUserActionForPlayback = []
configuration.allowsInlineMediaPlayback = true
```
{% endtab %}
{% endtabs %}

#### 2.3 WKWebView  등록 해제하기

메모리에서 해제시키길 원할 경우, WKWebView의 등록을 반드시 해제시켜줘야 합니다.

{% tabs %}
{% tab title="Objective-C" %}
```objectivec
#import "MyViewController.h"
#import <AdFit/AdFit-Swift.h>


@implemention MyViewContrller


- (void)dealloc {
    [AdFit unRegister:webView];
}


@end
```
{% endtab %}

{% tab title="Swift" %}
```swift
import UIKit
import AdFitSDK


class MyViewController: UIViewController {
    private let webView = WKWebView!
    
    deinit {
        AdFit.unRegister(webView)
    }
}
```
{% endtab %}
{% endtabs %}

2.4 동영상 자동 재생 여부

비디오가 포함된 광고의 재생 정책을 설정합니다.

{% tabs %}
{% tab title="Objective-C" %}
```objectivec
// 항상 수동으로 재생. 사용자가 재생 버튼을 눌러야만 재생됩니다.
AdFit.videoPlayPolicy = AdFitVideoPlayPolicyAlwaysManualPlay;


// 항상 자동으로 재생. 비디오 영역이 화면에 노출될 때 자동으로 재생이 시작됩니다.
AdFit.videoPlayPolicy = AdFitVideoPlayPolicyAlwaysAutoPlay;


// Wi-Fi 상태인 경우에만 자동으로 재생.
AdFit.videoPlayPolicy = AdFitVideoPlayPolicyAutoPlayOnWifiOnly;
```
{% endtab %}

{% tab title="Swift" %}
```swift
// 항상 수동으로 재생. 사용자가 재생 버튼을 눌러야만 재생됩니다.
AdFit.videoPlayPolicy = .alwaysManualPlay


// 항상 자동으로 재생. 비디오 영역이 화면에 노출될 때 자동으로 재생이 시작됩니다.
AdFit.videoPlayPolicy = .alwaysAutoPlay


// Wi-Fi 상태인 경우에만 자동으로 재생.
AdFit.videoPlayPolicy = .autoPlayOnWifiOnly
```
{% endtab %}
{% endtabs %}
