iOS

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

0. AdFit SDK 연동

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

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

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

프로젝트의 Podfile 에 pod 추가

pod 'AdFitSDK'

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

AdFitSDK를 받습니다.
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 기본적인 광고 스크립트 설정

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

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

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

<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 함수 요소를 추가하여 설정할 수 있습니다.

<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>
<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를 등록해 주어야 합니다.

#import "MyViewController.h"
#import <AdFit/AdFit-Swift.h>


@implemention MyViewContrller


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


@end

import UIKit
import AdFitSDK


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

2.2 WKWebView 설정

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

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.mediaTypesRequiringUserActionForPlayback = [NSArray array];
configuration.allowsInlineMediaPlayback = YES;

let configuration = WKWebViewConfiguration()
configuration.mediaTypesRequiringUserActionForPlayback = []
configuration.allowsInlineMediaPlayback = true

2.3 WKWebView 등록 해제하기

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

#import "MyViewController.h"
#import <AdFit/AdFit-Swift.h>


@implemention MyViewContrller


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


@end

import UIKit
import AdFitSDK


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

2.4 동영상 자동 재생 여부

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

// 항상 수동으로 재생. 사용자가 재생 버튼을 눌러야만 재생됩니다.
AdFit.videoPlayPolicy = AdFitVideoPlayPolicyAlwaysManualPlay;


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


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

// 항상 수동으로 재생. 사용자가 재생 버튼을 눌러야만 재생됩니다.
AdFit.videoPlayPolicy = .alwaysManualPlay


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


// Wi-Fi 상태인 경우에만 자동으로 재생.
AdFit.videoPlayPolicy = .autoPlayOnWifiOnly

PreviousAndroid Next테스트 코드

Last updated 5 months ago

Was this helpful?