Web
개요
NAM 광고를 HTML Element에 연결하여 즉시 송출합니다.
기기에서 광고 ID 수집이 허용되어 있어야 광고 송출이 가능합니다.
설치
Android Native SDK
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val webView = findViewById<WebView>(R.id.wvWebView)
// Web SDK 연동하는 WebView 설정
webView.settings.apply {
javaScriptEnabled = true // 자바스크립트 활성화
domStorageEnabled = true // DOM 스토리지 활성화
}
// JavaScript Interface 추가
webView.addJavascriptInterface(
SPCWebView.SPCWebBridge(context = context, webView = webView),
SPCWebView.WEB_VIEW_BRIDGE
)
}WebVieiw 내 Javascript 및 Local storage 활성화
Javascript Interface 설정
addJavascriptInterface 함수를 이용해 AvatyeWebBridge를 설정합니다.
이후에는 Web SDK를 확인해 웹 페이지 내에 배너를 지정하여 광고를 송출할 준비를 진행합니다.
iOS Native SDK
class webSDKTestViewController: ViewController {
var webView: WKWebView = WKWebView()
var pageUrl = "test.html"
override func viewDidLoad(){
super.viewDidLoad()
// 웹뷰에 Javascript Bridge 설정
let scriptMessageHandler = AvatyeWebSDKController(rootWebView: webView)
webView.configuration.userContentController.add(scriptMessageHandler, name: "AvatyeBridge_SPC")
// 웹뷰 Delegate 설정
webView.navigationDelegate = self
// 웹뷰를 뷰에 추가
view.addSubview(webView)
// 웹 페이지 로드
if let url = URL(string: pageUrl) {
let request = URLRequest(url: url)
webView.load(request)
}
}
}
// WKWebview Delegate 구현
extension webSDKTestViewController: WKNavigationDelegate{
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
guard let url = navigationAction.request.url, url.absoluteString != "about:blank" else {
decisionHandler(.cancel)
return
}
if url.absoluteString != pageUrl {
// 웹뷰에서 사용중인 url과 다를 경우, 기본 브라우저로 오픈 처리
UIApplication.shared.open(url, options: [:]) { isSuccess in
// after open
}
decisionHandler(.cancel)
} else {
// 웹뷰 내에서 랜딩
decisionHandler(.allow)
}
}
}AvatyeWebSDKController에 rootWebView 객체를 설정 후 생성해줍니다.
AvatyeWebSDKController를 생성 후, “AvatyeBridge_SPC” 이름으로 scriptMessageHandler를 등록해줍니다.
기본브라우저에서 랜딩을 처리할 수 있도록 Delegate를 구현합니다.
이후에는 Web SDK를 확인해 웹 페이지 내에 배너를 지정하여 광고를 송출할 준비를 진행합니다.
Web SDK
<Html>
<Head>
</Head>
<body>
// 상용
<script src={'https://avatye-resources.s3.ap-northeast-2.amazonaws.com/pointhome/webSdk/spc/pointhome-{version}.min.js'} />
// 테스트
<script src={'https://avatye-resources.s3.ap-northeast-2.amazonaws.com/pointhome/webSdk/spc/pointhome-{version}-test.min.js'} />
</body>
</Html>script 태그를 <body> 태그 내부의 하단에 추가합니다.
대역별로 파일명이 구분됩니다.
상용: pointhome-1.0.4.min.js
테스트: pointhome-1.0.4-test.min.js
스크립트의 URL이 v1.0.4부터 변경되었습니다.
https://avatye-resources.s3.ap-northeast-2.amazonaws.com/pointhome/webSdk/spc/pointhome-1.0.4.min.js
(이전 레거시 파일(v1.0.4 미만)들은 기존 경로에서도 import 가능합니다.)
사용법
// 최초 initialize하여 지면 세팅에 필요한 데이터를 초기화합니다.
Pointhome.NAM.init({
pubID: '868410196', // 앱 키
eventListener: { // NAM EventListener 등록 (Optional)
onLoaded: (elementID) => {
// elementID: 광고가 등록된 elementID
console.log("onLoaded", elementID)
},
onClicked: (elementID) => {
// elementID: 광고가 등록된 elementID
console.log("onClicked", elementID)
},
onError: (elementID, stat) => {
// elementID: 광고가 등록된 elementID
// stat: 에러 코드 (0: error (invalid ad unit id, ...), 2: no ad, 3: timeout)
console.log("onError", elementID, stat)
},
},
});
// 지면 1개 세팅
Pointhome.NAM.setPlacements({
elementID: 'ph-NAM', // 광고 노출 영역 (HTML Element)의 ID
placementID: 'njsSWrFDZs3HRZK', // 지면 ID
adUnitID: 'WEB_nw_banner-N345765840', // NAM 광고 유닛 ID
onClick: (elementID, curl) => { // 지면 클릭 이벤트 (curl을 통한 랜딩 처리)
console.log("onClick", elementID, curl);
}
});
// 지면 n개 세팅 (배열 param으로 전달)
Pointhome.NAM.setPlacements([
{
elementID: 'ph-NAM',
placementID: 'njsSWrFDZs3HRZK',
adUnitID: 'WEB_nw_banner-N345765840',
onClick: (elementID, curl) => {
console.log("onClick", elementID, curl);
},
},
{
elementID: 'ph-NAM-2',
placementID: 'njsSWrFDZs3HRZK',
adUnitID: 'WEB_nw_banner-N345765840',
onClick: (elementID, curl) => {
console.log("onClick", elementID, curl);
},
},
]);
// initialize와 동시에 지면 세팅
Pointhome.NAM.init({
pubID: '868410196',
}).then(() => {
Pointhome.NAM.setPlacements({
elementID: 'ph-NAM',
placementID: 'njsSWrFDZs3HRZK',
adUnitID: 'WEB_nw_banner-N345765840',
onClick: (elementID, curl) => {
console.log("onClick", elementID, curl);
},
});
})최초에 init()을 해야 합니다.
이후 원하는 만큼 지면을 세팅할 수 있습니다.
init()은 Promise로 동작하기에 동시에 지면 세팅을 진행하고자 할 경우, then()을 이용합니다.
Function
Parameter
Require
Description
init() : 세팅 초기화
pubID(String)
O
앱 키
eventListener (Object)
onLoaded: (elementID) => {
console.log("onLoaded", elementID)
},
onClicked: (elementID) => {
console.log("onClicked", elementID)
},
onError: (elementID, stat) => {
console.log("onError", elementID, stat)
}X
이벤트 리스너 - onLoaded: NAM 로드 완료 시 밟생 - onClicked: NAM 지면 클릭 시 발생 - onError: NAM 로드 실패 시 발생
setPlacements() : 지면 세팅
elementID(String)
O
ex) ‘nam-1’
placementID(String)
O
지면 ID
adUnitID(String)
O
NAM 광고 유닛 ID
onClick (Function)
onClick: (elementID, curl) => {
console.log("onClick", elementID, curl);
}O
지면 클릭 이벤트
elementID: 앨리먼트 id curl: 랜딩 URL
지면 샘플 스크린샷
Error
code
status
message
Description
init_required
-
필수 값이 세팅되지 않았습니다.
init()을 호출하지 않은 경우 발생
required_adid_agree
-
광고 ID 수집 동의가 필요합니다.
기기 설정에 광고ID를 받아오지 않게끔 설정되어 있는 경우
request_adid_failed
-
광고 ID를 가져오는데 실패했습니다.
브릿지 통신에 실패한 경우
invalid_parameter
400
${parameter} is not defined.
필요한 파라미터를 받아오지 못한 경우(SDK 에러)
Exception
-
-
네트워크 연결 불가능 또는 분류되지 않은 에러 발생 시
Last updated