WEB SDK

WEB SDK

지원 브라우저link

에어브릿지 Web SDK는 아래 브라우저 환경에서 동작합니다.

ChromeFirefoxSafariInternet Explorer
✔️✔️✔️IE 9 이상

설치link

아래와 같은 코드를 body 태그 안 끝에 넣어 주세요.

코드link

<script>
(function(a_,i_,r_,_b,_r,_i,_d,_g,_e){if(!a_[_b]||!a_[_b].queue){_g=i_.getElementsByTagName(r_)[0];a_[_b]={queue:[]};_d={};for(_i=0;_i<_r.length;_d={$jscomp$loop$prop$m$2:_d.$jscomp$loop$prop$m$2},_i++)_d.$jscomp$loop$prop$m$2=_r[_i],~_d.$jscomp$loop$prop$m$2.indexOf(".")&&(_e=_d.$jscomp$loop$prop$m$2.split(".")[0],a_[_b][_e]=a_[_b][_e]||{},a_[_b][_e][_d.$jscomp$loop$prop$m$2.split(".")[1]]=function(_d){return function(){a_[_b].queue.push([_d.$jscomp$loop$prop$m$2,arguments])}}(_d)),a_[_b][_d.$jscomp$loop$prop$m$2]=function(_d){return function(){a_[_b].queue.push([_d.$jscomp$loop$prop$m$2,arguments])}}(_d);_d=i_.createElement(r_);_d.async=1;_d.src="//static.airbridge.io/sdk/latest/airbridge.min.js";_g.parentNode.insertBefore(_d,_g)}})(window,document,"script","airbridge","init setBanner setDownload setDeeplinks sendSMS sendWeb setUserAgent setUserAlias addUserAlias setMobileAppData setUserId setUserEmail setUserPhone setUserAttributes setDeviceIFV setDeviceIFA setDeviceGAID events.send events.signIn events.signUp events.signOut events.purchased events.addedToCart events.productDetailsViewEvent events.homeViewEvent events.productListViewEvent events.searchResultViewEvent".split(" "));
airbridge.init({
app: '앱 이름',
webToken: '웹 토큰'
});
</script>

'앱 이름' 은 대시보드의 'App Setting > 앱 기본정보' 에서 확인할 수 있습니다.
'웹 토큰' 은 대시보드의 'App Setting > 토큰 관리' 에서 확인할 수 있습니다.

WEB SDK는 Google Tag Manager로도 설정 가능합니다.
Google Tag Manager 셋팅 방법

설치 - 캠페인 파라미터link

광고를 통해 웹사이트에 랜딩되는 경우에 웹사이트 주소에 파라미터로 정보를 붙여주시면 그 정보를 토대로 웹사이트 유입 추적이 가능합니다.

파라미터 분석은 자동 기능과 수동 기능을 지원합니다.

자동 기능 - utmParsinglink

init 함수 호출시 utmParsing: true 옵션을 주시면 URL 파라미터의 UTM 값을 각각 Airbridge 의 파라미터 값으로 설정합니다.

URL 파라미터
utm_sourceutm_campaignutm_mediumutm_termutm_content
Airbridge
channelcampaignmediumtermcontent
airbridge.init({
app: '앱 이름',
webToken: '웹 토큰',
utmParsing: true
});

URL 은 window.location.href 값 입니다.

자동 기능 - urlQueryMappinglink

urlQueryMapping은 웹페이지로 랜딩되는 마케팅 캠페인 운영 시 랜딩페이지의 URL내 파라미터의 값을 에어브릿지의 트래킹링크 파라미터로 자동 Mapping 할 수 있는 기능입니다. urlQueryMapping 기능을 활용하면 고객사 내부 성과 측정을 위해 URL에 별도로 추가하는 파라미터 값을 에어브릿지에도 동일하게 적용하여 대시보드에서 확인이 가능합니다.

airbridge.init 메서드 호출 시 넘겨주는 객체의 urlQueryMapping Key에 Key(에어브릿지 파라미터)-Value(맵핑을 원하는 Key) 쌍으로 값을 넣어주시면 되며, 에어브릿지 파라미터로 사용할 수 있는 Key는 아래와 같습니다.

urlQueryMapping 시 콘텐츠, 하하위매체 등 트래킹링크 생성 시 활용 빈도가 낮은 파라미터를 사용하시길 권장합니다. 특히나 utmParsing 기능도 함께 사용하고 있다면 utm 파라미터와 맵핑되는 값들(캠페인, 콘텐츠, 하위매체, 키워드)과 중복되지 않도록 주의하시길 바랍니다.

파라미터명설명
campaign캠페인
ad_group광고 그룹
ad_creative광고 소재
content콘텐츠
term키워드
sub_id하위매체
sub_id_1하하위매체1
sub_id_2하하위매체2
sub_id_3하하위매체3

예를 들어 고객사 내부에서 활용하는 파라미터가 'internal_code'라고 했을 때 랜딩 페이지의 URL은 아래와 같이 구성될 것입니다.

https://airbridge.io/?utm_source=google&utm_campaign=jan_ua_campaign&internal_code=ABC

이때 internal_code를 에어브릿지에서 지원하는 파라미터 중 하하위매체1과 맵핑시켜 대시보드에서 성과를 확인하고자 할 경우 아래와 같이 설정해주시면 됩니다.

airbridge.init({
app: "...",
webToken: "...",
urlQueryMapping: {
'sub_id_1': 'internal_code'
}
});

만약 위 랜딩페이지에서 전환이벤트(장바구니 담기, 구매)가 발생할 경우 에어브릿지 대시보드 내 [Actual Report] > [테이블 설정]에서 '하하위매체1'을 통계 기준으로 설정하여 internal_code의 값을 기준으로 성과를 확인하실 수 있습니다.

수동 기능link

아래와 같은 코드를 작성하여 파라미터를 분석할 수 있습니다.

분석 결과물인 params 객체에서 적절한 정보를 추출하여 init 함수 호출시에 정보를 등록해주세요.

// 파라미터 파싱 함수
function queryStringToJSON(url) {
if (url.search.slice !== undefined) {
var pairs = url.search.slice(1).split('&');
} else {
var pairs = url.split('?')[1].split('&');
}
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
result[pair[0]] = decodeURIComponent(pair[1] || '');
});
return JSON.parse(JSON.stringify(result));
}
var url = window.location.href;
var params = queryStringToJSON(url);
// initialize
airbridge.init({
app: '앱 이름',
webToken: '웹 토큰',
defaultChannel: params['utm_source'],
defaultParams: {
campaign: params['utm_campaign'],
medium: params['utm_medium'],
content: params['utm_content'],
term: params['utm_term']
}
});
  • defaultChannel : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고사 이름
  • defaultParams.campaign : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고 이름
  • defaultParams.medium : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고 매체
  • defaultParams.content : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고 내용
  • defaultParams.term : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고 검색어

설치 - 앱 전환link

다운로드 버튼 추가link

html 로 작성한 버튼 태그들의 id 를 입력하여 버튼에 앱 다운로드 기능을 삽입할 수 있습니다.

// html
<button id="app_download">앱으로 이동</button>
// javascript
airbridge.setDownload({
buttonID: "app_download"
// or ["app_download_1", "app_download_2", ...]
});

buttonID : 다운로드 기능을 삽입할 버튼 태그의 id or id 들로 이루어진 array

버튼 클릭시, 버튼의 id 가 content 로 기록됩니다.

주의 : 사용자를 마켓으로 보내는 역할은 SDK에서 하기 때문에 다운로드 버튼에 앱마켓으로 보내는 <a> tagonclick 함수 등이 사용되면 안됩니다.

딥링크 버튼 추가link

html 로 작성한 버튼 태그들의 id 를 입력하여 버튼에 딥링크 기능을 삽입할 수 있습니다.

아래와 같이 딥링크를 설정해 주세요.

airbridge.setDeeplinks({
deeplinks: {
ios: "ablog://main",
android: "ablog://main",
desktop: "http://blog.ab180.co"
},
fallbacks: {
ios: "itunes-appstore",
// itunes-appstore(default), google-play, url
android: "google-play"
// google-play(default), itunes-appstore, url
},
buttonID: "deeplinking-button-1",
// or ["deeplink-button-1", "deeplink-button-2", ...]
desktopPopUp: true
});
  • deeplinks.ios : iOS 에서 버튼을 클릭했을 때, 실행할 딥링크 입니다.
  • deeplinks.android : Android 에서 버튼을 클릭했을 때, 실행할 딥링크 입니다.
  • deeplinks.desktop : Desktop 에서 버튼을 클릭했을 때, 실행할 링크 입니다.
  • fallbacks.ios : iOS 에서 딥링크에 실패하였을 때, 이동할 위치 or URL 입니다.
  • fallbacks.android : Android 에서 딥링크에 실행했을 때, 이동할 위치 or URL 입니다.
    • itunes-appstore : 앱의 애플 앱스토어 페이지
    • google-play : 앱의 안드로이드 플레이스토어 페이지
    • url : http or https 형식의 url
  • buttonID : 딥링크 기능을 삽입할 버튼 태그의 id or id 들로 이루어진 array
  • desktopPopUp : true 이면 Desktop 에서 딥링크를 실행했을 때, 새 창에서 작동합니다.

주의 : 사용자를 마켓으로 보내는 역할은 SDK에서 하기 때문에 딥링크 버튼에 앱마켓으로 보내는 <a> tagonclick 함수 등이 사용되면 안됩니다.

앱 중계 페이지로 사용link

중계 페이지에 SDK 를 연동하여 앱으로 이동하는 기능을 구현할 수 있습니다.

setDeeplinks 함수를 호출할 때, redirect: true 옵션을 주시면 웹페이지로 접근하는 모든 요청에 딥링크 기능을 수행합니다.

airbridge.setDeeplinks({
deeplinks: {
ios: "ablog://main",
android: "ablog://main",
desktop: "http://blog.ab180.co"
},
fallbacks: {
ios: "itunes-appstore",
// itunes-appstore(default), google-play, url
android: "google-play"
// google-play(default), itunes-appstore, url
},
redirect: true
});
  • redirect : true 이면 모든 요청에 딥링크 기능을 수행합니다.

설치 확인link

  1. Web SDK 가 설치된 웹페이지로 이동 (웹페이지 조회 이벤트 발생)
  2. 에어브릿지 대시보드 → 앱 선택 → 'Log Data' 아래의 'Realtime Log' 항목을 클릭해 주세요.
  3. 'Web SDK 로그' 항목 클릭
  4. 'Web Cookie ID 입력' 에 Web Cookie ID 를 입력해 주세요.
  • Web Cookie ID 확인: Web SDK가 설치된 웹페이지로 이동
    → 크롬 개발자 콘솔에서 'airbridge.client.clientId' 출력
    → 출력된 값이 'Web Cookie Id' 입니다.
  • 'Web Cookie Id' 노출이 확인되지 않는다면 설치 에 안내된 대로 설치되었는지 다시 한번 확인해주세요.

이벤트link

사용자의 중요한 행동들이 발생할 때, 이벤트를 전송해 유입 경로별 성과를 측정할 수 있습니다.

회원, 커머스 관련 9가지의 기본이벤트가 제공되고, 커스텀 이벤트를 정의하여 사용하실 수 있습니다.

모든 이벤트에 첨부되는 모든 정보는 선택적으로 추가할 수 있습니다.
이벤트에 대한 많은 정보는 정확한 통계 제공에 도움이 됨으로 추가하는 것을 권장합니다.

이벤트 - 회원link

회원 인앱 이벤트는 크로스 플랫폼 사용자 매칭 의 구성요소입니다.
가능하면 하나이상의 유저 정보를 포함하여 전송해 주시기 바랍니다.

회원가입 및 로그인 이벤트가 발생한 경우, 다음 로그아웃 이벤트 발생까지 모든 이벤트가 해당 유저에서 발생한 것으로 기록됩니다.

로그아웃 이벤트가 발생한 경우, 다음 회원가입 및 로그인 이벤트 발생까지 모든 이벤트가 유저 없이 발생한 것으로 기록됩니다.

회원가입link

메서드link

이름필드명타입파라미터 상세설명
signUpuserIdstring사용자 ID
userEmailstring사용자 이메일

코드 예시link

// userId, userEmail 모두 전송
airbridge.events.signUp({
userId: 'ab180',
userEmail: 'airbridge123@ab180.co'
});
// userId만 전송
airbridge.events.signUp({
userId: 'ab180'
});
// 사용자 정보는 보내지 않고, 회원가입 이벤트만 발생
airbridge.events.signUp();

로그인link

메서드link

이름필드명타입파라미터 상세설명
signInuserIdstring사용자 ID
userEmailstring사용자 이메일

코드 예시link

// userId, userEmail 모두 전송
airbridge.events.signIn({
userId: 'ab180',
userEmail: 'airbridge123@ab180.co'
});
// userId만 전송
airbridge.events.signIn({
userId: 'ab180'
});
// 사용자 정보는 보내지 않고, 로그인 이벤트만 발생
airbridge.events.signIn();

로그아웃link

메서드link

이름필드명타입파라미터 상세설명
signOut - - -

코드 예시link

airbridge.events.signOut();

이벤트 - 커머스link

사용자의 커머스 관련 행동을 추적합니다.

홈 화면 조회link

메서드link

이름필드명타입파라미터 상세설명
homeViewEvent - - -

코드 예시link

airbridge.events.homeViewEvent();

상품 상세 조회link

메서드link

productDetailsViewEvent

필드명타입상세 파라미터 필드명타입파라미터 상세설명
productsArray<Object> - - 상품 오브젝트 배열
productIDstring 상품 ID
namestring 상품 이름
pricenumber 상품 가격
currencystring 상품 통화
positionnumber포지션

코드 예시link

airbridge.events.productDetailsViewEvent({
products: [
{
productID: '1',
name: 'MacBook Pro',
price: 1548200,
currency: 'KRW',
position: 1
}
]
});

상품 리스트 조회link

메서드link

productListViewEvent

필드명타입상세 파라미터 필드명타입파라미터 상세설명
productListIDnumber - - 상품리스트 ID
productsArray<Product> - - 상품 오브젝트 배열
productIDstring상품 ID
namestring상품 이름
pricenumber상품 가격
currencystring상품 통화
positionnumber상품 포지션

코드 예시link

airbridge.events.productListViewEvent({
productListID: 36473926,
products: [
{
productID: '1',
name: 'MacBook Pro',
price: 1548200,
currency: 'KRW',
position: 1
},
{
productID: '2',
name: 'MacBook Air',
price: 1500000,
currency: 'KRW',
position: 2
}
]
});

검색 결과 조회link

메서드link

searchResultViewEvent

필드명타입상세 파라미터 필드명타입파라미터 상세설명
querystring - - 검색 Query
productsArray<Product> - - 상품 배열
productIDstring상품 ID
namestring상품 이름
pricenumber상풀 가격
currencystring상품 통화
positionnumber상품 포지션

코드 예시link

airbridge.events.searchResultViewEvent({
products: [
{
productID: '1',
name: 'MacBook Pro',
price: 1548200,
currency: 'KRW',
position: 1
},
{
productID: '2',
name: 'MacBook Air',
price: 1500000,
currency: 'KRW',
position: 2
}
],
query: '검색 Query'
});

장바구니 담기link

메서드link

addedToCart

필드명타입상세 파라미터 필드명타입파라미터 상세설명
cartIdstring - - 상품 장바구니 ID
totalValuenumber - - 상품 전체 밸류
currencystring - - 상품 통화
productsArray<Product> - - 상품 배열
productIDstring상품 ID
namestring상품 이름
pricenumber상품 가격
currencystring상품 통화
quantitynumber상품 수량
positionnumber상품 포지션

코드 예시link

airbridge.events.addedToCart({
products: [
{
productID: '1',
name: 'MacBook Pro',
price: 1548200,
currency: 'KRW',
quantity: 3,
position: 1
},
{
productID: '2',
name: 'MacBook Air',
price: 1500000,
currency: 'KRW',
quantity: 2,
position: 2
}
],
cartId: '73926365',
totalValue: 3048200,
currency: 'KRW'
});

결제link

메서드link

purchased

필드명타입상세 파라미터 필드명타입파라미터 상세설명
inAppPurchasedboolean - - 인앱 결제 여부
totalValuenumber - - 상품 전체 밸류
currencystring - - 상품 통화
productsArray<Product> - - 상품 배열
transactionIdstring상품 트랜잭션 ID
namestring상품 이름
pricenumber상풀 가격
currencystring상품 통화
quantitynumber상품 수량
positionnumber상품 포지션

코드 예시link

airbridge.events.purchased({
products: [
{
productID: '1',
name: 'MacBook Pro',
price: 1548200,
currency: 'KRW',
quantity: 3,
position: 1
},
{
productID: '2',
name: 'MacBook Air',
price: 1500000,
currency: 'KRW',
quantity: 2,
position: 2
}
],
inAppPurchased: true,
totalValue: 3048200,
currency: 'KRW',
transactionId: '16874326'
});

이벤트 - 커스텀link

인앱 이벤트를 커스텀 정의해서 사용할 수 있습니다.

이름필드명타입상세 파라미터 필드명타입파라미터 상세설명
sendcategorystring - - 이벤트 이름
infoObject - - 이벤트 정보
labelstring이벤트 하위 분류 1
actionstring이벤트 하위 분류 2
valuenumber이벤트 커스텀 값
customAttributesObject이벤트 커스텀 정보

코드 예시link

airbridge.events.send("category", {
label: "label",
action: "action",
value: 123.0,
customAttributes: {
gender: 'mail'
brand: 'Nike'
}
});

회원가입, 로그인, 장바구니 담기, 결제 이벤트 등의 모든 스탠다드 이벤트에도 action, label, customAttributes 필드를 사용할 수 있습니다.

코드 예시link

airbridge.events.purchased({
products: [
{
name: 'MacBook Pro',
price: 1548200,
currency: 'KRW',
}
],
transactionId: '16874326',
action: 'Electronic Devices',
label: 'Apple'
});
airbridge.events.signIn({
userId: '123',
customAttributes: {
gender: "male"
},
});

Category, Action, Label를 구분하였을때 대시보드 내에서 어떻게 보여지는지에 대해서는 아래 이벤트 분류 항목을 참고해주세요.

이벤트 분류link

에어브릿지 대시보드는 Category, Action, Label 을 통해 이벤트들을 분리하여 통계를 표시합니다.

Category 는 이벤트의 이름 입니다.
Action 은 이벤트의 하위 분류 1 입니다.
Label 은 이벤트의 하위 분류 2 입니다.

코드 예시link

for(var i=0; i<10; i++) {
airbridge.events.send("커스텀 회원가입", {
"label": "서울",
"action": "10대"
});
}
for(var i=0; i<20; i++) {
airbridge.events.send("커스텀 회원가입", {
"label": "서울",
"action": "20대"
});
}
for(var i=0; i<15; i++) {
airbridge.events.send("커스텀 회원가입", {
"label": "부산",
"action": "10대"
});
}
for(var i=0; i<8; i++) {
airbridge.events.send("커스텀 결제", {
"label": "간편결제 사용",
"action": "카카오페이 사용"
});
}
for(var i=0; i<7; i++) {
airbridge.events.send("커스텀 결제", {
"label": "간편결제 사용",
"action": "토스 사용"
});
}
for(var i=0; i<10; i++) {
airbridge.events.send("구독", {
"label": "일반"
});
}
for(var i=0; i<5; i++) {
airbridge.events.send("구독", {
"label": "프리미엄"
});
}

1) Web SDK를 설치(init)한 뒤, 위 코드를 크롬 콘솔에서 실행합니다.

2) 에어브릿지 대시보드의 Actual Report 설정에서 기준을 Event Category, Event Action, Event Label을 선택하고, 지표를 Events(Web)을 선택하면 아래와 같이 각 이벤트의 개수 통계를 볼 수 있습니다.

web event seperate

고급link

웹 to 앱 배너link

웹 to 앱 배너는 웹 사용자에게 앱설치를 유도하는 배너입니다.

모바일 사용자가 설치 버튼을 클릭

코드 예시link

airbridge.setBanner({
title: '에어스타일',
description: '본격취향저격 - 에어스타일에서 내 스타일을 찾아보세요',
keyColor: '#00a0c6',
position: 1
});

배너의 제목과 설명, 버튼의 색깔 등을 변경할 수 있습니다.

데스크탑 사용자의 경우, 웹 to 앱 배너를 통해 다운로드 링크를 SMS로 전송합니다.

유저 정보 수동 설정link

회원가입, 로그인, 로그아웃 이벤트 외에도 유저 정보를 수동으로 설정할 수 있습니다.

설정하면 다음 설정이나 signUp, signIn, signOut 함수 호출까지 모든 이벤트가 설정된 유저에서 발생한 것으로 기록됩니다.

코드 예시link

airbridge.setUserId('test');
airbridge.setUserEmail('test@ab180.co');

유저 속성 설정link

setUserAttributes을 사용하여 커스텀 사용자 속성을 설정할 수 있습니다.

코드 예시link

airbridge.setUserAttributes({
"age": 45,
"gender": "male",
"name": "Gildong Hong"
// ...
});

유저 정보 암호화link

유저의 정보를 모두 Hash (SHA256) 화 하여 전송합니다.

airbridge.init({
app: '앱 이름',
webToken: '웹 토큰',
...
userHash: true,
...
});

userHash 옵션은 기본 false 입니다.

init시 유저 정보 및 속성 설정link

init시 사용자 정보를 전달하여, 웹사이트에서 발생하는 모든 이벤트에 사용자 정보를 담을 수 있습니다.

airbridge.init({
app: '앱 이름',
webToken: '웹 토큰',
user: {
externalUserID: '123', // optional
externalUserEmail: 'user@example.com', // optional
externalUserPhone: '01012340000', // optional
attributes: { // optional
'name': 'Gildong Hong',
'age_group': 30,
'gender': 'Female'
}
},
userHash: true // optional
});

기본 캠페인 파라미터값 설정link

init 함수 호출시 defaultChannel, defaultParams 옵션을 주시면 모든 이벤트에 기본적으로 기록될 정보를 설정하실 수 있습니다.

코드 예시link

airbridge.init({
app: '앱 이름',
webToken: '웹 토큰',
defaultChannel: 'test site',
defaultParams: {
campaign: 'test event',
medium: 'test company'
}
});
  • defaultChannel : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고사 이름
  • defaultParams.campaign : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고 이름
  • defaultParams.medium : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고 매체
  • defaultParams.content : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고 내용
  • defaultParams.term : 웹페이지에서 발생하는 모든 이벤트에 기록 될 광고 검색어

쿠키 공유 옵션link

사용자 추적은 브라우저 쿠키를 통해 이루어지고, 이 정보는 subdomain 간에 공유됩니다.

init 함수 호출시 shareCookieSubdomain: false 옵션을 주시면 subdomain 간 정보공유를 중지합니다.

// initialize
airbridge.init({
app: '앱 이름',
webToken: '웹 토큰',
shareCookieSubdomain: false
});

shareCookieSubdomain 의 기본값은 true 입니다.

  • 여러개의 subdomain 들에서 하나의 서비스를 운영하시는 경우, true 를 추천합니다.
  • 여러개의 subdomain 들에서 서로 다른 서비스를 운영하시는 경우, false 를 추천합니다.

예시link

캠페인 A 트래킹링크 -> https://airbridge.io -> https://blog.airbridge.io 로 접속한 경우,

  • shareCookieSubdomain: true
    • https://airbridge.io에서 발생한 이벤트 -> 캠페인 A 에 기여
    • https://blog.airbridge.io에서 발생한 이벤트 -> 캠페인 A 에 기여
  • shareCookieSubdomain: false
    • https://airbridge.io에서 발생한 이벤트 -> 캠페인 A 에 기여
    • http://blog.airbridge.io에서 발생한 이벤트 -> 기본 설정값 에 기여

추적 중지link

SDK 에서 이벤트를 전송하는 기능을 중지할 수 있습니다.

airbridge.init({
app: 'App Name',
webToken: 'Web Token',
isTrackingEnabled: false
});

false : Stop tracking
true : Tracking

isTrackingEnabled 의 기본값은 true 입니다.

Google Tag Manager 이용link

Google Tag Manager 를 통해 SDK 를 활용합니다.

설치와 이벤트 추적에 관련된 설명은 설치 항목, 이벤트 항목 을 참고해주세요.

SDK 설치link

아래와 같은 단계를 거쳐 Google Tag Manager를 활용한 SDK 설치를 하실 수 있습니다.

  1. '작업공간 개요'에서 새 태그를 클릭합니다. 또는 컨테이너에 태그 > 새로 만들기를 선택합니다.

  2. '태그 구성'을 클릭하고, '맞춤설정'의 '맞춤 HTML'을 선택합니다.

  3. 아래 사진과 같이 'HTML' 부분에 설치 코드를 작성해 주세요.

  4. init 함수는 이벤트 함수보다 먼저 실행되어야 하기 때문에, '태그 구성'의 '고급 설정'에서 '태그 실행 우선순위'을 선택하여 0보다 큰 숫자(예:9999)를 입력해 줍니다.

  5. '태그 구성'의 '고급 설정'에서 '태그 실행 옵션'을 선택하여 '페이지당 한 번'을 선택해 줍니다.

  6. '트리거'를 클릭하고 '페이지뷰 - DOM 사용 가능(Pageview - DOM Ready)' 유형의 트리거를 선택합니다.

  7. 태그 생성을 완료하고 제출 버튼을 누릅니다.

  8. 대시보드에서 WEB SDK 로그가 기록되는지 확인합니다.

web gtm sdk install

이벤트 추적link

아래와 같은 단계를 거쳐 Google Tag Manager를 활용한 이벤트 추적을 하실 수 있습니다.

  1. '작업공간 개요'에서 새 태그를 클릭합니다. 또는 컨테이너에 태그 > 새로 만들기를 선택합니다.

  2. '태그 구성'을 클릭하고, '맞춤설정'의 '맞춤 HTML'을 선택합니다.

  3. 아래 사진과 같이 'HTML' 부분에 이벤트 추적 스크립트를 작성해 주세요.

  4. '고급 설정'의 '태그 실행 옵션'에서 이벤트가 발생하는 상황에 따라 '무제한', '이벤트당 한 번' 또는 '페이지당 한 번'을 선택할 수 있습니다.

  5. 트리거를 이벤트에 맞게 설정해주세요.

  6. 태그 생성을 완료하고 제출 버튼을 누릅니다.

  7. 대시보드에서 WEB SDK 로그가 기록되는지 확인합니다.

web gtm event track