DFINERY Integration [Web]
Follow
You can analyze data from a web platform.
If you integrate both App SDK and Web SDK, you can analyze advertisements data in a single report. You can analyze all platform data at once or separately depending on the platforms.
[[인용:정보:작게]] You should pay an extra charge to use Web SDK [ contact us ]
Follow the instructions to integrate adbrix JavaScript SDK on your web page.
Web Platform Setting
You have to add a Web platform in the adbrix console.
After you add a Web platform, you can see the web secret key for integration.
SDK Installation and Initialization
This is a guide to install and initialize Adbrix SDK on your web project.
Available Browser
You can integrate adbrix Web SDK on every browser which is supported by Javascript ES5.
IE |
Chrome |
Firefox |
Safari |
---|---|---|---|
higher IE 9 |
O |
O |
O |
Set AdBrix SDK & Initialization
Add the following code to install Web SDK.
<head>
.
.
<!-- Set AdBrix Web SDK -->
<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>
<!-- AdBrix Web SDK init -->
<script>
window.adbrix.init({
appkey: 'your_appkey',
webSecretkey: 'your_webSecretKey'
});
</script> . </head>
[[인용:안내:보통]] The latest Release -16th February 2021
Keep the web SDK version on your project updated. We could provide you with new methods and amended methods in every version update.
See the tables for a better understanding of the set-up value.
attributes |
type |
required |
default value |
description |
---|---|---|---|---|
appkey |
string |
O |
X |
app key |
webSecretkey |
string |
O |
X |
web secret key |
userHash |
string |
X |
X |
to identify a client user |
isOptOut |
boolean |
X |
false |
whether agree or not with targeting ad(If true, targeting ad trace is deactivated) |
isExecPageViewEvent |
boolean |
X |
true |
When a user opens a web page, a page_view event occurs automatically |
isIncludeReferrer |
boolean |
X |
true |
referrer tracking |
isIncludeUtm |
boolean |
X |
true |
utm ad tracking |
isIncludeGclid |
boolean |
X |
true |
gclid tracking |
isIncludeNaver |
boolean |
X |
true |
Naver ad tracking |
supportUrlQueryKeys |
string[] |
X |
[] |
In a client browser queryString, set keys that you want to send automatically |
shareSubdomainCookie |
boolean |
X |
true |
Whether to use or not cookie which is shared by sub-domain |
traceLevel |
number |
X |
1 |
0: turn off 1: Error 2: Warning 3: Information |
Test SDK Integration
Type 'window.adbrix' on your browser console to test the SDK integration. If SDK integration is complete, you can see the following result.
Go to console.adbrix.io [Analytics > LiveBrix > Event], check if you see the event data on the graph.
[[인용:경고:보통]] You can see the data on LiveBrix about 15 minutes after your test. Please wait for a few minutes.
User API
You can analyze a user's login and logout events, and user's information.
[[인용:위험:작게]] All the APIs are going to work only after AdBrix SDK init.
Login / Logout
You can analyze user login events. UserID is a changeable value.
adbrix.login('user_id');
You can fetch a logged-in user ID using adbrix.getUserId() method.
adbrix.onInitialized(() => { adbrix.getUserId(); });
When you use adbrix.logout event method, all the UserProperty and UserID in browser cache are initialized.
adbrix.logout();
UserProperty
Analyze users' information (point, purchase history, gender, age, etc.).
You can add or update a user's information using this method.
adbrix.userProperty.addOrUpdate('email', 'abx@igaworks.com');
The following are the regulations of UserProperty.
Key
- only String is available
- up to 256 characters
- only lowercase alphabet, number, and '_' (underbar) are available
Value
- only String, Number, and Boolean are available
- up to 1024 byte
To fetch UserProperty, use adbrix.userProperty.getAll or adbrix.userProperty.get method.
adbrix.onInitialized(() => { adbrix.userProperty.getAll(); // Get All UserProperty adbrix.userProperty.get('email'); // Get Specific UserProperty });
Add adbrix.userProperty.remove to remove UserProperty.
adbrix.onInitialized(() => { adbrix.userProperty.remove('email'); // Remove Single UserProperty adbrix.userProperty.removes(['email','age']); // Remove more then two UserProperties });
[[인용:위험:작게]] adbrix.logout method initializes the UserProperty simultaneously.
Common API
These APIs are commonly used on almost every web platform.
Sign up
You can analyze Sign up event data using adbrix.common.signUp API.
adbrix.common.signUp('signChannel');
You have to replace 'signChannel' with the one channel on the following list. (Only channels on the following list are available, or the signUp API doesn't work)
SignChannel
- Kakao
- Naver
- Line
- UserId
- ETC
- SkTid
- AppleId
Invite Users
You can analyze Invite Users data using adbrix.common.invite API.
adbrix.common.invite('inviteChannel', 'your_customer_userid');
You have to replace 'InviteChannel' with one channel on the list. (Only the channel on the following is available, or Invite API doesn't work)
InviteChannel
- Kakao
- Naver
- Line
- UserId
- ETC
- SkTid
- AppleId
Use credit
You can analyze monetary credit(point) usage within the web.
adbrix.common.useCredit(10000);
Purchase event
You can analyze purchase events within the web.
// 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) );
Please use Currency and Payment method on this list
Currency | Payment_method |
KRW | CreditCard |
USD | BankTransfer |
JPY | MobilePayment |
EUR | ETC |
GBP | |
CNY | |
TWD | |
HKD | |
IDR | |
INR | |
RUB | |
THB | |
VND | |
MYR |
Commerce Event
viewHome
You can analyze the event that users view home/ main page.
adbrix.commerce.viewHome();
CategoryView
You can analyze the event that users view category/ event page.
The product data displayed when users view category are sent in the form of the following:
categories |
categories |
O |
X |
Category Model |
products |
product [] |
O |
X |
ProductList |
properties |
json |
X |
X |
Addtional Property |
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'});
ProductView
You can analyze the event that users view product details.
The following product-related data are sent.
product |
product |
O |
X |
Product Model |
properties |
json |
X |
X |
Addtional Property |
var product = adbrix.commerceAttr.product('product_id','상품명',1000,5,200, 'KRW', adbrix.commerceAttr.categories('게임','소셜','커머스','여성','육아'), {'key': 'value'});
adbrix.commerce.productView(product, {'key': 'value'});
Add To Cart
You can analyze the event that users add products to the cart.
The following product-related data are sent.
products |
product [] |
O |
X |
Product List |
properties |
json |
X |
X |
Addtional Property |
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'});
Add To Wishlist
You can analyze the event that users add products to the wishlist.
The following product-related data are sent.
product |
product |
O |
X |
Product list |
properties |
json |
X |
X |
Addtional Property |
var product = adbrix.commerceAttr.product('product_id','상품명',1000,5,200,'KRW', adbrix.commerceAttr.categories('게임','소셜','커머스','여성','육아'), {'key': 'value'});
adbrix.commerce.addToWishList(product, {'key': 'value'});
Review Order
You can analyze the event that users view order for final review.
The following product and order-related data are sent.
orderId |
string |
O |
X |
Order ID |
products |
product [] |
O |
X |
Product List |
discount |
number |
X |
X |
Discount |
deliveryCharge |
number |
X |
X |
Delivery charge |
properties |
json |
X |
X |
Addtional property |
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'});
Refund / Cancel the order
You can analyze the event that users cancel an order or claim a refund.
The following product and order-related data are sent.
orderId |
string |
O |
X |
Order ID |
products |
product [] |
O |
X |
Product List |
penaltyCharge |
number |
X |
X |
Penalty Charge |
properties |
json |
X |
X |
Addtional Property |
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'});
Search
You can analyze the event that users search a product
The following product-related data included in the search result are sent.
keyword |
string |
O |
X |
Search keyword |
products |
product [] |
O |
X |
Product List |
properties |
json |
X |
X |
Addtional Property |
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'});
Product Sharing
You can analyze the event that users share a product.
The following shared-product data are sent.
sharingChannel |
CommerceSharingChannelEnum |
O |
X |
Sharing Channel |
products |
product [] |
O |
X |
Product List |
properties |
json |
X |
X |
Addtional Property |
|
KakaoTalk |
KakaoStory |
|
SMS |
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'});
ListView
You can analyze the event that users view a product list.
The following data of viewing product list are sent.
products |
product [] |
O |
X |
Product List |
properties |
json |
X |
X |
Addtional Property |
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'});
View a Cart
You can analyze the event that users view the cart.
The following data of the viewing cart are sent.
products |
product [] |
O |
X |
Product List |
properties |
json |
X |
X |
Addtional Property |
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'});
Payment Info
You can analyze the event that users fill in payment information.
adbrix.commerce.paymentInfoAdded({'key': 'value'});
Game Event
Tutorial Complete
You can analyze the event that users completed the in-app tutorial.
The following tutorial completion data is to be formed in GameProperies.TutorialComplete values and sent.
isSkip |
boolean |
O |
X |
iwhether tutorial is skipped |
properties |
json |
X |
X |
Addtional property |
const gameAttr = {
'grade': 'vip',
'howmany_buy': 36,
'discoint': true,
};
adbrix.game.tutorialComplete(true, gameAttr);
Character Creation
You can analyze the in-app event that users create characters.
The following character creation data is to be formed in GameProperies.CharacterCreated values and sent.
properties |
json |
X |
X |
Addtional property |
const gameAttr = {
'grade': 'vip',
'howmany_buy': 36,
'discoint': true,
};
adbrix.game.characterCreated(gameAttr);
Stage Cleared
You can analyze the in-app event that users clear stages.
The following stage clear data is to be formed in GameProperies.StageCleared values and sent.
stageName |
string |
O |
X |
Completed Staged Name |
properties |
json |
X |
X |
Addtional Property |
const gameAttr = {
'grade': 'vip',
'howmany_buy': 36,
'discoint': true,
};
adbrix.game.stageCleared('1-5', gameAttr);
Level Achieved
You can analyze the in-app event that users achieved at certain levels.
The following achieved level data is to be formed in GameProperies.LevelAchieved values and sent.
level |
number |
O |
X |
level number |
properties |
json |
X |
X |
Addtional property |
const gameAttr = {
'grade': 'vip',
'howmany_buy': 36,
'discoint': true,
};
adbrix.game.levelAchieved(1, gameAttr);
Custom Event
You can analyze customized event data.
Send information using key and value format including event name and additional data.
adbrix.event.send('your_event_name', {'key': 'value'})
Every single data should be in key and value format.
The following are the regulations of additional data on a custom event.
Key
- only String is available
- up to 256 characters
- only lowercase alphabet, number, and '_' (underbar) are available
Value
- Only String, Number, and Boolean type are available
- up to 1024 byte
Support
If you have any questions about web SDK integration, send an email to adbrix-web-sdk-support@adbrixsupport.zendesk.com.