Singular 배너 연동 방법(개발자 가이드)

팔로우
Avatar
Dora Kishinevsky
Updated

싱귤러 배너는 엔터프라이즈 기능입니다. 이 기능에 대해 자세히 알아보려면 고객 성공 매니저에게 문의하세요.

업데이트(2023년 3월): 싱귤러가 클라이언트 힌트를 받을 수 있는 새로운 단계가 추가되었습니다(자세히 알아보기).

모바일 웹사이트에 싱귤러 배너를 표시하여 웹 사용자를 앱으로 원활하게 유도하고 가장 관련성이 높은 앱 콘텐츠를 표시할 수 있습니다. 웹사이트에서 싱귤러 배너를 활성화하면 조직은 싱귤러 배너 UI를 통해 배너를 쉽게 디자인, 배포 및 유지 관리할 수 있습니다.

대상 가이드 개발자
전제조건 딥링크 지원을 포함하여 앱에 싱귤러 모바일 SDK가 연동되어 있어야 합니다.
관련 문서
  • 싱귤러 배너를 만드는 방법(시각적 가이드)
  • 싱귤러 배너 FAQ

단계별

1

사이트에 Singular 웹사이트 SDK 스크립트 추가하기

싱귤러는 싱귤러의 CDN에서 SDK 자바스크립트 코드를 호스팅합니다. 추적하려는 각 페이지의 <head> 태그 안에 다음 코드를 추가합니다. 배너를 지원하는 SDK 버전을 사용하기 위해 추가해야 하는 코드입니다.

<head>
<!-- 최신 SDK 버전 사용   -->
<script
 src="https://web-sdk-cdn.singular.net/singular-sdk/latest/singular-sdk.js">
</script>
</head>
2

싱귤러에 클라이언트 힌트 데이터에 액세스할 수 있는 권한 부여하기

2023년 2월~3월에 시행된 크롬 기반 웹 브라우저의 사용자 에이전트 데이터에 대한 새로운 제한으로 인해 광고주는 이제 클라이언트 힌트 데이터를 대신 가져와야 하며, 이 데이터를 수신할 수 있는 권한을 Singular Web SDK에 부여해야 합니다. 자세한 내용은 배너 FAQ를 참조하세요.

웹사이트는 다음을 수행해야 합니다:

  1. 클라이언트 힌트 요청을 시작합니다(accept-ch 헤더).
  2. 브라우저가 배너 가져오기 요청에 대한 클라이언트 힌트(권한-정책 헤더)를 보낼 수 있도록 Singular(써드파티SDK)에 권한을 부여합니다.

페이지 로드 응답에 다음 응답 헤더를 추가합니다:

accept-ch:
sec-ch-ua-model,
sec-ch-ua-platform-version,
sec-ch-ua-full-version-list

permissions-policy:
ch-ua-model=("https://sdk-api-v1.singular.net"),
ch-ua-platform-version=("https://sdk-api-v1.singular.net"),
ch-ua-full-version-list=("https://sdk-api-v1.singular.net")

 
3

싱귤러 웹 SDK 초기화 및 배너 표시

페이지가 로드될 때마다 SDK 초기화 코드를 호출해야 합니다. 이는 모든 싱귤러 배너 및/또는 웹 어트리뷰션 기능의 전제 조건입니다.

SDK를 초기화하려면 다음 코드를 사용합니다.

  • 개발자 도구 > SDK 키에서 싱귤러 플랫폼을 통해 검색할 수 있는 SDK 키와 SDK 시크릿이 필요합니다.
  • 또한 웹사이트의 productId를 입력해야 합니다. "com.example.site"와 같은 역방향 DNS 표기를 사용하는 것이 좋습니다. 이는 Singular 플랫폼 전체에서 귀하의 웹사이트를 식별하는 데 사용됩니다.
// 단일 배너 구성 개체를 생성하고 웹투앱 지원을 활성화합니다.
// 사용자를 사이트로 유도한 광고 네트워크를 추적하려면 웹투앱이 필요합니다.
var bannersOptions = new BannersOptions().withWebToAppSupport();

// 일반 SDK 구성 개체를 만들고 Singular 배너를 활성화합니다.
var config = new SingularConfig(sdkKey, sdkSecret,
   productId).withBannersSupport(bannersOptions);

// SDK 초기화
singularSdk.init(config);

// 배너 표시
singularSdk.showBanner();

참고:
4

페이지 경로에서 배너 다시 표시(Single Page Application만 해당)

애플리케이션이 단일 페이지인 경우 각 페이지 경로에서 배너를 숨겼다가 다시 표시해야 합니다. 이렇게 하면 싱귤러가 웹 경험에 적합한 배너를 제공할 수 있습니다.

배너를 숨겼다가 다시 표시하려면 다음 코드를 사용합니다:

singularSdk.hideBanner();
singularSdk.showBanner();

이것이 표준 통합을 위한 프로세스의 마지막 단계입니다. 이제 UA 팀은 Singular에 로그인하고 자동화(Automation) > 배너(Banners)로 이동하여 배너 생성을 시작할 수 있습니다. 자동화 > 배너에서 선택한 옵션에 따라 배너가 웹사이트에 표시됩니다.

다음 단계는 선택사항입니다.
5

[고급 옵션] 링크 설정 사용자 지정

Singular에서는 코드를 통해 배너의 링크를 맞춤 설정할 수 있는 방법을 제공합니다.

링크를 개인화하려면 다음과 같이 하세요:

  1. LinkParams 객체를 생성하고 아래 함수 중 하나 이상을 사용합니다. singularSdk.showBanner()를 호출하기 전에 이 작업을 수행합니다.
  2. 그런 다음 showBanner()를 호출할 때 LinkParams 객체를 전달합니다.

예시:

// LinkParams 객체 정의
let bannerParams = new LinkParams();

// 링크 옵션 구성(아래 각 옵션에 대한 자세한 내용 참조)
bannerParams.withAndroidRedirect("androidRedirectValue");
bannerParams.withAndroidDL("androidDLParamValue");
bannerParams.withAndroidDDL("androidDDLparamValue");
bannerParams.withIosRedirect("iosRedirectValue");
bannerParams.withIosDL("iosDLValue");
bannerParams.withIosDDL("iosDDLValue");

// 정의된 옵션이 있는 배너 표시
singularSdk.showBanner(bannerParams);

옵션 목록:

메서드 설명
withAndroidRedirect Android 앱 다운로드 페이지(일반적으로 Play 스토어 페이지)로 리디렉션 링크를 전달합니다.
withAndroidDL Android 앱 내 페이지에 대한 딥링크를 전달합니다.
withAndroidDDL 디퍼드 딥링크, 즉 사용자가 아직 설치하지 않은 Android 앱의 페이지로 연결되는 링크를 전달합니다.
withIosRedirect iOS 앱 다운로드 페이지(일반적으로 앱 스토어 페이지)로 리디렉션 링크를 전달합니다.
withIosDL iOS 앱 내 페이지에 대한 딥링크를 전달합니다.
withIosDDL 디퍼드 딥링크, 즉 사용자가 아직 설치하지 않은 iOS 앱의 페이지로 연결되는 링크를 전달합니다.
6

[고급 옵션] 코드를 사용하여 배너 강제 숨기기/표시하기

3단계에서 언급했듯이 단일 페이지 애플리케이션(SPA)을 사용하는 경우 각 페이지 경로에서 hideBanner( ) 및 showBanner( ) 메서드를 사용하여 적절한 배너가 전달되도록 해야 합니다(위 3단계 참조).

또한 표시될 배너를 숨기거나 숨긴 배너를 다시 표시하려는 경우 코드 전체에서 hideBanner() 및 showBanner() 메서드를 사용할 수 있습니다.

메서드 설명
singularSdk.hideBanner() 페이지에서 표시되는 배너를 숨깁니다.
singularSdk.showBanner() 미리 구성된 배너를 표시합니다.
singularSdk.showBanner(params) 미리 구성된 배너를 표시하되 linkParams 객체에 정의된 옵션으로 링크를 재정의합니다(4단계 참조).