BuzzBooster SDK는 일부 기능에 대한 JavaScript Interface를 제공합니다. 그 외 기능은 Native 코드 작성이 필요합니다.
요구사양
React Native
•
ReactNative 0.68 이상
•
react-native-cli
Android
•
Android 4.1 Jellybean (API 레벨 16) 이상
•
Android Studio 3.2 이상
•
Gradle 4.0.1 이상
•
compileSdkVersion 33 이상
•
minSdk 21 이상
•
AndroidX
•
JDK 1.11
iOS
•
deployment target 11 이상
•
Xcode 14 이상
1. SDK 설치
BuzzBooster SDK를 설치하려면 다음의 절차를 따르세요.
React Native
•
문서를 참고하여 BuzzBooster React Native SDK를 설치하세요.
Web 프로젝트의 터미널에서 다음을 실행하세요
npm install buzzbooster-js
2. SDK 초기화
BuzzBooster Flutter SDK를 설치한 후, appKey 등 필요한 정보를 추가해 SDK를 초기화하세요.
import { BuzzBooster } from 'react-native-buzz-booster';
BuzzBooster.init({
androidAppKey: androidAppKey,
iosAppKey: iosAppKey
});
Dart
복사
3. WebView 설정
React Native와 Web간 통신을 위한 JavaScriptChannel을 구현하여 채널로 설정하세요.
import * as React from 'react';
import { Platform } from 'react-native';
import { BuzzBooster } from 'react-native-buzz-booster';
import WebView from 'react-native-webview';
import type { WebViewEvent, WebViewMessage } from 'react-native-webview/lib/WebViewTypes';
export default function WebViewPage() {
const webViewRef = React.useRef<WebView>(null)
const string = `
const BuzzBoosterJavaScriptInterface = {
postMessage: function(message) {
window.ReactNativeWebView.postMessage(message);
}
};
true; // this is required, or you'll sometimes get silent failures
`
const handleOnLoadEnd = () => {
webViewRef.current?.injectJavaScript(string);
}
const onMessage = (event: WebViewEvent) => {
BuzzBooster.postJavaScriptMessage((event.nativeEvent as WebViewMessage).data);
}
return (
<WebView
ref={webViewRef}
source={{
uri: YOUR_WEB_URL,
}}
javaScriptEnabled={true}
style={{ marginTop: 20 }}
allowFileAccess={true}
scalesPageToFit={true}
originWhitelist={['*']}
onMessage={onMessage}
onLoadEnd={handleOnLoadEnd}
/>
);
}
Dart
복사
4. 유저 설정
BuzzBooster SDK에 user를 설정하여 사용자를 구분할 수 있습니다.
사용자가 로그인하는 시점에 다음과 같이 처리하세요.
import { BuzzBooster, UserBuilder } from "buzzbooster-js";
let user = new UserBuilder("USER_ID")
.setOptInMarketing(true) // (권장) 마케팅 수신 동의 여부
.addProperty("login_type","sns(Facebook)") // (권장) 유저의 로그인 타입
.build()
BuzzBooster.setUser(user);
TypeScript
복사
opt_in_marketing 는 마케팅 수신 동의 유도 캠페인을 진행하는 경우 설정하세요.
opt_in_marketing | boolean |
수신 동의 | true |
수신 거부 | false |
login_type 는 유저의 로그인 타입을 식별합니다.
sns(Facebook) 외에도 다양한 값을 자유롭게 입력할 수 있습니다.
앱은 다양한 로그인 루트가 존재할 수 있습니다.
자체 서비스 로그인, 소셜 서비스 로그인, 자동 로그인 등 각 로직에 맞게 위 코드를 호출하세요.
- UserId의 보안성을 향상시키려면 이를 암호화 처리하세요.
- UserId는 ASCII 40자 이하로 제한됩니다.
- 이메일, 전화번호 같이 개인을 식별할 수 있는 정보는 UserId로 사용할 수 없습니다.
5. 버즈부스터 홈 이동
뷰가 클릭 됐을 때 홈으로 이동하려면 아래 코드를 호출하세요.
BuzzBooster.showHome()
TypeScript
복사
마케팅 수신 동의 유도 캠페인을 사용하는 경우 링크를 참고하여, React Native에서 하단의 버튼을 클릭 했을 때 이동을 직접 처리하세요.
6. 인 앱 메시지
인 앱 메시지는 진행 중인 캠페인을 홍보하여 유저에게 캠페인 참여를 독려할 수 있는 캠페인 엔트리 포인트의 역할을 수행합니다.
아래 코드를 호출하여 인 앱 메시지를 렌더링 할 수 있습니다.
BuzzBooster.showInAppMessage();
TypeScript
복사
7. NaverPay 전환 페이지 이동
아래 코드를 호출하여 버즈부스터 혹은 자사 포인트를 NaverPay 포인트로 전환하는 페이지를 호출할 수 있습니다.
BuzzBooster.showNaverPayExchange();
Swift
복사
8. 이벤트 전송
BuzzBooster SDK를 이용하여 사용자 액션 이벤트를 전송할 수 있습니다.
전송된 액션을 기반으로 BuzzBooster 서버가 리워드 지급 상태를 판단합니다.
let eventValues = new Map<string, number | boolean | string>()
eventValues["KEY"] = eventValues["VALUE"]
BuzzBooster.sendEvent("EVENT_NAME", eventValues)
TypeScript
복사
친구초대 캠페인 회원가입 이벤트 전송
친구초대 캠페인을 사용하는 경우 유저가 회원가입 했을 때 다음과 같이 처리하세요.
let eventValues = new Map<string, number | boolean | string>()
eventValues["user_id"] = eventValues["SIGN_UP_USER_ID"]
BuzzBooster.sendEvent("bb_sign_up", eventValues)
TypeScript
복사
마케팅 수신 동의 유도 캠페인 이벤트 전송
마케팅 수신 동의 유도 캠페인을 사용하는 경우 유저가 회원가입 했을 때 다음과 같이 처리하세요.
let eventValues = new Map<string, number | boolean | string>()
eventValues["user_id"] = eventValues["SIGN_UP_USER_ID"]
BuzzBooster.sendEvent("bb_opt_in_marketing", eventValues)
TypeScript
복사