애드브릭스 연동하기 [Web]

Web 플랫폼 분석기능을 사용할 수 있습니다.
App SDK와 Web SDK를 함께 사용하면, 앱/웹 이용자를 하나의 리포트에 통합하여 광고성과를 측정, 분석할 수 있습니다.
별도의 리포트 설정 없이, Android, iOS, Web 선택을 통해 모든 분석 결과가 구분되거나 통합됩니다.

[[인용:정보:작게]] Web 분석기능은 별도의 유료 플랜 추가를 통해 이용할 수 있습니다. 제공기능 자세히 보기 ㅣ이용문의

아래 가이드를 참고하여 애드브릭스 자바스크립트 SDK를 연동합니다.

Web 플랫폼 설정

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

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

SDK 설치 및 초기화

Web 프로젝트에 SDK 설치 및 초기화 방법에 대한 안내 가이드 입니다.

SDK 지원 브라우져

Javascript ES5 를 지원하는 모든 브라우저에서 사용할 수 있습니다.

IE	Chrome	Firefox	Safari
IE 9이상	O	O	O

SDK 설치

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

페이지 내의 다른 리소스에 영향을 주지 않도록, 페이지 맨 하단의 </body> 태그 바로 위에 설치하는 것을 권장합니다.

<body>
   .
   .
   <script>!function(e,r){if(void 0!==e&&!e.adbrix){var t={queue:[]},o=navigator.userAgent.toLowerCase(),n=r.createElement("script"),i="Netscape"===navigator.appName&&-1!==navigator.userAgent.search("Trident")||-1!==o.indexOf("msie")?"abx-web-sdk.ie.min.js":"abx-web-sdk.min.js";n.type="text/javascript",n.async=!0,n.src="//static.adbrix.io/web-sdk/latest/"+i,n.onload=function(){e.adbrix.runQueuedFunctions?e.adbrix.runQueuedFunctions():console.log("[adbrix] Error: could not load SDK")};var a=r.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);["init","onInitialized","login","getUserId","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"].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>
</body>

[[인용:안내:보통]] 최신 릴리즈 - 2021년 2월 16일
SDK 버전 업데이트 시, 스크립트 내의 메서드 명이 변경되거나 추가될 수 있습니다. 항상 최신 버전을 유지하시는 것을 권장합니다.

SDK 초기화

첫 페이지 <head> 아래와 같이 SDK 를 초기화 합니다.

<head>
  <script>
  .
  .
    window.adbrix.init({
        appkey: 'your_appkey',
        webSecretkey: 'your_webSecretKey'
    });
  </script>
  .
  .
</head>

각 항목별 설정값은 아래와 같습니다.

attributes	type	required	default value	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 광고를 추적합니다.
isincludeGclid	boolean	X	true	gclid를 추적합니다.
isIncludeNaver	boolean	X	true	naver 광고를 추적합니다.
supportUrlQueryKeys	string[]	X	[]	사용자의 브라우져의 queryString에서, 자동으로 전송할 key 값을 설정합니다.
shareSubdomainCookie	boolean	X	true	sub domain과 공유되는 쿠키 사용 여부
traceLevel	number	X	1	0 : 비활성 1 : Error 2 : Warning 3 : Infomation

SDK 설치 확인

SDK 가 정상적으로 불러와졌는지 확인하기 위해서는 브라우저 콘솔창에 window.adbrix 를 입력하여 아래와 같이 결과가 나오는지 확인합니다.

객체가 제대로 출력된다면, console.adbrix.io 페이지의 Anaytics > LiveBrix > 이벤트 텝 에서 해당 이벤트가 잘 수집 되었는지 확인 해 주세요.

[[인용:경고:보통]]LiveBrix 리포트는 15분 뒤에 확인이 가능합니다. 테스트를 진행하시고 잠시만 기다려주세요!

User API

사용자의 로그인 / 로그아웃 이벤트 및 사용자 정보를 분석하기 위한 API 입니다.

[[인용:위험:작게]] 여기서부터 나오는 모든 API 는 AdBrix SDK 가 init 된 이후부터 동작합니다.

Login / Logout

adbrix.login 이용하여 로그인 이벤트를 호출합니다. 로그인 이벤트에서 사용하는 UserID 는 동적으로 변경할 수 있습니다.

adbrix.login('user_id');

로그인한 유저의 UserID 를 조회하기 위해서는 아래와 같이 getUserId 매소드를 호출합니다.

adbrix.onInitialized(() => {
  adbrix.getUserId();
});

adbrix.logout 이용하여 로그아웃 이벤트를 호출합니다. 로그아웃 이벤트를 호출하면 브라우저 캐시에 저장된 UserProperty 와 UserID 가 모두 초기화 됩니다.

adbrix.logout();

UserProperty

UserProperty 는 사용자의 정보 (포인트, 구매횟수, 성별, 나이 등등) 을 분석하는 매소드입니다.

adbrix.userProperty.addOrUpdate 를 이용하여 사용자의 정보를 추가 혹은 업데이트 합니다.

adbrix.userProperty.addOrUpdate('email', 'abx@igaworks.com');

UserProperty 는 아래의 규칙으로 작성합니다.

Key

String 만 사용 가능
총 256 글자까지 가능
알파벳 소문자, 숫자, 특수문자 _ 만 가능.

Value

String, Number, Boolean type 만 사용 가능
최대 1024 byte 까지 사용가능

설정된 UserProperty 를 조회하기 위해서는 adbrix.userProperty.getAll 혹은 adbrix.userProperty.get 메소드를 이용합니다.

adbrix.onInitialized(() => {
  adbrix.userProperty.getAll();         // Get All UserProperty
  adbrix.userProperty.get('email');     // Get Certian UserProperty
});

설정된 UserProperty 를 삭제하기 위해서는 adbrix.userProperty.remove 를 호출합니다.

adbrix.onInitialized(() => {
  adbrix.userProperty.remove('email');              // Remove Single UserProperty
  adbrix.userProperty.removes(['email','age']);     // Remove more then two UserProperties
});

[[인용:위험:작게]] 설정된 UserProperty 는 adbrix.logout 이벤트가 호출됨과 동시에 초기화 됩니다.

Common API

Web 에서 일반적으로 사용되는 이벤트에 대한 API 입니다.

회원가입

adbrix.common.signUp 이용하여, 회원가입 이벤트를 호출합니다.

adbrix.common.signUp('signChannel');

API 에 들어가는 SignChannel 은 아래와 같습니다. (해당 채널 이외에 다른 값이 들어갈 경우 호출되지 않음)

SignChannel

Kakao
Naver
Line
Google
Facebook
Twitter
whatsApp
QQ
WeChat
UserId
ETC
SkTid
AppleId

사용자 초대

adbrix.common.invite 를 이용하여 사용자 초대 이벤트를 호출합니다.

adbrix.common.invite('inviteChannel', 'your_customer_userid');

API 에 들어가는 InviteChannel 은 아래와 같습니다. (해당 채널 이외에 다른 값이 들어갈 경우 호출되지 않음)

InviteChannel

Kakao
Naver
Line
Google
Facebook
Twitter
whatsApp
QQ
WeChat
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)
      );
});

상품정보에서 사용하는 구매 화폐정보 (Currency) 및 결제 정보 Payment_method) 는 아래와 같습니다.

Currency	Payment_method
KRW	CreditCard
USD	BankTransfer
JPY	MobilePayment
EUR	ETC
GBP
CNY
TWD
HKD
IDR
INR
RUB
THB
VND
MYR

Custom Event

AdBrix 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

이 섹션의 문서

Web 플랫폼 설정

SDK 설치 및 초기화

SDK 지원 브라우져

SDK 설치

SDK 초기화

SDK 설치 확인

User API

Login / Logout

UserProperty

Common API

회원가입

사용자 초대

크레딧 사용

구매 이벤트

Custom Event

문의

댓글

이 섹션의 문서

Web 플랫폼 설정

SDK 설치 및 초기화

SDK 지원 브라우져

SDK 설치

SDK 초기화

SDK 설치 확인

User API

Login / Logout

UserProperty

Common API

회원가입

사용자 초대

크레딧 사용

구매 이벤트

Custom Event

문의

관련 문서