시작하기

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 이 패키지는 자동으로 업데이트되므로 대상 파일을 변경할 필요가 없습니다.

팁:
SDK 파일은 캐시되어 빠른 서비스가 가능합니다. 이 캐시는 30분마다 업데이트됩니다. SDK 파일을 최신 버전으로 강제로 업데이트하려면 헤더에서 특정 버전을 대상으로 지정하시기 바랍니다.

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에서도 사용이 가능합니다. 프로젝트에 패키지를 추가하려면 선호하는 패키지 매니저를 사용하시기 바랍니다.

npm
yarn
pnpm
$ npm install @adjustcom/adjust-web-sdk --save

2. SDK 초기화

SDK를 설치한 후에는 초기화해야 합니다. 이를 위해 initSdk 메서드를 호출합니다. 이 메서드는 앱에서 SDK가 작동하는 방식을 사용자 지정하는 여러 파라미터를 사용합니다.

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

  • appToken: Adjust 앱 토큰.
  • environment: 앱이 실행 중인 환경 로컬에서 앱을 테스트하려면 이 값을 sandbox 로 설정하시기 바랍니다.
Javascript
Adjust.initSdk({
  appToken: 'YOUR_APP_TOKEN',
  environment: 'sandbox'
});

Adjust SDK 설정을 추가로 사용자 지정하려면 구성 기능 섹션의 가이드를 확인하세요.