adjust-icon

Web SDK 연동 가이드

Adjust 웹 SDK를 사용하면 웹 앱에서 어트리뷰션, 이벤트 및 기타 데이터를 기록할 수 있습니다. 이 가이드에서는 SDK를 앱과 연동하는 방법을 설명합니다.

1. 프로젝트에 SDK 추가

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

CDN 사용

CDN을 통해 SDK를 로딩할 때 프로덕션 빌드에 간소화된 버전을 사용해야 합니다.

  • 다음과 같이 CDN 대상에 추가하여 특정 버전을 로드할 수 있습니다. https://cdn.adjust.com/adjust-5.7.2.min.js
  • 최신 버전을 로드하려면 다음과 같이 adjust-latest 패키지를 사용합니다. https://cdn.adjust.com/adjust-latest.min.js 이 패키지는 자동으로 업데이트되므로 대상 파일을 변경할 필요가 없습니다.

CDN을 통해 SDK를 로드하려면 웹 앱의 <head> 요소 안에 다음 스니펫을 추가합니다.

<script type="application/javascript">
!function(t,r,e,a,n,o,i,l,c,s,d,h,u){var f=i+"_q",m=i+"_c";t[i]=t[i]||{},t[f]=t[f]||[],t[m]=t[m]||[];for(let r=0;r<l.length;r++)d(t[i],t[f],l[r]);for(let r=0;r<c.length;r++){var g,b=c[r][0],p=c[r][1];t[i][b]=function(...r){return g=this,t[m].push((function(){g[s]=new t[i][b](...r)})),g};for(let r=0;r<p.length;r++){const e=p[r];t[i][b].prototype[e]=function(...r){t[m].push((function(){g[s][e](...r)}))}}}h=r.createElement(e),u=r.getElementsByTagName(e)[0],h.async=!0,h.src="https://cdn.adjust.com/adjust-latest.min.js",h.onload=function(){for(var r=0;r<t[m].length;r++)t[m][r]();t[m]=[];for(r=0;r<t[f].length;r++)t[f][r][1][0][s]?t[i][t[f][r][0]](t[f][r][1][0][s]):t[i][t[f][r][0]].apply(t[i],t[f][r][1]);t[f]=[]},u.parentNode.insertBefore(h,u)}(window,document,"script",0,0,0,"Adjust",["initSdk","getAttribution","getWebUUID","waitForAttribution","waitForWebUUID","setReferrer","trackEvent","addGlobalCallbackParameters","addGlobalPartnerParameters","removeGlobalCallbackParameter","removeGlobalPartnerParameter","clearGlobalCallbackParameters","clearGlobalPartnerParameters","switchToOfflineMode","switchBackToOnlineMode","stop","restart","gdprForgetMe","disableThirdPartySharing","trackThirdPartySharing","initSmartBanner","showSmartBanner","hideSmartBanner"],[["ThirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj",(function(t,r,e){t[e]=function(){r.push([e,arguments])}}));
</script>

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

하위 리소스 무결성

하위 리소스 무결성 검사를 사용하여 XSS(사이트 간 스크립팅) 공격을 완화할 수 있습니다. 패키지를 실행하기 전에 검증하려면 다음 스니펫(추가 crossOrigin, integrity, 인코딩된 해시 확인)을 사용합니다.

<script type="application/javascript">
   !function(t,r,a,e,n,o,i,l,s,c,d,h,u){var f=i+"_q",m=i+"_c";t[i]=t[i]||{},t[f]=t[f]||[],t[m]=t[m]||[];for(let r=0;r<l.length;r++)d(t[i],t[f],l[r]);for(let r=0;r<s.length;r++){var g,b=s[r][0],p=s[r][1];t[i][b]=function(...r){return g=this,t[m].push((function(){g[c]=new t[i][b](...r)})),g};for(let r=0;r<p.length;r++){const a=p[r];t[i][b].prototype[a]=function(...r){t[m].push((function(){g[c][a](...r)}))}}}h=r.createElement(a),u=r.getElementsByTagName(a)[0],h.async=!0,h.src="https://cdn.adjust.com/adjust-5.7.2.min.js",o&&(h.crossOrigin="anonymous",h.integrity=o),h.onload=function(){for(var r=0;r<t[m].length;r++)t[m][r]();t[m]=[];for(r=0;r<t[f].length;r++)t[f][r][1][0][c]?t[i][t[f][r][0]](t[f][r][1][0][c]):t[i][t[f][r][0]].apply(t[i],t[f][r][1]);t[f]=[]},u.parentNode.insertBefore(h,u)}(window,document,"script",0,0,"sha384-3BJePftWPBpqzii4G4Z1wjO/OaXCIpqAZ/4hbIB8KGBvrmSwZQLUflAaqRa2poWO","Adjust",["initSdk","getAttribution","getWebUUID","waitForAttribution","waitForWebUUID","setReferrer","trackEvent","addGlobalCallbackParameters","addGlobalPartnerParameters","removeGlobalCallbackParameter","removeGlobalPartnerParameter","clearGlobalCallbackParameters","clearGlobalPartnerParameters","switchToOfflineMode","switchBackToOnlineMode","stop","restart","gdprForgetMe","disableThirdPartySharing","trackThirdPartySharing","initSmartBanner","showSmartBanner","hideSmartBanner"],[["ThirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj",(function(t,r,a){t[a]=function(){r.push([a,arguments])}}));hirdPartySharing",["addGranularOption","addPartnerSharingSetting"]]],"__realObj",(function(t,r,e){t[e]=function(){r.push([e,arguments])}}));
</script>

npm 사용

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

Terminal window
$ npm install @adjustcom/adjust-web-sdk --save

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" });