9. Hybrid App 연동

요구사양

•

Xcode 14 이상

•

iOS Deployment target 11 이상

1. SDK 설치

문서를 참고하여 BuzzBooster iOS Native SDK를 설치하세요.

Web 프로젝트의 터미널에서 다음을 실행하세요

npm install buzzbooster-js

2. SDK 초기화

BuzzBooster Android SDK를 설치한 후 Android Project에서 appKey 등 필요한 정보를 추가해 SDK를 초기화하세요.

import BuzzBoosterSDK

@main
final class AppDelegateSwift: UIResponder, UIApplicationDelegate {
  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil
    ) -> Bool 
  {
    let config = BSTConfig { builder in
      builder.appKey = "APP_KEY"
    }
    BuzzBooster.initialize(with: config)
    return true
  }
}
Swift
복사

3. WebView 설정

iOS Native와 Web간 통신을 위해 다음과 같이 구현하세요. Web에서 발생하는 BuzzBooster의 메시지를 WKScriptMessageHandler에서 처리합니다.

import UIKit
import WebKit
import BuzzBoosterSDK

final class WebViewController: UIViewController {
  private lazy var webView: WKWebView = {
    let preferences = WKPreferences()
    preferences.javaScriptEnabled = true
    preferences.javaScriptCanOpenWindowsAutomatically = true
    
    let userContentController = WKUserContentController()
    userContentController.add(self, name: BuzzBoosterWebKit.handlerName)
    userContentController.addUserScript(BuzzBoosterWebKit.userScript)
    
    let configuration = WKWebViewConfiguration()
    configuration.preferences = preferences
    configuration.userContentController = userContentController
    
    let webView = WKWebView(
      frame: .zero,
      configuration: configuration
    )

    return webView
  }()
}

extension WebViewController: WKScriptMessageHandler {
  func userContentController(
    _ userContentController: WKUserContentController,
    didReceive message: WKScriptMessage
  ) {
    do {
      try BuzzBoosterWebKit.handle(with: self, message: message)
    } catch {
      Logger.log(error.localizedDescription)
    }
  }
}
Swift
복사

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 255자 이하로 제한됩니다. - 이메일, 전화번호 같이 개인을 식별할 수 있는 정보는 UserId로 사용할 수 없습니다.

5. 버즈부스터 홈 이동

뷰가 클릭 됐을 때 홈으로 이동하려면 아래 코드를 호출하세요.

BuzzBooster.showHome()
TypeScript
복사

마케팅 수신 동의 유도 캠페인을 사용하는 경우 링크를 참고하여, iOS에서 하단의 버튼을 클릭 했을 때 이동을 직접 처리하세요.

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
복사

9. Push Notification

문서를 참고하여 진행하세요