디파이너리(애드브릭스) 연동하기 [Web]
팔로우
Web 플랫폼 분석 기능을 사용할 수 있습니다.
App SDK와 Web SDK를 함께 사용하면, 앱/웹 이용자를 하나의 리포트에 통합하여 광고 성과를 측정, 분석할 수 있습니다.
별도의 리포트 설정 없이, Android, iOS, Web 선택을 통해 모든 분석 결과가 구분되거나 통합됩니다.
[[인용:정보:작게]] Web 분석 기능은 별도의 유료 플랜 추가를 통해 이용할 수 있습니다. 제공 기능 자세히 보기 ㅣ이용 문의
아래 가이드를 참고하여 디파이너리(애드브릭스) 자바스크립트 SDK를 연동합니다.
Web 플랫폼 설정
디파이너리 콘솔에 접속하여 앱의 플랫폼에 Web을 추가합니다.
Web 타입을 추가해야 SDK 연동에 필요한 web secret key를 확인할 수 있습니다.
SDK 설치 및 초기화
Web 프로젝트에 SDK 설치 및 초기화 방법에 대한 안내 가이드 입니다.
SDK 지원 브라우저
지원 브라우저는 아래와 같습니다.
Chrome, Safari, Samsung Internet, Edge, Whale, Firefox, Opera
[[인용:위험:작게]] IE 브라우저는 지원하지 않습니다.
SDK 설치 및 초기화
아래의 코드를 추가하여 SDK를 설치 및 초기화 합니다.
최신 버젼 과 특정 버젼의 SDK를 설치할 수 있습니다. 둘중 한가지 방식으로 설정합니다.
<head>
:
:
<!-- SDK 설치 -->
<!-- Set AdBrix Web SDK in Lastest Version -->
<script>!function(e,r){if(void 0!==e&&!e.adbrix){var t={queue:[]},o=(navigator.userAgent.toLowerCase(),r.createElement("script"));o.type="text/javascript",o.async=!0,o.src="//static.adbrix.io/web-sdk/latest/abx-web-sdk.min.js",o.onload=function(){e.adbrix.runQueuedFunctions&&e.adbrix.runQueuedFunctions()};var c=r.getElementsByTagName("script")[0];c.parentNode.insertBefore(o,c);["init","onInitialized","login","getUserId","setAge","setGender","logout","userProperty.get","userProperty.getAll","userProperty.addOrUpdate","userProperty.remove","userProperty.removes","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","push.isPushEnabled","push.isPushSupported","push.showPrompt","push.showNativePrompt","push.showLocalNotification","push.getNotificationPermission"].forEach((function(e){var r=e.split("."),o=r.pop();r.reduce((function(e,r){return e[r]=e[r]||{}}),t)[o]=function(){t.queue.push([e,arguments])}})),e.adbrix=t}}(window,document);</script>
<!-- Set AdBrix Web SDK in Fixed Version -->
<script>!function(e,r){if(void 0!==e&&!e.adbrix){var version='1.3.5',t={queue:[]},o=(navigator.userAgent.toLowerCase(),r.createElement("script"));o.type="text/javascript",o.async=!0,o.src="//static.adbrix.io/web-sdk/"+version+"/abx-web-sdk.min.js",o.onload=function(){e.adbrix.runQueuedFunctions&&e.adbrix.runQueuedFunctions()};var c=r.getElementsByTagName("script")[0];c.parentNode.insertBefore(o,c);["init","onInitialized","login","getUserId","setAge","setGender","logout","userProperty.get","userProperty.getAll","userProperty.addOrUpdate","userProperty.remove","userProperty.removes","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","push.isPushEnabled","push.isPushSupported","push.showPrompt","push.showNativePrompt","push.showLocalNotification","push.getNotificationPermission"].forEach((function(e){var r=e.split("."),o=r.pop();r.reduce((function(e,r){return e[r]=e[r]||{}}),t)[o]=function(){t.queue.push([e,arguments])}})),e.adbrix=t}}(window,document);</script>
<script>
window.adbrix.init({
appkey: 'your_appkey',
webSecretkey: 'your_webSecretKey'
});
</script>
: </head>
[[인용:안내:보통]] SDK 버전 업데이트 시, 스크립트 내의 메서드 명이 변경되거나 추가될 수 있습니다. 항상 최신 버전을 유지하시는 것을 권장합니다.
[[인용:위험:작게]] 반드시 설치 스크립트 이후에 초기화 스크립트가 실행되어야 합니다.
[[인용:위험:작게]] v1.3.2 버젼(암호화버젼) 연동 후 이전 버젼으로 연동하면 쿠키가 초기화되므로 주의 바랍니다.
SDK 초기화 시 항목별 설정값은 아래와 같습니다.
attributes |
type |
required |
default |
description |
---|---|---|---|---|
appkey |
string |
O |
X |
앱키 |
webSecretkey |
string |
O |
X |
웹 시크릿 키 |
userHash |
string |
X |
X |
클라이언트의 사용자를 식별하기 위해 사용합니다. |
isOptOut |
boolean |
X |
false |
맞춤 광고 여부를 위해 사용합니다. true일 경우, 맞춤 광고 추적이 비활성화 됩니다. |
isExecPageViewEvent |
boolean |
X |
true |
페이지 오픈시 자동으로 page_view 이벤트를 발송합니다. |
isIncludeReferrer |
boolean |
X |
true |
referrer를 추적합니다. |
isIncludeUtm |
boolean |
X |
true |
utm 광고를 추적합니다. ex) utm_source, utm_medium, utm_campaign, utm_term, utm_content |
isIncludeGclid |
boolean |
X |
true |
gclid를 추적합니다. |
isIncludeFbclid
|
boolean |
X |
true |
fbclid를 추적합니다.
|
isIncludeNaver |
boolean |
X |
true |
naver 광고를 추적합니다. ex) n_campaign_type, n_ad_group, n_media, n_ad, n_keyword, n_keyword_id, n_query, n_rank, n_mall_pid, n_contract |
supportUrlQueryKeys |
string[] |
X |
[] |
사용자의 브라우저의 queryString에서, 자동으로 전송할 key값을 설정합니다. |
shareSubdomainCookie |
boolean |
X |
true |
sub domain과 공유되는 쿠키 사용 여부 |
traceLevel |
number |
X |
1 |
0 : 비활성 1 : Error 2 : Warning 3 : Information |
SDK 설치 확인
SDK 가 정상적으로 불러와졌는지 확인하기 위해서는 브라우저 콘솔 창에 window.adbrix 를 입력하여 아래와 같이 결과가 나오는지 확인합니다.
객체가 제대로 출력된다면, console.adbrix.io 페이지의 Analytics > LiveBrix > 이벤트 탭에서 해당 이벤트가 잘 수집 되었는지 확인 해 주세요.
[[인용:경고:보통]]LiveBrix 리포트는 15분 뒤에 확인이 가능합니다. 테스트를 진행하시고 잠시만 기다려주세요!
User API
사용자의 로그인 / 로그아웃 이벤트 및 사용자 정보를 분석하기 위한 API 입니다.
[[인용:위험:작게]] 여기서부터 나오는 모든 API는 디파이너리(애드브릭스) SDK 가 init된 이후부터 동작합니다.
Login / Logout
adbrix.login 이용하여 로그인 이벤트를 호출합니다. 로그인 이벤트에서 사용하는 UserID 는 동적으로 변경할 수 있습니다.
[[인용:경고:보통]] 로그인 유의 사항
로그인에 사용되는 user id는 그로스액션 기능 사용 시 유저-기기간 매칭을 위해 사용됩니다. 로그인 후 로그아웃 없이 다시 로그인이 호출 될 경우 올바른 매칭이 되지 않을 수 있습니다.
user id에 개인정보가 포함되지 않도록 주의해주세요. 만약 user id에 이메일, 전화번호 등의 개인정보가 포함되는 경우에는 암호화처리를 하시는 것을 권장합니다.
adbrix.login('user_id');
로그인한 유저의 UserID 를 조회하기 위해서는 아래와 같이 getUserId 매소드를 호출합니다.
adbrix.onInitialized(() => { adbrix.getUserId(); });
adbrix.logout 이용하여 로그아웃 이벤트를 호출합니다. 로그아웃 이벤트를 호출하면 브라우저 캐시에 저장된 UserProperty 와 UserID 가 모두 초기화 됩니다.
adbrix.logout();
UserProperty
UserProperty 는 사용자의 정보(포인트, 구매 횟수, 나이, 성별 등등)를 분석하는 메소드입니다.
나이, 성별은 setAge, setGender함수를 이용합니다.
adbrix.setAge(30);
adbrix.setGender(2); // 0:UNKNOWN, 1:FEMALE, 2:MALE
adbrix.userProperty.addOrUpdate를 이용하여 사용자의 정보를 추가 혹은 업데이트 합니다.
adbrix.userProperty.addOrUpdate('email', 'abx@igaworks.com');
UserProperty 는 아래의 규칙으로 작성합니다.
Key
- String 만 사용 가능
- 총 256 글자까지 가능
- 알파벳 소문자, 숫자, 특수문자 _ 만 가능.
Value
- String, Number, Boolean type 만 사용 가능
- 최대 1024 byte 까지 사용 가능
- null 값은 사용할 수 없음
[[인용:위험:작게]] 쿠키 값이 4,096 bytes를 초과하면 저장되지 않습니다.
[[인용:위험:작게]] 설정된 UserProperty는 adbrix.logout 이벤트가 호출됨과 동시에 초기화 됩니다.
Common API
Web에서 일반적으로 사용되는 이벤트에 대한 API 입니다.
회원가입
adbrix.common.signUp 이용하여, 회원가입 이벤트를 호출합니다.
adbrix.common.signUp('signChannel');
API에 들어가는 SignChannel 은 아래와 같습니다. (해당 채널 이외에 다른 값이 들어갈 경우 호출되지 않음)
SignChannel
- Kakao
- Naver
- Line
- UserId
- ETC
- SkTid
- AppleId
사용자 초대
adbrix.common.invite 를 이용하여 사용자 초대 이벤트를 호출합니다.
adbrix.common.invite('inviteChannel', 'your_customer_userid');
API에 들어가는 InviteChannel은 아래와 같습니다. (해당 채널 이외에 다른 값이 들어갈 경우 호출되지 않음)
InviteChannel
- Kakao
- Naver
- Line
- UserId
- ETC
- SkTid
- AppleId
크레딧 사용
adbrix.common.useCredit 이용하여, Web 내 화폐 사용 이벤트를 호출합니다.
adbrix.common.useCredit(10000);
구매 이벤트
adbrix.common.purchase 이용하여, Web 내 구매 이벤트를 호출합니다.
adbrix.onInitialized(() => { // product category setting var category_1 = adbrix.commerceAttr.categories ( 'category1', // At least 1 category required 'category2', 'category3', 'category4', 'category5' ); // product information setting var product_1 = adbrix.commerceAttr.product( 'product_ID', // product_id 'prduct_Name', // product_name 20000.00, // price 3, // quantity 1000.00, // discount 'KRW', // currency category_1, // category {'size': 36} // product properties (Optional) ); // create product list var productList = []; productList.push(product_1); // purchase API adbrix.common.purchase( 'order_id', // order_id productList, // product_list 59000.00, // order_sale 1500.00, // discount 2500.00, // delivery_charge 'CreditCard', // payment_method {'membertype' : 'VIP'} // event properties (Optional) ); });
[[인용:위험:보통]] adbrix.commerceAttr.categories와, adbrix.commerceAttr.product 함수는 SDK init 완료 후에 사용되거나 onInitialized 함수안에서 사용해야합니다. SDK가 init 완료되기 전에 호출시 undefined가 리턴됩니다.
상품 정보에서 사용하는 구매 화폐 정보(Currency) 및 결제 정보(Payment_method) 는 아래와 같습니다.
Currency | Payment_method |
KRW | CreditCard |
USD | BankTransfer |
JPY | MobilePayment |
EUR | ETC |
GBP | |
CNY | |
TWD | |
HKD | |
IDR | |
INR | |
RUB | |
THB | |
VND | |
MYR |
Commerce Event
홈(메인) 화면 진입
유저가 앱의 홈(메인) 화면으로 진입한 이벤트를 분석합니다.
adbrix.commerce.viewHome();
카테고리(기획전) 진입
유저가 카테고리(기획전) 화면으로 진입한 이벤트를 분석합니다.
카테고리로 진입했을 때 노출되는 상품 정보를 다음과 같이 전달합니다.
categories |
categories |
O |
X |
카테고리 모델 |
products |
product [] |
O |
X |
상품 리스트 |
properties |
json |
X |
X |
추가 프로퍼티 |
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products= [];
products.push(product);
adbrix.commerce.categoryView(categories, products, {'key': 'value'});
});
상품 상세 보기
유저가 상품을 상세하게 본 이벤트를 분석합니다.
다음과 같은 상품에 대한 정보를 전달합니다.
product |
product |
O |
X |
상품 |
properties |
json |
X |
X |
추가 프로퍼티 |
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
adbrix.commerce.productView(product, {'key': 'value'});
});
장바구니 담기
유저가 상품을 장바구니에 담은 이벤트를 분석합니다.
products |
product, product [] |
O |
X |
상품 정보 (리스트) |
properties |
json |
X |
X |
추가 프로퍼티 |
- Product 가 1개일 경우
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
adbrix.commerce.addToCart(product, {'key': 'value'});
});
- Product 가 2개 이상일 경우
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products = [];
products.push(product);
adbrix.commerce.addToCart(products, {'key': 'value'});
});
관심 상품(위시리스트) 추가
사용자가 상품을 관심상품(위시리스트)에 추가한 이벤트를 분석합니다.
다음과 같은 상품 정보를 전달합니다.
product |
product,product[] |
O |
X |
상품 정보 (리스트) |
properties |
json |
X |
X |
추가 프로퍼티 |
- Product 가 1개인 경우
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
adbrix.commerce.addToWishList(product, {'key': 'value'});
});
- Product 가 2개 이상일 경우
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products = [];
products.push(product);
adbrix.commerce.addToWishList(products, {'key': 'value'});
});
주문 확인하기
사용자가 상품을 결제하기 전 최종 확인하는 이벤트를 분석합니다.
다음과 같은 주문 및 상품 정보를 전달합니다.
orderId |
string |
O |
X |
주문번호 |
products |
product [] |
O |
X |
상품 리스트 |
discount |
number |
X |
X |
할인금액 |
deliveryCharge |
number |
X |
X |
배송비 |
properties |
json |
X |
X |
추가 프로퍼티 |
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products = [];
products.push(product);
adbrix.commerce.reviewOrder('orderid_1', products, 10, 20, {'key': 'value'});
});
주문 취소하기 (환불하기)
사용자가 주문을 취소하거나 환불 처리한 이벤트를 분석합니다.
다음과 같은 상품 및 주문 정보를 전달합니다.
orderId |
string |
O |
X |
주문번호 |
products |
product [] |
O |
X |
상품 리스트 |
penaltyCharge |
number |
X |
X |
취소(환불) 수수료 |
properties |
json |
X |
X |
추가 프로퍼티 |
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products = [];
products.push(product);
adbrix.commerce.refund('orderid_1', products, 10, {'key': 'value'});
});
상품 검색하기
사용자가 상품을 검색한 이벤트를 분석합니다.
다음과 같은 검색 결과에 포함된 상품 정보를 전달합니다.
keyword |
string |
O |
X |
검색어 |
products |
product [] |
O |
X |
상품 리스트 |
properties |
json |
X |
X |
추가 프로퍼티 |
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products = [];
products.push(product);
adbrix.commerce.search('keyword', products, {'key': 'value'});
})
상품 공유하기
사용자가 상품 정보를 공유한 이벤트를 분석합니다.
다음과 같은 공유된 상품 정보를 전달합니다.
sharingChannel |
CommerceSharingChannelEnum |
O |
X |
공유 채널 |
products |
product [] |
O |
X |
상품 리스트 |
properties |
json |
X |
X |
추가 프로퍼티 |
|
KakaoTalk |
KakaoStory |
|
SMS |
copyUrl |
ETC |
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products = [];
products.push(product);
adbrix.commerce.share('KakaoTalk', products, {'key': 'value'});
});
상품 목록 조회하기
사용자가 상품 목록을 조회한 이벤트를 분석합니다.
다음과 같은 조회한 상품 정보를 전달합니다.
products |
product [] |
O |
X |
상품 리스트 |
properties |
json |
X |
X |
추가 프로퍼티 |
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products = [];
products.push(product);
adbrix.commerce.listView(products, {'key': 'value'});
});
장바구니 조회하기
사용자가 상품 목록을 조회한 이벤트를 분석합니다.
다음과 같은 조회한 상품 정보를 전달합니다.
products |
product [] |
O |
X |
상품 리스트 |
properties |
json |
X |
X |
추가 프로퍼티 |
adbrix.onInitialized(() => {
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', categories, {'key': 'value'});
var products = [];
products.push(product);
adbrix.commerce.cartView(products, {'key': 'value'});
};
결제 정보 입력하기
사용자가 결제 정보를 입력한 이벤트를 분석합니다.
adbrix.commerce.paymentInfoAdded({'key': 'value'});
Game Event
튜로리얼 완료
앱에서 발생한 튜토리얼 완료 이벤트를 분석합니다.
isSkip |
boolean |
O |
X |
건너뛰기(skip)를 통한 완료인지 여부 |
properties |
json |
X |
X |
추가 프로퍼티 |
const gameAttr = {
'grade': 'vip',
'howmany_buy': 36,
'discoint': true,
};
adbrix.game.tutorialComplete(true, gameAttr);
캐릭터 생성
앱에서 발생한 캐릭터 생성 이벤트를 분석합니다.
properties |
json |
X |
X |
추가 프로퍼티 |
const gameAttr = {
'grade': 'vip',
'howmany_buy': 36,
'discoint': true,
};
adbrix.game.characterCreated(gameAttr);
스테이지 완료
앱에서 발생한 스테이지 완료 이벤트를 분석합니다.
stageName |
string |
O |
X |
완료한 스테이지 이름 |
properties |
json |
X |
X |
추가 프로퍼티 |
const gameAttr = {
'grade': 'vip',
'howmany_buy': 36,
'discoint': true,
};
adbrix.game.stageCleared('1-5', gameAttr);
레벨 달성
앱에서 발생한 레벨 달성 이벤트를 분석합니다.
level |
number |
O |
X |
달성한 레벨 |
properties |
json |
X |
X |
추가 프로퍼티 |
const gameAttr = {
'grade': 'vip',
'howmany_buy': 36,
'discoint': true,
};
adbrix.game.levelAchieved(1, gameAttr);
Custom Event
디파이너리(애드브릭스) SDK 에서 사전 정의한 이벤트 이외에 사용자가 정의한 이벤트를 호출할 때 사용합니다.
Custom 이벤트에는 아래와 같이 key / value를 이용하여 이벤트 명 이외에 이벤트 포함된 추가 정보를 전송할 수 있습니다.
adbrix.event.send('your_event_name', {'key': 'value'})
Custom 이벤트에 추가되는 이벤트 추가 정보의 key / value 는 아래의 규칙이 적용됩니다.
Key
- String 만 사용 가능
- 총 256 글자까지 가능
- 알파벳 소문자, 숫자, 특수문자 _ 만 가능.
Value
- String, Number, Boolean type 만 사용 가능
- 최대 1024 byte 까지 사용 가능
문의
디파이너리 WEB SDK 연동에 대한 문의는 아래 전용 메일 계정으로 연락 주시면 답변을 드리도록 하겠습니다.
adbrix-web-sdk-support@adbrixsupport.zendesk.com