시작하기

스마트 배너 SDK는 웹사이트나 웹 앱에 Adjust 스마트 배너를 추가할 수 있도록 해줍니다. 이 가이드는 프로젝트에 SDK를 연동하는 방법을 보여줍니다.

1. SDK 설치

기존의 자바스크립트 프로젝트에 SDK를 추가하려면 패키지 매니저를 사용하여 설치합니다.

npm
Yarn
pnpm
$ npm install --save @adjustcom/smart-banner-sdk

디펜던시 설치가 완료되면 프로젝트로 가져오기 합니다.

import AdjustSmartBanner from "@adjustcom/smart-banner-sdk";

CDN 사용

런타임 디펜던시로의 설치를 원하지 않는다면 SDK를 CDN(콘텐츠 전송 네트워크)을 통해 로딩할 수 있습니다. 로딩 시 SDK는 글로벌 AdjustSmartBanner 네임스페이스를 통해 액세스될 수 있습니다.

CDN을 통해 SDK를 로딩할 때, 퍼포먼스 개선을 위해 간소화된 버전을 사용해야 합니다.

  • 특정 버전. 예: https://cdn.adjust.com/adjust-smart-banner-0.0.7.min.js
  • 최신 버전 예: https://cdn.adjust.com/adjust-smart-banner-latest.min.js

SDK 파일은 최대한 빨리 제공되기 위해 CDN에 캐시됩니다. 캐시는 30분마다 새로고침 됩니다. 업데이트를 즉시 수신하려면 SDK의 특정 버전을 대상으로 지정하시기 바랍니다.

CDN을 통해 스마트 배너 SDK를 로드하려면 페이지의 <head> 태그에 다음 스니펫을 붙여 넣습니다.

<script type="application/javascript"> !function(e,n,t,a,o,s,r,i,c){var d=o+"_q";e[o]=e [o]||{},e[d]=e[d]||[];for(var u=0;u<s.length;u++)r(e[o],e[d] ,s[u]);i=n.createElement(t),c=n.getElementsByTagName(t)[0],i.async=!0,i.src="https://cdn.adjust.com/ adjust-smart-banner-latest.min.js",i.onload=function(){e[o]=e[o].default;for(var n=0;n<e[d].length;n++)e[o][e[d][n][0]]?e[o][e[d][n][0]].apply (e[o],e[d][n][1]):console.error("No such function found in "+o+": "+e[d][n][0]);e[d]=[]},c.parentNode.insertBefore(i,c)}(window,document,"script",0,"AdjustSmartBanner",["init","show","hide","setLanguage","setIosDeepLinkPath","setAndroidDeepLinkPath","setContext","setAndroidAppSchema","setDeepLinkPath"],(function(e,n,t){e[t]=function(){n.push([t,arguments])}}));
</script>

2. SDK 초기화

스마트 배너 SDK를 초기화하려면 AdjustSmartBanner.init 메서드를 호출합니다.

AdjustSmartBanner.init({
   appToken: "APP_TOKEN",
});

이 메서드를 호출하면 SDK는 기기 플랫폼을 감지합니다. 모바일 플랫폼 기기인 경우 SDK는 사용 가능한 스마트 배너를 로딩하고, 초기화 이후 대상 배너가 즉시 표시됩니다.

프로젝트가 단일 플랫폼 앱을 타겟팅하는 경우, 각 플랫폼 토큰을 appToken 객체의 키로 전달합니다.

AdjustSmartBanner.init({
   appToken: {
      ios: "IOS_APP_TOKEN",
      android: "ANDROID_APP_TOKEN",
   },
});
참고:
설정 옵션의 전체 목록은 초기화 옵션 을 확인하시기 바랍니다.

3. 배너 언어 로켤라이제이션

더 나은 사용자 경험을 위해 스마트 배너 언어를 로켤라이제이션할 수 있습니다. 스마트 배너 SDK는 브라우저에서 사용된 언어를 읽고, 배너의 로켤라이제이션된 사본이 있는 경우 이를 표시합니다. 이러한 액션을 오버라이드하려면 SDK가 다른 언어를 사용하도록 설정할 수 있습니다. 언어 설정에는 두 가지 방법이 있습니다.

  • AdjustSmartBanner.init 메서드에 language 파라미터로써 전달합니다.
  • 문자열 파라미터로 2자 언어 코드를 사용하여 setLanguage 메서드를 호출합니다.
AdjustSmartBanner.setLanguage("fr");

이제 모든 단계가 완료되어, SDK가 프로젝트에 연동됩니다. SDK의 기능과 각기 다른 기능을 구성하는 방법에 대한 정보는 본 섹션의 기타 가이드를 참조하시기 바랍니다.