WEB SDK 가이드
이 가이드는 소스링크 WEB SDK를 활용해 웹사이트에서 발생하는 마케팅 성과를 트래킹 하는 방법을 안내합니다.
실제 고객사에서 사용하는 방식과 함께 주요 설정 방법 및 예시 코드를 제공합니다.
Web SDK 설치하기
소스링크 WEB SDK는 아래 방법을 통해 웹사이트에 설치할 수 있습니다.
브라우저에서 직접 로드하기
아래의 코드를 <head> 내부의 가장 하단에 추가해 주세요.
<script>
(function(w, d, s, g, u, m) {
if (w[g]) return;
var slink = w[g] = { queue: [] };
m.split(',').forEach(function(method) {
slink[method] = function() {
slink.queue.push([method, arguments]);
};
});
var scriptTag = d.createElement(s);
scriptTag.async = 1;
scriptTag.src = u;
var firstScript = d.getElementsByTagName(s)[0];
firstScript.parentNode.insertBefore(scriptTag, firstScript);
})(
window,
document,
'script',
'saucelink',
'https://sdk.saucelink.im/web/latest/saucelink.js',
'init,sendEvent'
);
saucelink.init({
partnerUniqueId: '발급받은 파트너ID',
webToken: '발급받은 웹토큰',
})
</script>테스트를 진행하는 경우, - js주소를 변경해 주세요. 테스트용 토큰은 별도로 발급해야 합니다.
https://stage.sdk.saucelink.im/web/latest/saucelink.js지원 브라우저
소스링크 Web SDK는 ES2020을 지원하는 최신 브라우저 환경에서 정상적으로 동작합니다.
| 브라우저 | 지원 여부 |
|---|---|
| Chrome | ⭕ |
| Firefox | ⭕️ |
| Safari | ⭕️ |
| Edge | ⭕️ |
| Internet Explorer | ❌ |
SDK 초기화하기
init() 함수를 호출하여 SDK를 초기화할 수 있습니다. 초기화 시 partnerUniqueId와 webToken값을 필수로 전달해야 합니다.
SDK 초기화 옵션
| 옵션 | 필수여부 | 타입 | 설명 |
|---|---|---|---|
partnerUniqueId | 필수 | string | Sauce 로부터 발급받은 파트너 고유 ID입니다. |
webToken | 필수 | string | Sauce 로부터 발급받은 웹 SDK 토큰입니다. |
init 함수가 호출되면 SDK는 인증을 시도하고 이벤트 전송을 위한 준비를 완료합니다.
초기화가 완료되기 전에 sendEvent 메소드를 호출한 경우, 이벤트는 내부 큐에 저장되었다가 초기화 완료 후 순차적으로 전송됩니다.
이벤트 트래킹
소스링크 Web SDK를 통해 상품 상세 조회, 장바구니 담기 클릭, 회원가입 완료와 같은 주요 데이터 수집을 할 수 있습니다.
현재 해당 데이터는 수집할 수 있으나, 소스어드민 > 분석 메뉴에서 항목 표기는 추후 지원될 예정입니다.
이벤트 전송 방법
sendEvent()
sendEvent()웹에서 발생한 사용자 행동 이벤트는 sendEvent 메소드를 사용해 전송합니다. 소스링크를 통해 발생한 실제 사용자 행동을 이벤트로 전달할 수 있습니다.
saucelink.sendEvent(eventName, eventProperties);eventName: 추적할 이벤트의 이름입니다. (필수)eventProperties: 이벤트와 함께 전송할 추가 데이터입니다. (선택)
표준 이벤트
saucelink WEB SDK는 주요 이벤트를 표준 이벤트로 정의하고 있습니다.
상품 상세 페이지 조회 (PRODUCT_DETAIL)
PRODUCT_DETAIL)사용자가 상품 상세 페이지에 진입했을 때 발생하는 이벤트입니다.
| 옵션 | 필수여부 | 타입 | 설명 |
|---|---|---|---|
productInfo | 필수 | Array | 실제 상품 페이지 도달 시 확인된 상품 정보를 추가해야 합니다. |
saucelink.sendEvent('PRODUCT_DETAIL', {
productInfo: [
{
product_id: 'P0001',
product_name: 'SauceLink 티셔츠',
price: 30000,
discount_price: 25000,
},
],
});주문 완료 (ORDER_COMPLETE)
ORDER_COMPLETE)사용자가 상품 구매를 완료했을 때 발생하는 이벤트입니다.
| 옵션 | 필수여부 | 타입 | 설명 |
|---|---|---|---|
order_id | 필수 | String | 실제 상품 페이지 결제 완료 시 결제 ID 를 추가해야 합니다. |
productInfo | 필수 | Array | 실제 상품 페이지에서 결제 완료된 상품 정보를 추가해야 합니다. |
productInfo[].product_id | 필수 | String | 상품ID로 어드민에서 등록한 제휴상품의 상품코드와 매칭이 필수입니다. |
productInfo[].product_name | 필수 | String | 상품 이름입니다. |
productInfo[].price | 필수 | Number | 할인전 상품 가격입니다. |
productInfo[].discount_price | 필수 | Number | 실제 결제,결제취소된 상품 할인 가격입니다. |
productInfo[].quantity | 필수 | Number | 실제 결제,결제 취소된 상품의 수량입니다. |
productInfo[].purchase_confirmed_at | 선택 | String | 구매 확정 일시입니다. 값을 전달할 경우 UTC 기준 ISO 8601 형식(예: 2026-06-12T15:00:00Z)으로 반드시 작성해야 하며, 미입력 시 전송되지 않습니다. |
saucelink.sendEvent('ORDER_COMPLETE', {
order_id: 'ORDER-12345',
productInfo: [
{
product_id: 'P0001',
product_name: 'SauceLink 티셔츠',
price: 30000,
discount_price: 25000,
quantity: 2,
purchase_confirmed_at: '2026-06-12T15:00:00Z',
},
{
product_id: 'P0002',
product_name: 'SauceLink 스티커',
price: 5000,
discount_price: 5000,
quantity: 10,
purchase_confirmed_at: '2026-06-12T15:00:00Z',
},
],
});주문 취소 (ORDER_CANCEL)
ORDER_CANCEL)사용자가 주문을 취소했을 때 발생하는 이벤트입니다.
saucelink.sendEvent('ORDER_CANCEL', {
order_id: 'ORDER-12345',
productInfo: [
{
product_id: 'P0001',
product_name: 'SauceLink 티셔츠',
price: 30000,
discount_price: 25000,
quantity: 2,
},
],
});상품 장바구니 추가 (ADD_TO_CART)
ADD_TO_CART)사용자가 장바구니 추가 버튼 클릭시 발생시키는 이벤트입니다.
| 옵션 | 필수여부 | 타입 | 설명 |
|---|---|---|---|
productInfo | 필수 | Array | 실제 상품 페이지 도달 시 확인된 상품 정보를 추가해야 합니다. |
saucelink.sendEvent('ADD_TO_CART', {
productInfo: [
{
product_id: 'P0001',
product_name: 'SauceLink 티셔츠',
price: 30000,
discount_price: 25000,
quantity: 1,
},
],
});회원 가입 (SIGN_UP)
SIGN_UP)사용자의 회원 가입 여부를 체크후에 발생시키는 이벤트입니다.
| 옵션 | 필수여부 | 타입 | 설명 |
|---|---|---|---|
signup_completed | 필수 | Boolean | 실제 고객이 회원 가입을 하였는지에 대한 값을 추가해야합니다. |
saucelink.sendEvent('SIGN_UP', {
signup_completed :true
});정산의 경우, 소스링크 정산 가이드 를 참고해 진행합니다.
Updated about 2 months ago