Web SDK 연동 가이드

Adjust 웹 SDK를 사용하면 웹 앱에서 어트리뷰션, 이벤트 등을 기록할 수 있습니다. 이 가이드에서는 Adjust SDK를 앱과 연동하는 방법이 다루어집니다.

1. 프로젝트에 SDK 추가

시작하려면 웹 앱에 SDK를 추가해야 합니다. Adjust SDK는 CommonJS와 AMD(비동기 모듈 정의) 환경에서 모두 작동하고 CDN(콘텐츠 전송 네트워크)을 통해 로딩될 때 글로벌 Adjust 네임스페이스를 통해 액세스할 수 있습니다.

CDN 사용

CDN을 통해 SDK를 로딩할 때 프로덕션 빌드에 간소화된 버전을 사용해야 합니다. 버전을 다음과 같이 https://cdn.adjust.com/adjust-5.6.0.min.js 대상에 추가하여 버전을 지정할 수 있습니다. 다음과 같이 adjust-latest 패키지를 대상으로 지정하여 최신 버전을 확인할 수 있습니다: https://cdn.adjust.com/adjust-latest.min.js. 이 패키지는 자동으로 업데이트되므로 대상 파일을 변경할 필요가 없습니다.

CDN을 통해 SDK를 로드하려면 웹 앱의 <head> 태그 사이에 다음 스니펫을 추가합니다.

<script type="application/javascript">
   !(function (t, e, a, r, n, s, d, l, o, i, u) {
      (t.Adjust = t.Adjust || {}), (t.Adjust_q = t.Adjust_q || []);
      for (var c = 0; c < l.length; c++) o(t.Adjust, t.Adjust_q, l[c]);
      (i = e.createElement(a)),
         (u = e.getElementsByTagName(a)[0]),
         (i.async = !0),
         (i.src = "https://cdn.adjust.com/adjust-latest.min.js"),
         (i.onload = function () {
            for (var e = 0; e < t.Adjust_q.length; e++)
               t.Adjust[t.Adjust_q[e][0]].apply(t.Adjust, t.Adjust_q[e][1]);
            t.Adjust_q = [];
         }),
         u.parentNode.insertBefore(i, u);
   })(
      window,
      document,
      "script",
      0,
      0,
      0,
      0,
      [
         "initSdk",
         "getAttribution",
         "getWebUUID",
         "setReferrer",
         "trackEvent",
         "addGlobalCallbackParameters",
         "addGlobalPartnerParameters",
         "removeGlobalCallbackParameter",
         "removeGlobalPartnerParameter",
         "clearGlobalCallbackParameters",
         "clearGlobalPartnerParameters",
         "switchToOfflineMode",
         "switchBackToOnlineMode",
         "stop",
         "restart",
         "gdprForgetMe",
         "disableThirdPartySharing",
         "initSmartBanner",
         "showSmartBanner",
         "hideSmartBanner",
      ],
      function (t, e, a) {
         t[a] = function () {
            e.push([a, arguments]);
         };
      },
   );
</script>

Adjust SDK는 각 페이지에서 로드되며 페이지 로드 시 한 번 초기화됩니다.

하위 리소스 무결성(Subresource Integrity)

하위 리소스 무결성 검사를 사용하여 XSS(사이트 간 스크립팅) 공격을 완화하려는 경우, 다음의 콜을 통해 패키지를 실행하기 전에 검증할 수 있습니다.

<script type="application/javascript">
   !(function (t, e, a, r, n, s, o, d, l, i, u) {
      (t.Adjust = t.Adjust || {}), (t.Adjust_q = t.Adjust_q || []);
      for (var c = 0; c < d.length; c++) l(t.Adjust, t.Adjust_q, d[c]);
      (i = e.createElement(a)),
         (u = e.getElementsByTagName(a)[0]),
         (i.async = !0),
         (i.src = "https://cdn.adjust.com/adjust-latest.min.js"),
         (i.crossOrigin = "anonymous"),
         (i.integrity = s),
         (i.onload = function () {
            for (var e = 0; e < t.Adjust_q.length; e++)
               t.Adjust[t.Adjust_q[e][0]].apply(t.Adjust, t.Adjust_q[e][1]);
            t.Adjust_q = [];
         }),
         u.parentNode.insertBefore(i, u);
   })(
      window,
      document,
      "script",
      0,
      0,
      "sha384-BqbTn9xyk5DPznti1ZP8ksxKiOFhKufLBFWm5eNMCnZABFSG1eqQfcu5dsiZJHu5",
      0,
      [
         "initSdk",
         "getAttribution",
         "getWebUUID",
         "setReferrer",
         "trackEvent",
         "addGlobalCallbackParameters",
         "addGlobalPartnerParameters",
         "removeGlobalCallbackParameter",
         "removeGlobalPartnerParameter",
         "clearGlobalCallbackParameters",
         "clearGlobalPartnerParameters",
         "switchToOfflineMode",
         "switchBackToOnlineMode",
         "stop",
         "restart",
         "gdprForgetMe",
         "disableThirdPartySharing",
         "initSmartBanner",
         "showSmartBanner",
         "hideSmartBanner",
      ],
      function (t, e, a) {
         t[a] = function () {
            e.push([a, arguments]);
         };
      },
   );
</script>

npm 사용

Adjust SDK는 npm에서도 사용이 가능합니다. 프로젝트에 패키지를 추가하려면 선호하는 패키지 매니저를 사용하시기 바랍니다.

2. SDK 초기화

SDK를 설치한 후에는 초기화해야 합니다. 해당 기능 사용을 원하는 경우 initSdk 메서드를 호출합니다. 이 메서드는 앱에서 SDK가 작동하는 방식을 사용자 지정하는 여러 인수를 사용합니다.

SDK를 초기화하려면 initSdk 콜에 다음 인수를 추가해야 합니다.

appToken string: Adjust 앱 토큰입니다.
environment (string): SDK를 실행할 환경입니다. 테스트를 위해 샌드박스 모드에서 SDK를 실행하려면 sandbox를 전달합니다. 릴리즈를 위해 프로덕션 모드에서 SDK를 실행하려면 production을 전달합니다.

Adjust.initSdk({
   appToken: "YOUR_APP_TOKEN",
   environment: "sandbox",
});