[소스링크] WEB SDK

Web SDK 설치하기

소스링크 WEB SDK는 아래 방법으로 패키지를 설치할 수 있습니다.

브라우저에서 직접 로드하기

아래의 코드를 웹사이트의 <body> 태그가 끝나기 직전에 추가하세요. SDK가 비동기적으로 로드되므로 페이지 로딩을 막지 않습니다.

<script>
(function(w, d, s, g, u, m) {
  if (w[g]) return;
  var tracker = w[g] = { queue: [] };
  m.split(',').forEach(function(method) {
    tracker[method] = function() {
      tracker.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',
  'sauceLinkTracker',
  'https://dev.script.slink.im/slink-tracker.js',
  'init,setUser,track'
);

sauceLinkTracker.init({
  partnerUniqueId: 'YOUR_PARTNER_UNIQUE_ID', // 발급받은 파트너 고유 ID
  webToken: 'YOUR_WEB_TOKEN',             // 발급받은 웹 토큰
});
</script>

지원 브라우저

ES2020을 지원하는 모든 최신 브라우저에서 동작합니다.

브라우저	지원 여부
Chrome	✔️
Firefox	✔️
Safari	✔️
Edge	✔️
Internet Explorer	❌

SDK 초기화하기

init() 함수를 사용하여 초기화할 수 있습니다. init() 함수 호출 시 partnerUniqueId와 webToken을 필수로 전달해야 합니다.

SDK 초기화 옵션

옵션	필수여부	타입	설명
`partnerUniqueId`	필수	`string`	Sauce 로부터 발급받은 파트너 고유 ID입니다.
`webToken`	필수	`string`	Sauce 로부터 발급받은 웹 SDK 토큰입니다.

init 함수가 호출되면 SDK는 인증을 시도하고 이벤트 전송을 위한 준비를 마칩니다. 초기화가 완료되기 전에 track 메소드를 호출하면 이벤트가 내부 큐에 저장되었다가 초기화가 완료된 후 순차적으로 전송됩니다.

이벤트 트래킹

`track()`

track 메소드를 사용하여 실제 소스링크가 사용된 케이스일 경우 사용자 행동 이벤트를 전달합니다.

tracker.track(eventName, eventProperties);

eventName: 추적할 이벤트의 이름입니다. (필수)
eventProperties: 이벤트와 함께 전송할 추가 데이터입니다. (선택)

표준 이벤트

Sauce Link Tracker SDK는 주요 이벤트를 표준으로 정의하고 있습니다.

상품 상세 페이지 조회 (`PRODUCT_DETAIL`)

사용자가 상품 상세 페이지에 진입했을 때 발생하는 이벤트입니다.

옵션	필수여부	타입	설명
`productInfo`	필수	`Array`	실제 상품 페이지 도달시 확인된 상품 정보를 추가해야합니다.

tracker.track('PRODUCT_DETAIL', {
  productInfo: [
    {
      product_id: 'P0001',
      product_name: 'SauceLink 티셔츠',
      price: 30000,
      discount_price: 25000,
    },
  ],
});

주문 완료 (`ORDER_COMPLETE`)

사용자가 상품 구매를 완료했을 때 발생하는 이벤트입니다.

옵션	필수여부	타입	설명
`order_id`	필수	`String`	실제 상품 페이지 결제 완료시의 결제 ID 를 추가해주셔야합니다.
`productInfo`	필수	`Array`	실제 상품 페이지에서 결제 완료된 상품 정보를 추가해야합니다.

tracker.track('ORDER_COMPLETE', {
  order_id: 'ORDER-12345',
  productInfo: [
    {
      product_id: 'P0001',
      product_name: 'SauceLink 티셔츠',
      price: 30000,
      discount_price: 25000,
      quantity: 2,
    },
    {
      product_id: 'P0002',
      product_name: 'SauceLink 스티커',
      price: 5000,
      discount_price: 5000,
      quantity: 10,
    },
  ],
});

주문 취소 (`ORDER_CANCEL`)

사용자가 주문을 취소했을 때 발생하는 이벤트입니다.

tracker.track('ORDER_CANCEL', {
  order_id: 'ORDER-12345',
  productInfo: [
    {
      product_id: 'P0001',
      product_name: 'SauceLink 티셔츠',
      price: 30000,
      discount_price: 25000,
      quantity: 2,
    },
  ],
});