# 연동하기

## 시작하기 전에

콘솔에 접속하여 앱의 플랫폼에 Web을 추가합니다.

Web 타입을 추가해야 SDK 연동에 필요한 web secret key를 확인할 수 있습니다.

### SDK 지원 브라우저

지원 브라우저는 아래와 같습니다.

```
Chrome, Safari, Samsung Internet, Edge, Firefox
```

{% hint style="warning" %}
IE(Intenet Explorer)는 지원하지 않습니다.
{% endhint %}

## SDK 설치

아래의 코드를 추가하여 SDK를 설치 및 초기화 합니다.

{% tabs %}
{% tab title="Javascript" %}

```javascript
// SDK 최신버젼 설치
!function(e,a){if(void 0!==e&&!e.adbrix){let E={queue:[]},r=a.createElement("script");r.type="text/javascript",r.async=!0,r.src="//static.adbrix.io/web-sdk2/latest/abx2-web-sdk.min.js",r.onload=function(){e.adbrix.runQueuedFunctions?e.adbrix.runQueuedFunctions():console.log("[adbrix] Error: could not load SDK")};let t=a.getElementsByTagName("script")[0];t.parentNode.insertBefore(r,t),["init","onInitialized","logEvent","login","logout","common.signUp","common.invite","common.useCredit","common.purchase","event.send","debug.traceListener","commerceAttr.categories","commerceAttr.product","commerce.viewHome","commerce.categoryView","commerce.productView","commerce.addToCart","commerce.addToWishList","commerce.reviewOrder","commerce.refund","commerce.search","commerce.share","commerce.listView","commerce.cartView","commerce.paymentInfoAdded","game.tutorialComplete","game.characterCreated","game.stageCleared","game.levelAchieved",].forEach(function(e){let a=e.split("."),r=a.pop();a.reduce(function(e,a){return e[a]=e[a]||{}},E)[r]=function(){E.queue.push([e,arguments])}}),e.adbrix=E,e.ABEvent={LOGIN:"abx:login",LOGOUT:"abx:logout",SIGN_UP:"abx:sign_up",USE_CREDIT:"abx:use_credit",APP_UPDATE:"abx:app_update",INVITE:"abx:invite",PURCHASE:"abx:purchase",REFUND:"abx:refund",ADD_TO_CART:"abx:add_to_cart",ADD_TO_WISHLIST:"abx:add_to_wishlist",PRODUCT_VIEW:"abx:product_view",CATEGORY_VIEW:"abx:category_view",REVIEW_ORDER:"abx:review_order",SEARCH:"abx:search",SHARE:"abx:share",VIEW_HOME:"abx:view_home",LIST_VIEW:"abx:list_view",CART_VIEW:"abx:cart_view",PAYMENT_INFO_ADDED:"abx:paymentinfo_added",LEVEL_ACHIEVED:"abx:level_achieved",TUTORIAL_COMPLETED:"abx:tutorial_completed",CHARACTER_CREATED:"abx:character_created",STAGE_CLEARED:"abx:stage_cleared"},e.ABEventProperty={IS_SKIP:"abx:is_skip",LEVEL:"abx:level",STAGE:"abx:stage",PREV_VER:"abx:prev_ver",CURR_VER:"abx:curr_ver",KEYWORD:"abx:keyword",SHARING_CHANNEL:"abx:sharing_channel",SIGN_CHANNEL:"abx:sign_channel",INVITE_CHANNEL:"abx:invite_channel",ORDER_ID:"abx:order_id",DELIVERY_CHARGE:"abx:delivery_charge",PENALTY_CHARGE:"abx:penalty_charge",PAYMENT_METHOD:"abx:payment_method",ORDER_SALES:"abx:order_sales",CATEGORY1:"abx:category1",CATEGORY2:"abx:category2",CATEGORY3:"abx:category3",CATEGORY4:"abx:category4",CATEGORY5:"abx:category5",DISCOUNT:"abx:discount",ITEMS:"abx:items",ITEM_PRODUCT_ID:"abx:product_id",ITEM_PRODUCT_NAME:"abx:product_name",ITEM_PRICE:"abx:price",ITEM_QUANTITY:"abx:quantity",ITEM_DISCOUNT:"abx:discount",ITEM_SALES:"abx:sales",ITEM_CURRENCY:"abx:currency",ITEM_CATEGORY1:"abx:category1",ITEM_CATEGORY2:"abx:category2",ITEM_CATEGORY3:"abx:category3",ITEM_CATEGORY4:"abx:category4",ITEM_CATEGORY5:"abx:category5"},e.ABSignUpChannel={KAKAO:"Kakao",NAVER:"Naver",LINE:"Line",GOOGLE:"Google",FACEBOOK:"Facebook",TWITTER:"Twitter",WHATSAPP:"whatsApp",QQ:"QQ",WECHAT:"WeChat",USER_ID:"UserId",ETC:"ETC",SKT_ID:"SkTid",APPLE_ID:"AppleId"},e.ABInviteChannel={KAKAO:"Kakao",NAVER:"Naver",LINE:"Line",GOOGLE:"Google",FACEBOOK:"Facebook",TWITTER:"Twitter",WHATSAPP:"whatsApp",QQ:"QQ",WECHAT:"WeChat",ETC:"ETC"},e.ABSharingChannel={FACEBOOK:"Facebook",KAKAOTALK:"KakaoTalk",KAKAOSTORY:"KakaoStory",LINE:"Line",WHATSAPP:"whatsApp",QQ:"QQ",WECHAT:"WeChat",SMS:"SMS",EMAIL:"Email",COPY_URL:"copyUrl",ETC:"ETC"},e.ABPaymentMethod={CREDIT_CARD:"CreditCard",BANK_TRANSFER:"BankTransfer",MOBILE_PAYMENT:"MobilePayment",ETC:"ETC"},e.ABCurrency={KRW:"KRW",USD:"USD",JPY:"JPY",EUR:"EUR",GBP:"GBP",CNY:"CNY",TWD:"TWD",HKD:"HKD",IDR:"IDR",INR:"INR",RUB:"RUB",THB:"THB",VND:"VND",MYR:"MYR"},e.ABConfig={LOG_ENABLE:"logEnable",LOG_LEVEL:"logLevel",SHARE_SUBDOMAIN_COOKIE:"shareSubdomainCookie"},e.ABLogLevel={ERROR:1,WARN:2,INFO:3}}}(window,document);

```

{% endtab %}
{% endtabs %}

## SDK 초기화

```javascript
init("APP_KEY","WEB_SECRET_KEY");
```

매개변수는 다음을 의미합니다.

* `APP_KEY` : 콘솔에서 발급된 서비스키
* `WEB_SECRET_KEY` : 콘솔에서 발급된 비밀키

{% hint style="warning" %}
반드시 설치 스크립트 이후에 초기화 스크립트가 실행되어야 합니다.
{% endhint %}

## SDK 설정

```javascript
init("APP_KEY","WEB_SECRET_KEY", initOptions);
```

매개변수는 다음을 의미합니다.

* `initOptions` : SDK 설정 Dictionary

### SDK 설정 값

| 이름                   | 타입         | 기본값              | 설명                        | 필수 |
| -------------------- | ---------- | ---------------- | ------------------------- | -- |
| shareSubdomainCookie | boolean    | true             | sub domain과 공유되는 쿠키 사용 여부 | X  |
| logEnable            | boolean    | true             | 로그 활성화 여부                 | X  |
| logLevel             | ABLogLevel | ABLogLevel.Error | [로그레벨](#log_level) 사용     | X  |

### 사용 예시

{% tabs %}
{% tab title="Javascript" %}

```javascript
const initOptions = {}
// INFO로 설정시 자세한 로그를 볼수 있습니다.  테스트시 추천합니다.
initOptions[ABConfig.LOG_LEVEL] = ABLogLevel.Info 

adbrix.init("APP_KEY","WEB_SECRET_KEY", initOptions);
```

{% endtab %}
{% endtabs %}

### SDK 설정 상수 <a href="#init_options" id="init_options"></a>

| 상수                                | 값                    | 설명                   |
| --------------------------------- | -------------------- | -------------------- |
| ABConfig.LOG\_ENABLE              | logEnable            | 로그 활성화 여부            |
| ABConfig.LOG\_LEVEL               | logLevel             | 로그 레벨                |
| ABConfig.SHARE\_SUBDOMAIN\_COOKIE | shareSubdomainCookie | 서브도메인과 공유되는 쿠키 사용 여부 |

### 로그 레벨 <a href="#log_level" id="log_level"></a>

| 상수               | 값 | 설명                      |
| ---------------- | - | ----------------------- |
| ABLogLevel.ERROR | 1 | Error 로그만 표시            |
| ABLogLevel.WARN  | 2 | Warn, Error 로그 표시       |
| ABLogLevel.INFO  | 3 | Error, Warn, Info 로그 표시 |

### 완료

SDK 설치 및 초기화가 완료되었습니다.

SDK 가 정상적으로 설치 확인하기 위해서는 브라우저의 개발자모드 콘솔 창에 window\.adbrix를 입력하여 객체가 생성되어 있는지 확인합니다. undefined가 아니라면 정상입니다.