이 섹션의 문서

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

Avatar
ADBRIX
  • 업데이트 시간
팔로우

 

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

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

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

 

Web 플랫폼 설정

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

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

3d619e85-4664-423f-900e-64b96dce2dd4.png

 

 

SDK 설치 및 초기화

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

 

 

SDK 지원 브라우져

 

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

IE

Chrome

Firefox

Safari

IE 9이상

O

O

O

 

 

SDK 설치 및 초기화

 

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

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

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

 

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

 

SDK 초기화 시 항목별 설정값은 아래와 같습니다.

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 : Information

 

 

SDK 설치 확인

 

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

4ccabdfd-1d5f-4931-b637-21a7152a7fcc.png

 

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

c55bccab-98da-46f8-bbb1-9de9a445f542.png

 

[[인용:경고:보통]]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  

 

 

Commerce Event

 

홈(메인) 화면 진입

유저가 앱의 홈(메인) 화면으로 진입한 이벤트를 분석합니다.

adbrix.commerce.viewHome();

 

카테고리(기획전) 진입

유저가 카테고리(기획전) 화면으로 진입한 이벤트를 분석합니다.

카테고리로 진입했을 때 노출되는 상품 정보를 다음과 같이 전달합니다.

attributes

type

필수값

default value

description

categories

categories

O

X

카테고리 모델

products

product []

O

X

상품 리스트

properties

json

X

X

추가 프로퍼티

 
var categories = adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아');

var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});
var products= [];
products.push(product);

adbrix.commerce.categoryView(categories, products, {'key': 'value'}); 

 

상품 상세 보기

유저가 상품을 상세하게 본 이벤트를 분석합니다.

다음과 같은 상품에 대한 정보를 전달합니다.

attributes

type

필수값

default value

description

product

product

O

X

상품

properties

json

X

X

추가 프로퍼티

 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});

adbrix.commerce.productView(product, {'key': 'value'}); 

 

장바구니 담기

유저가 상품을 장바구니에 담은 이벤트를 분석합니다.

attributes

type

필수값

default value

description

products

product []

O

X

상품 리스트

properties

json

X

X

추가 프로퍼티

 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});
var products = [];
products.push(product);

adbrix.commerce.addToCart(products, {'key': 'value'});

 

관심상품(위시리스트) 추가

사용자가 상품을 관심상품(위시리스트)에 추가한 이벤트를 분석합니다.

다음과 같은 상품 정보를 전달합니다.

attributes

type

필수값

default value

description

product

product

O

X

상품 리스트

properties

json

X

X

추가 프로퍼티

 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});

adbrix.commerce.addToWishList(product, {'key': 'value'});

 

주문 확인하기

사용자가 상품을 결제하기 전 최종 확인하는 이벤트를 분석합니다.

다음과 같은 주문 및 상품 정보를 전달합니다.

attributes

type

필수값

default value

description

orderId

string

O

X

주문번호

products

product []

O

X

상품 리스트

discount

number

X

X

할인금액

deliveryCharge

number

X

X

배송비

properties

json

X

X

추가 프로퍼티

 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});
var products = [];
products.push(product);

adbrix.commerce.reviewOrder('orderid_1', products, 10, 20, {'key': 'value'});

 

주문 취소하기 (환불하기)

사용자가 주문을 취소하거나 환불처리한 이벤트를 분석합니다.

다음과 같은 상품 및 주문 정보를 전달합니다.

attributes

type

필수값

default value

description

orderId

string

O

X

주문번호

products

product []

O

X

상품 리스트

penaltyCharge

number

X

X

취소(환불) 수수료

properties

json

X

X

추가 프로퍼티

 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});
var products = [];
products.push(product);

adbrix.commerce.refund('orderid_1', products, 10, {'key': 'value'});

 

상품 검색하기

사용자가 상품을 검색한 이벤트를 분석합니다.

다음과 같은 검색 결과에 포함된 상품 정보를 전달합니다.

attributes

type

필수값

default value

description

keyword

string

O

X

검색어

products

product []

O

X

상품 리스트

properties

json

X

X

추가 프로퍼티

 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'}); 
var products = [];
products.push(product);

adbrix.commerce.search('keyword', products, {'key': 'value'});

 

상품 공유하기

사용자가 상품정보를 공유한 이벤트를 분석합니다.

다음과 같은 공유된 상품 정보를 전달합니다.

attributes

type

필수값

default value

description

sharingChannel

CommerceSharingChannelEnum

O

X

공유 채널

products

product []

O

X

상품 리스트

properties

json

X

X

추가 프로퍼티
 

CommerceSharingChannelEnum

Facebook

KakaoTalk

KakaoStory

whatsApp
QQ
WeChat
SMS
Email
copyUrl
ETC 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});
var products = [];
products.push(product);

adbrix.commerce.share('KakaoTalk', products, {'key': 'value'});

 

상품 목록 조회하기

사용자가 상품 목록을 조회한 이벤트를 분석합니다.

다음과 같은 조회한 상품 정보를 전달합니다.

attributes

type

필수값

default value

description

products

product []

O

X

상품 리스트

properties

json

X

X

추가 프로퍼티

 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});
var products = [];
products.push(product);

adbrix.commerce.listView(products, {'key': 'value'});

 

장바구니 조회하기

사용자가 상품 목록을 조회한 이벤트를 분석합니다.

다음과 같은 조회한 상품 정보를 전달합니다.

attributes

type

필수값

default value

description

products

product []

O

X

상품 리스트

properties

json

X

X

추가 프로퍼티

 
var product = adbrix.commerceAttr.product('product_id', '상품명', 1000, 5, 200, 'KRW', adbrix.commerceAttr.categories('게임', '소셜', '커머스', '여성', '육아'), {'key': 'value'});
var products = [];
products.push(product);

adbrix.commerce.cartView(products, {'key': 'value'});

 

결제 정보 입력하기

사용자가 결제 정보를 입력한 이벤트를 분석합니다.

adbrix.commerce.paymentInfoAdded({'key': 'value'}); 

 

 

Game Event

 

튜로리얼 완료

앱에서 발생한 튜토리얼 완료 이벤트를 분석합니다.

attributes

type

필수값

default value

description

isSkip

boolean

O

X

건너뛰기(skip)를 통한 완료인지 여부

properties

json

X

X

추가 프로퍼티

 
const gameAttr = {
  'grade': 'vip',
  'howmany_buy': 36,
  'discoint': true,
};

adbrix.game.tutorialComplete(true, gameAttr);

 

캐릭터 생성

앱에서 발생한 캐릭터 생성 이벤트를 분석합니다.

attributes

type

필수값

default value

description

properties

json

X

X

추가 프로퍼티

 
const gameAttr = {
  'grade': 'vip',
  'howmany_buy': 36,
  'discoint': true,
};

adbrix.game.characterCreated(gameAttr);

 

스테이지 완료

앱에서 발생한 스테이지 완료 이벤트를 분석합니다.

attributes

type

필수값

default value

description

stageName

string

O

X

완료한 스테이지 이름

properties

json

X

X

추가 프로퍼티

 
const gameAttr = {
  'grade': 'vip',
  'howmany_buy': 36,
  'discoint': true,
};

adbrix.game.stageCleared('1-5', gameAttr);

 

레벨 달성

앱에서 발생한 레벨 달성 이벤트를 분석합니다.

attributes

type

필수값

default value

description

level

number

O

X

달성한 레벨

properties

json

X

X

추가 프로퍼티

 
const gameAttr = {
  'grade': 'vip',
  'howmany_buy': 36,
  'discoint': true,
};
adbrix.game.levelAchieved(1, gameAttr);

 

 

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

 

 

관련 문서

클릭하여 고객지원팀에게 문의하기

답을 찾지 못하였나요? 걱정하지 마시고, 고객지원팀에게 문의주세요!

INDEX