adjust-icon

스마트 배너 SDK 연동 가이드

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

1. SDK 설치

기존 Javascript 프로젝트에 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의 기능과 각기 다른 기능을 구성하는 방법에 대한 정보는 본 섹션의 기타 가이드를 참조하시기 바랍니다.