BuzzAd-Benefit Web SDK는 광고를 웹페이지에 자연스럽게 녹아들 수 있게 자유롭게 디자인할 수 있고, 원하는 지면에 배치할 수 있으며, 리워드를 지급함으로써 매출을 극대화할 수 있는 웹 광고 SDK입니다.
본 연동 가이드는 이러한 BuzzAd-Benefit Web SDK를 웹페이지에 적용하는 방법에 대해 설명합니다.
Android와 iOS에서 추가로 해야 하는 작업은 아래의 링크를 참고하시기 바랍니다.
Child pages (Children Display) |
---|
※ 주의사항
BuzzAd-Benefit Web SDK는 현재 데스크탑/ 모바일의 일반 브라우저에서는 동작하지 않으며, 안드로이드/ 아이폰 앱에 포함된 웹뷰를 통해서 웹페이지를 보여주는 경우에 동작합니다. 이때, 안드로이드/아이폰 앱에는 BuzzAd-Benefit SDK가 적용되어 있어야 합니다.
안드로이드의 경우 TLS 1.2가 지원되지 않는 OS 4.4.2 미만의 버전에서는 Web SDK가 작동하지 않으며, 아이폰의 경우 WKWebView만 지원합니다.
목차
Table of Contents | ||
---|---|---|
|
준비 사항
SDK를 앱에 연동하기 전, 아래 사항을 먼저 준비해야 합니다.
광고가 표시될 웹페이지를 웹뷰를 통해 보여주는 매체사의 안드로이드/ 아이폰 앱
BD 매니저를 통해 전달받은 OS 별 APP_ID 및 UNIT_ID
매체사의 안드로이드/ 아이폰 앱에 웹 SDK 지원을 위한 연동
Buzzvil 서버로부터 포인트 적립 요청을 받을 수 있는 매체사 API 서버 - 포스트백 연동 가이드
Postback 수신 url 세팅 후 Buzzvil BD 매니저에게 전달
설치
Tip |
---|
자세한 구현 사항은 샘플 코드에서 확인할 수 있습니다. |
웹페이지에 웹 SDK를 삽입해야 합니다.
https://buzz-js.buzzvil.com/buzzad-benefit-sdk/1.3.1/buzzad-benefit-sdk.js
을 입력하세요.
Code Block | ||
---|---|---|
| ||
<script src="https://buzz-js.buzzvil.com/buzzad-benefit-sdk/1.3.1/buzzad-benefit-sdk.js">
</script> |
SDK 스크립트의 로드가 완료되면 전역 변수로
BuzzAdBenefit
객체가 생성됩니다. 이 객체가 생성되었는지 체크하는 것으로, SDK 초기화 코드를 실행할지 여부를 결정할 수 있습니다.
Code Block | ||
---|---|---|
| ||
(function() {
if (window.BuzzAdBenefit) {
// SDK 설정
}
})(); |
SDK 초기화
초기화 과정에는 OS 별 앱을 구분하기 위해 APP_ID를 설정합니다. 이 코드는 광고 요청 전, 반드시 1회만 호출해야 합니다. 이후 모든 광고 요청 및 동작은 지정된 APP_ID 로 이루어지게 됩니다.
자바 스크립트는 페이지가 바뀌거나 새롭게 로드되는 경우와 같은, 페이지 전환 시 이전 환경이 유지되지 않습니다. 따라서 광고가 연동된 각각의 모든 웹페이지에서 초기화 코드를 호출해야 합니다.
BuzzAdBenefit
초기화
광고를 요청하기 전, SDK를 초기화하는 코드를 호출해야 합니다. 아래의 예제 코드를 이용하여 플랫폼 별로 다른 APP ID를 적용할 수 있습니다.
YOUR_OS_APP_ID (
ANDROID_APP_ID
,IOS_APP_ID
) 부분에 위 단계에서 준비한 APP_ID를 삽입
Code Block | ||
---|---|---|
| ||
function getAppId() {
var ANDROID_APP_ID = '0123456789';
var IOS_APP_ID = '9876543210';
switch(BuzzAdBenefit.platform) {
case 'android':
return ANDROID_APP_ID;
case 'ios':
return IOS_APP_ID;
default:
// not supported platform
}
}
BuzzAdBenefit.init({
appId: getAppId()
}); |
...
지면은 광고를 보여줄 영역을 이야기합니다. 한 웹페이지에는 여러 개의 지면이 존재할 수 있습니다. 각각의 지면은 UNIT_ID로 구분합니다. 다음은 지면의 위치를 결정하고, 해당 지면에 광고를 보여주는 과정입니다.
Step 1: 광고 지면 결정
먼저 광고를 보여줄 영역에 대한 문서 객체 모델(DOM)을 정합니다.
예를 들어, 3개의 포스트가 배열된 목록에서 첫 번째와 두 번째 포스트 사이에 광고를 보여주려 하는 경우, 두 번째 li
블럭이 광고 지면이 됩니다. JS 코드에서 접근하기 편하도록 placement1
을 ID로 부여하고, 앞으로 광고가 보일 이 문서 객체 모델은 광고 지면이라는 의미의 placementView라 정의합니다.
Code Block | ||
---|---|---|
| ||
<ul>
<li>
<!-- post 1 -->
</li>
<li class="post native-ad" id="placement1" style="display: none">
<!-- 광고 지면. 내부는 추후 단계에서 구현 -->
</li>
<li>
<!-- post 2 -->
</li>
<li>
<!-- post 3 -->
</li>
</ul> |
Step 2: Benefit 로그인 상태 확인
광고 요청에 앞서, 사용자의 정보(ID, 성별, 나이)등으로 Benefit 서버에 로그인을 해야 합니다. 아래 두 가지 방법으로 가능합니다.
AOS SDK 또는 iOS SDK에서 BuzzAdBenefit에 UserProfile을 먼저 설정한 뒤, 웹페이지를 열면 자바스크립트에서 정보를 가져와 Benefit 서버에 로그인합니다.
웹에서 로그인을 구현하는 경우, BuzzAdBenefit 객체에 직접 UserProfile을 설정합니다. (해당 가이드 ‘심화기능' - '웹페이지에서 사용자의 프로필 정보 설정’ 참고)
다음의 API를 사용할 경우, 로그인이 완료되었을 때 특정 동작(예: 광고 요청)을 실행합니다.
Code Block |
---|
BuzzAdBenefit.ensureAuthenticated
.then(function() => {
// Benefit 로그인 완료. 광고 요청 가능
}).catch(function(e) => {
// 에러 발생. 광고 요청 불가능
}); |
발생 가능한 에러에 대해서는 Benefit JS SDK 에러 처리 가이드 를 참고
Step 3: YOUR_UNIT_ID
로 광고 요청
준비 사항의 UNIT_ID를
loadAd()
에 전달하여 광고를 요청합니다. 이 때, 지원하는 플랫폼에 맞는 UNIT_ID를 설정해야 합니다.YOUR_OS_UNIT_ID 부분에 준비한 UNIT_ID를 삽입
광고를 요청하는 플랫폼에 대해 UNIT_ID를 설정하지 않은 경우, 광고를 요청하면
INVALID_PARAMETERS: Check your UNIT ID
라는 에러 메시지가 나오며 광고를 로드하지 않습니다.unitId.android
값이 없으면 안드로이드 웹뷰에서 해당 웹페이지를 열어도 광고를 표시하지 않습니다.unitId.ios
값이 없으면 iOS 웹뷰에서 해당 웹페이지를 열어도 광고를 표시하지 않습니다.
성공 시에는 1개의 NativeAd 객체를 얻을 수 있고, 실패 시에는 에러의 원인에 대한 메시지를 포함한 에러를 얻을 수 있습니다.
Code Block | ||
---|---|---|
| ||
BuzzAdBenefit.ensureAuthenticated
.then(() => {
return BuzzAdBenefit.loadAd({
unitId: {
android: 'YOUR_ANDROID_UNIT_ID', // 안드로이드 앱에서는 광고를 요청하지 않는 경우 생략 가능
ios: 'YOUR_IOS_UNIT_ID', // 아이폰 앱에서는 광고를 요청하지 않는 경우 생략 가능
}
});
}).then((nativeAd) => {
console.log('An ad is loaded!');
populateAd(nativeAd); // 광고 표시
}).catch((e) => {
if (e.message === 'EMPTY_RESPONSE') {
console.log('NO FILL');
} else {
console.error('An error is detected while loading ad: ' + e.message);
}
hideAd();
}); |
발생 가능한 에러에 대해서는 Benefit JS SDK 에러 처리 가이드 를 참고
Step 4: 받아온 광고를 사용하기 위한 등록
loadAd()
를 통해 얻은 NativeAd 객체를 사용하는 경우, SDK에 NativeAd 객체를 관리하는데 필요한 추가 정보를 등록해야 합니다.
Code Block | ||
---|---|---|
| ||
BuzzAdBenefit.registerNativeAd(nativeAd, placementView, adListener); |
nativeAd
: 앞으로 사용하는 NativeAd 객체placementView
: 광고를 표시할 영역의 문서 객체 모델(DOM)adListener
: 광고의 여러 상태에 맞게 정의된 콜백들의 객체. 콜백의 자세한 정의 및 동작은 광고 이벤트 콜백 & 기타 API 가이드를 참고하세요.
위 API를 사용하기 위한 파라미터 등은 아래의 코드에서 확인할 수 있습니다.
Code Block | ||
---|---|---|
| ||
function populateAd(nativeAd) {
const adListener = {
onImpressed: function(placementView, nativeAd) {
console.log('ON IMPRESSED: The ad is impressed.');
},
onClicked: function(placementView, nativeAd) {
console.log('ON CLICKED: The ad is clicked.');
},
onRewardRequested: function(placementView, nativeAd) {
console.log('ON REWARD REQUESTED: Reward is requested.');
},
onRewarded: function(placementView, nativeAd, result) {
console.log('ON REWARDED: The result of Reward: ' + result);
},
onParticipated: function(placementView, nativeAd) {
console.log('ON PARTICIPATED: The ad is set to particiated.');
updateCtaView(element.getElementsByClassName('cta')[0], nativeAd); // 아래에서 설명
},
onVideoError: function(placementView, nativeAd, errorCode, errorMessage) {
console.error('ON VIDEO ERROR: An error is detected: ' + errorCode + '\n' + errorMessage);
},
};
const placementView = document.getElementById('placement1');
BuzzAdBenefit.registerNativeAd(nativeAd, placementView, adListener);
renderAd(placementView, nativeAd); // 광고 구성요소를 DOM에 추가하여 화면에 표시
} |
발생 가능한 에러에 대해서는 Benefit JS SDK 에러 처리 가이드 를 참고
Expand | ||
---|---|---|
| ||
|
...
광고 레이아웃을 구성하는 정보와 UI에 대해서는 아래의 표를 참고하세요.
...
구성 요소
...
설명
...
MediaView
Status | ||||
---|---|---|---|---|
|
...
광고 소재의 종류에 따라 이미지나 동영상 플레이어가 삽입되는 영역입니다.
사이즈: 1200 x 627 (px) (광고 소재의 종횡비는 방드시 유지해야 합니다.)
여백을 추가할 수 있습니다. 자세한 내용은 버즈빌 매니저에게 문의하세요.
SDK는 PlacementView의 자식 중에서
buzz-mediaview
클래스를 가진 첫 번째 문서 객체 모델을 찾아 MediaView로 설정합니다.MediaView에 설정한 아래의 CSS 속성은, 편의를 위해 이미지나 비디오 플레이어가 자동으로 상속 받아 적용합니다.
border-radius
height
max-width
width
...
title
Status | ||||
---|---|---|---|---|
|
...
광고의 제목입니다. 최대 10자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다.
...
description
Status | ||||
---|---|---|---|---|
|
...
광고에 대한 상세 설명입니다. 최대 40자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다.
...
CTA view
Status | ||||
---|---|---|---|---|
|
...
광고의 액션 시 지급되는 포인트와 액션을 유도하는 문구입니다. 최대 7자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다.
...
iconUrl
Status | ||||
---|---|---|---|---|
|
...
광고주 아이콘 이미지입니다. 아이콘의 종횡비는 반드시 유지해야 합니다.
사이즈: 80 x 80 (px)
광고 객체(NativeAd
)는 native-ad
를 클래스로 지정한 태그의 하위에 아래 구조에 맞게 구성해야 합니다.
다음은 PlacementView DOM의 예시입니다.
Code Block | ||
---|---|---|
| ||
<li class="post native-ad" id="placement1" style="display: none">
<div class="buzz-mediaview clickable">
</div>
<div class="info">
<div class="icon-wrapper clickable">
<img class="icon">
</div>
<h5 class="title clickable"></h5>
</div>
<div class="description">
</div>
<div class="button-wrapper">
<button class="cta clickable"></button>
</div>
</li> |
다음은 광고를 화면에 표시하거나 숨기는 JavaScript 코드 예시입니다.
Code Block | ||
---|---|---|
| ||
function renderAd(placementView, nativeAd) {
placementView.style.display = '';
placementView.getElementsByClassName('icon')[0].setAttribute('src', nativeAd.iconUrl);
placementView.getElementsByClassName('title')[0].innerHTML = nativeAd.title;
placementView.getElementsByClassName('description')[0].innerHTML = nativeAd.description;
updateCtaView(placementView.getElementsByClassName('cta')[0], nativeAd);
}
function hideAd() {
const placementView = document.getElementById('placement1');
placementView.style.display = 'none';
} |
Step 6: 피드(Feed) 연동하기
Web에 버튼을 구현한 후, Android 에서 구현 혹은 iOS 에서 구현을 참조하여 각각의 플랫폼에서 Feed 지면을 표시하세요.
준비
우선 WebView에서 Feed 지면을 표시하기 위한 버튼을 구현합니다.
Code Block |
---|
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>TEST</title>
</head>
<body>
<input type='button' onClick='showFeed()' value='show feed' />
<script type='text/javascript'>
const showFeed = () => {
var userAgent = navigator.userAgent;
if (/android/i.test(userAgent)) {
BuzzAdBenefitJSBridge.showFeed()
}
if (/iPad|iPhone|iPod/.test(userAgent)) {
webkit.messageHandlers.BuzzAdBenefitJSBridge.postMessage('showFeed')
}
}
</script>
</body>
</html> |
Android 에서 구현
Step 1. interface 정의
Code Block |
---|
public interface BuzzAdBenefitJSBridge {
void showFeed();
} |
Step 2. JavascriptInterface 추가 및 showFeed 구현
Code Block |
---|
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import com.buzzvil.buzzad.benefit.presentation.feed.BuzzAdFeed
public class WebToFeedActivity extends AppCompatActivity implements BuzzAdBenefitJSBridge {
private WebView webView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_activity_web_to_feed);
webView = findViewById(R.id.your_web_view);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setUseWideViewPort(true);
webView.addJavascriptInterface(this, "BuzzAdBenefitJSBridge");
webView.loadUrl("YOUR_URL");
}
@Override
@JavascriptInterface
public void showFeed() {
new Handler().post(new Runnable() {
@Override
public void run() {
new BuzzAdFeed.Builder().build().show(WebToFeedActivity.this);
}
});
}
} |
위 예제가 구현된 샘플앱은 아래 링크에서 확인할 수 있습니다.
https://github.com/Buzzvil/buzz-sdk-samples/tree/master/buzzad-benefit
iOS 에서 구현
Step 1. interface 정의
Code Block |
---|
@import UIKit;
NS_ASSUME_NONNULL_BEGIN
@interface WebToFeedViewController : UIViewController
@end
NS_ASSUME_NONNULL_END
|
Step 2. ScriptMessageHandler 추가 및 showFeed 메시지 처리 로직 구현
Code Block |
---|
#import "WebToFeedViewController.h"
@import WebKit;
@import BuzzAdBenefit;
@interface WebToFeedViewController () <WKScriptMessageHandler>
@property (strong, nonatomic, readwrite) WKWebView *webView;
@end
@implementation WebToFeedViewController
- (void)viewDidLoad {
[super viewDidLoad];
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKUserContentController *contentController = [[WKUserContentController alloc] init];
[contentController addScriptMessageHandler:self name:@"BuzzAdBenefitJSBridge"];
config.userContentController = contentController;
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
NSURL *url = [NSURL URLWithString:@"YOUR_URL"];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
[_webView loadRequest:urlRequest];
[self.view addSubview:_webView];
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.body isEqualToString:@"showFeed"]) {
// Show Feed
BZVBuzzAdFeed *buzzAdFeed = [BZVBuzzAdFeed feedWithBlock:^(BZVBuzzAdFeedBuilder * _Nonnull builder) {
builder.config = [BZVFeedConfig configWithBlock:^(BZVFeedConfigBuilder * _Nonnull builder) {
builder.unitId = @"YOUR_FEED_UNIT_ID";
}];
}];
BZVFeedViewController *feedViewController = [buzzAdFeed viewController];
[self presentViewController:feedViewController animated:YES completion:nil];
}
}
@end |
위 예제가 구현된 샘플앱은 아래 링크에서 확인할 수 있습니다.
https://github.com/Buzzvil/buzz-sdk-samples/tree/master/buzzad-benefit-iosBuzzAd-Benefit Web SDK는 광고를 웹페이지에 자연스럽게 녹아들 수 있게 자유롭게 디자인할 수 있고, 원하는 지면에 배치할 수 있으며, 리워드를 지급함으로써 매출을 극대화할 수 있는 웹 광고 SDK입니다.
본 연동 가이드는 이러한 BuzzAd-Benefit Web SDK를 웹페이지에 적용하는 방법에 대해 설명합니다.
Android와 iOS에서 추가로 해야 하는 작업은 아래의 링크를 참고하시기 바랍니다.
Child pages (Children Display) |
---|
※ 주의사항
BuzzAd-Benefit Web SDK는 현재 데스크탑/ 모바일의 일반 브라우저에서는 동작하지 않으며, 안드로이드/ 아이폰 앱에 포함된 웹뷰를 통해서 웹페이지를 보여주는 경우에 동작합니다. 이때, 안드로이드/아이폰 앱에는 BuzzAd-Benefit SDK가 적용되어 있어야 합니다.
안드로이드의 경우 TLS 1.2가 지원되지 않는 OS 4.4.2 미만의 버전에서는 Web SDK가 작동하지 않으며, 아이폰의 경우 WKWebView만 지원합니다.
목차
Table of Contents | ||
---|---|---|
|
준비 사항
...
SDK를 앱에 연동하기 전, 아래 사항을 먼저 준비해야 합니다.
광고가 표시될 웹페이지를 웹뷰를 통해 보여주는 매체사의 안드로이드/ 아이폰 앱
BD 매니저를 통해 전달받은 OS 별 APP_ID 및 UNIT_ID
매체사의 안드로이드/ 아이폰 앱에 웹 SDK 지원을 위한 연동
Buzzvil 서버로부터 포인트 적립 요청을 받을 수 있는 매체사 API 서버 - 포스트백 연동 가이드
Postback 수신 url 세팅 후 Buzzvil BD 매니저에게 전달
설치
...
Tip |
---|
자세한 구현 사항은 샘플 코드에서 확인할 수 있습니다. |
웹페이지에 웹 SDK를 삽입해야 합니다.
https://buzz-js.buzzvil.com/buzzad-benefit-sdk/1.3.1/buzzad-benefit-sdk.js
을 입력하세요.
Code Block | ||
---|---|---|
| ||
<script src="https://buzz-js.buzzvil.com/buzzad-benefit-sdk/1.3.1/buzzad-benefit-sdk.js">
</script> |
SDK 스크립트의 로드가 완료되면 전역 변수로
BuzzAdBenefit
객체가 생성됩니다. 이 객체가 생성되었는지 체크하는 것으로, SDK 초기화 코드를 실행할지 여부를 결정할 수 있습니다.
Code Block | ||
---|---|---|
| ||
(function() {
if (window.BuzzAdBenefit) {
// SDK 설정
}
})(); |
SDK 초기화
...
초기화 과정에는 OS 별 앱을 구분하기 위해 APP_ID를 설정합니다. 이 코드는 광고 요청 전, 반드시 1회만 호출해야 합니다. 이후 모든 광고 요청 및 동작은 지정된 APP_ID 로 이루어지게 됩니다.
자바 스크립트는 페이지가 바뀌거나 새롭게 로드되는 경우와 같은, 페이지 전환 시 이전 환경이 유지되지 않습니다. 따라서 광고가 연동된 각각의 모든 웹페이지에서 초기화 코드를 호출해야 합니다.
BuzzAdBenefit
초기화
광고를 요청하기 전, SDK를 초기화하는 코드를 호출해야 합니다. 아래의 예제 코드를 이용하여 플랫폼 별로 다른 APP ID를 적용할 수 있습니다.
YOUR_OS_APP_ID (
ANDROID_APP_ID
,IOS_APP_ID
) 부분에 위 단계에서 준비한 APP_ID를 삽입
Code Block | ||
---|---|---|
| ||
function getAppId() {
var ANDROID_APP_ID = '0123456789';
var IOS_APP_ID = '9876543210';
switch(BuzzAdBenefit.platform) {
case 'android':
return ANDROID_APP_ID;
case 'ios':
return IOS_APP_ID;
default:
// not supported platform
}
}
BuzzAdBenefit.init({
appId: getAppId()
}); |
광고 요청 및 처리
...
지면은 광고를 보여줄 영역을 이야기합니다. 한 웹페이지에는 여러 개의 지면이 존재할 수 있습니다. 각각의 지면은 UNIT_ID로 구분합니다. 다음은 지면의 위치를 결정하고, 해당 지면에 광고를 보여주는 과정입니다.
Step 1: 광고 지면 결정
먼저 광고를 보여줄 영역에 대한 문서 객체 모델(DOM)을 정합니다.
예를 들어, 3개의 포스트가 배열된 목록에서 첫 번째와 두 번째 포스트 사이에 광고를 보여주려 하는 경우, 두 번째 li
블럭이 광고 지면이 됩니다. JS 코드에서 접근하기 편하도록 placement1
을 ID로 부여하고, 앞으로 광고가 보일 이 문서 객체 모델은 광고 지면이라는 의미의 placementView라 정의합니다.
Code Block | ||
---|---|---|
| ||
<ul>
<li>
<!-- post 1 -->
</li>
<li class="post native-ad" id="placement1" style="display: none">
<!-- 광고 지면. 내부는 추후 단계에서 구현 -->
</li>
<li>
<!-- post 2 -->
</li>
<li>
<!-- post 3 -->
</li>
</ul> |
Step 2: Benefit 로그인 상태 확인
광고 요청에 앞서, 사용자의 정보(ID, 성별, 나이)등으로 Benefit 서버에 로그인을 해야 합니다. 아래 두 가지 방법으로 가능합니다.
AOS SDK 또는 iOS SDK에서 BuzzAdBenefit에 UserProfile을 먼저 설정한 뒤, 웹페이지를 열면 자바스크립트에서 정보를 가져와 Benefit 서버에 로그인합니다.
웹에서 로그인을 구현하는 경우, BuzzAdBenefit 객체에 직접 UserProfile을 설정합니다. (해당 가이드 ‘심화기능' - '웹페이지에서 사용자의 프로필 정보 설정’ 참고)
다음의 API를 사용할 경우, 로그인이 완료되었을 때 특정 동작(예: 광고 요청)을 실행합니다.
Code Block |
---|
BuzzAdBenefit.ensureAuthenticated
.then(function() => {
// Benefit 로그인 완료. 광고 요청 가능
}).catch(function(e) => {
// 에러 발생. 광고 요청 불가능
}); |
발생 가능한 에러에 대해서는 Benefit JS SDK 에러 처리 가이드 를 참고
Step 3: YOUR_UNIT_ID
로 광고 요청
준비 사항의 UNIT_ID를
loadAd()
에 전달하여 광고를 요청합니다. 이 때, 지원하는 플랫폼에 맞는 UNIT_ID를 설정해야 합니다.YOUR_OS_UNIT_ID 부분에 준비한 UNIT_ID를 삽입
광고를 요청하는 플랫폼에 대해 UNIT_ID를 설정하지 않은 경우, 광고를 요청하면
INVALID_PARAMETERS: Check your UNIT ID
라는 에러 메시지가 나오며 광고를 로드하지 않습니다.unitId.android
값이 없으면 안드로이드 웹뷰에서 해당 웹페이지를 열어도 광고를 표시하지 않습니다.unitId.ios
값이 없으면 iOS 웹뷰에서 해당 웹페이지를 열어도 광고를 표시하지 않습니다.
성공 시에는 1개의 NativeAd 객체를 얻을 수 있고, 실패 시에는 에러의 원인에 대한 메시지를 포함한 에러를 얻을 수 있습니다.
Code Block | ||
---|---|---|
| ||
BuzzAdBenefit.ensureAuthenticated
.then(() => {
return BuzzAdBenefit.loadAd({
unitId: {
android: 'YOUR_ANDROID_UNIT_ID', // 안드로이드 앱에서는 광고를 요청하지 않는 경우 생략 가능
ios: 'YOUR_IOS_UNIT_ID', // 아이폰 앱에서는 광고를 요청하지 않는 경우 생략 가능
}
});
}).then((nativeAd) => {
console.log('An ad is loaded!');
populateAd(nativeAd); // 광고 표시
}).catch((e) => {
if (e.message === 'EMPTY_RESPONSE') {
console.log('NO FILL');
} else {
console.error('An error is detected while loading ad: ' + e.message);
}
hideAd();
}); |
발생 가능한 에러에 대해서는 Benefit JS SDK 에러 처리 가이드 를 참고
Step 4: 받아온 광고를 사용하기 위한 등록
loadAd()
를 통해 얻은 NativeAd 객체를 사용하는 경우, SDK에 NativeAd 객체를 관리하는데 필요한 추가 정보를 등록해야 합니다.
Code Block | ||
---|---|---|
| ||
BuzzAdBenefit.registerNativeAd(nativeAd, placementView, adListener); |
nativeAd
: 앞으로 사용하는 NativeAd 객체placementView
: 광고를 표시할 영역의 문서 객체 모델(DOM)adListener
: 광고의 여러 상태에 맞게 정의된 콜백들의 객체. 콜백의 자세한 정의 및 동작은 광고 이벤트 콜백 & 기타 API 가이드를 참고하세요.
위 API를 사용하기 위한 파라미터 등은 아래의 코드에서 확인할 수 있습니다.
Code Block | ||
---|---|---|
| ||
function populateAd(nativeAd) {
const adListener = {
onImpressed: function(placementView, nativeAd) {
console.log('ON IMPRESSED: The ad is impressed.');
},
onClicked: function(placementView, nativeAd) {
console.log('ON CLICKED: The ad is clicked.');
},
onRewardRequested: function(placementView, nativeAd) {
console.log('ON REWARD REQUESTED: Reward is requested.');
},
onRewarded: function(placementView, nativeAd, result) {
console.log('ON REWARDED: The result of Reward: ' + result);
},
onParticipated: function(placementView, nativeAd) {
console.log('ON PARTICIPATED: The ad is set to particiated.');
updateCtaView(element.getElementsByClassName('cta')[0], nativeAd); // 아래에서 설명
},
onVideoError: function(placementView, nativeAd, errorCode, errorMessage) {
console.error('ON VIDEO ERROR: An error is detected: ' + errorCode + '\n' + errorMessage);
},
};
const placementView = document.getElementById('placement1');
BuzzAdBenefit.registerNativeAd(nativeAd, placementView, adListener);
renderAd(placementView, nativeAd); // 광고 구성요소를 DOM에 추가하여 화면에 표시
} |
발생 가능한 에러에 대해서는 Benefit JS SDK 에러 처리 가이드 를 참고
Expand | ||
---|---|---|
| ||
|
Step 5: 광고 레이아웃 구성하기
광고 레이아웃을 구성하는 정보와 UI에 대해서는 아래의 표를 참고하세요.
구성 요소 | 설명 | ||||||
---|---|---|---|---|---|---|---|
MediaView
|
| ||||||
title
| 광고의 제목입니다. 최대 10자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다. | ||||||
description
| 광고에 대한 상세 설명입니다. 최대 40자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다. | ||||||
CTA view
| 광고의 액션 시 지급되는 포인트와 액션을 유도하는 문구입니다. 최대 7자까지 권장하며, 필요에 따라 글자 수에 상관 없이 일정 부분은 생략 부호도 대체할 수 있습니다. | ||||||
iconUrl
|
|
광고 객체(NativeAd
)는 native-ad
를 클래스로 지정한 태그의 하위에 아래 구조에 맞게 구성해야 합니다.
다음은 PlacementView DOM의 예시입니다.
Code Block | ||
---|---|---|
| ||
<li class="post native-ad" id="placement1" style="display: none">
<div class="buzz-mediaview clickable">
</div>
<div class="info">
<div class="icon-wrapper clickable">
<img class="icon">
</div>
<h5 class="title clickable"></h5>
</div>
<div class="description">
</div>
<div class="button-wrapper">
<button class="cta clickable"></button>
</div>
</li> |
다음은 광고를 화면에 표시하거나 숨기는 JavaScript 코드 예시입니다.
Code Block | ||
---|---|---|
| ||
function renderAd(placementView, nativeAd) {
placementView.style.display = '';
placementView.getElementsByClassName('icon')[0].setAttribute('src', nativeAd.iconUrl);
placementView.getElementsByClassName('title')[0].innerHTML = nativeAd.title;
placementView.getElementsByClassName('description')[0].innerHTML = nativeAd.description;
updateCtaView(placementView.getElementsByClassName('cta')[0], nativeAd);
}
function hideAd() {
const placementView = document.getElementById('placement1');
placementView.style.display = 'none';
} |
CTA View 주의 사항
CTA View는 참여를 유도하기 위한 버튼입니다. 현재 리워드 상태와 참여 유도 문구를 표시할 수 있습니다. 여러 조건에 따라 디자인을 변경할 수 있습니다.
...