Guides
Start typing to search…

[소스링크] 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필수stringSauce 로부터 발급받은 파트너 고유 ID입니다.
webToken필수stringSauce 로부터 발급받은 웹 SDK 토큰입니다.

init 함수가 호출되면 SDK는 인증을 시도하고 이벤트 전송을 위한 준비를 완료합니다.

초기화가 완료되기 전에 sendEvent 메소드를 호출한 경우, 이벤트는 내부 큐에 저장되었다가 초기화 완료 후 순차적으로 전송됩니다.

이벤트 트래킹

이벤트 전송 방법

sendEvent()

웹에서 발생한 사용자 행동 이벤트는 sendEvent 메소드를 사용해 전송합니다. 소스링크를 통해 발생한 실제 사용자 행동을 이벤트로 전달할 수 있습니다.


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

표준 이벤트

saucelink WEB SDK는 주요 이벤트를 표준 이벤트로 정의하고 있습니다.

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

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

옵션필수여부타입설명
productInfo필수Array실제 상품 페이지 도달 시 확인된 상품 정보를 추가해야 합니다.
saucelink.sendEvent('PRODUCT_DETAIL', {
  productInfo: [
    {
      product_id: 'P0001',
      product_name: 'SauceLink 티셔츠',
      price: 30000,
      discount_price: 25000,
    },
  ],
});

주문 완료 (ORDER_COMPLETE)

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

옵션필수여부타입설명
order_id필수String실제 상품 페이지 결제 완료 시 결제 ID 를 추가해야 합니다.
productInfo필수Array실제 상품 페이지에서 결제 완료된 상품 정보를 추가해야 합니다.
saucelink.sendEvent('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)

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

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

📘

정산의 경우, 소스링크 정산 가이드 를 참고해 진행합니다.

Updated 12 days ago