플레어레인 Web SDK 연동 가이드 - 플레어레인 가이드

개발자 가이드

Web SDK

플레어레인 Web SDK를 통해 웹 푸시﻿ 채널을 포함하여 웹사이트 유저를 대상으로 CRM 마케팅을 진행할 수 있습니다. 본 가이드에서는 자사몰 등 직접 운영중인 웹사이트에 SDK를 설치하는 과정을 소개합니다.
﻿
1. SDK 설치 및 초기화
웹사이트 </body> 태그 바로 위에 다음 스크립트를 추가합니다. 프로젝트 ID는 콘솔의 [프로젝트] 페이지에서 확인할 수 있습니다.
JS
<script src="https://cdn.flarelane.com/WebSDK.js" charset="UTF-8"></script>
<script>FlareLane.initialize({ projectId: "프로젝트 ID" });</script>

<script src="https://cdn.flarelane.com/WebSDK.js" charset="UTF-8"></script>
<script>FlareLane.initialize({ projectId: "프로젝트 ID" });</script>
﻿
﻿
﻿
2. 유저ID 연동
웹 푸시 구독 시 플레어레인에 생성된 기기는 '익명의 기기'이며 고객사가 별도로 관리하는 고유한 유저 ID﻿를 연동함으로써 플레어레인의 기기와 고객사의 유저ID를 매칭할 수 있습니다.
유저ID가 연동되어있으면 많은 이점이 있습니다. 회원과 비회원을 구분할 수 있고, 고객사는 언제든지 유저ID를 기준으로 푸시 알림 발송이 가능하기 때문에 초기 연동시 권장드리고 있습니다.
보통 유저가 회원가입이나 로그인 성공 시, setUserId 함수를 통해 유저ID를 연동합니다. 
JS
FlareLane.setUserId("USER_ID");
FlareLane.setUserId("USER_ID");
﻿
﻿
﻿
3. (선택) 웹 푸시 설정
플레어레인 콘솔 내 [채널] > [웹 푸시] 를 선택하여 기본 정보 입력을 시작합니다.
﻿
1. 웹사이트 정보 입력
﻿
항목
설명
웹사이트 이름
푸시 제목 미입력 시 기본 노출될 사이트 대표 이름 입력
웹사이트 URL
https:// 로 시작하는 웹 푸시가 설치될 URL 입력 (주소 불일치 시 웹 푸시 미동작)
루트 URL 입력만 가능하며, 해당 URL을 기준으로 모바일용 서브도메인(m.example.com)이 추가 지원됩니다.
2. sw.js 파일 업로드
다음 sw.js 파일을 다운받고 우리 웹사이트의 루트 경로에 업로드합니다. (ex. example.com 도메인의 sw.js 파일의 경우 example.com/sw.js 로 접속이 가능해야 합니다.)
sw.js
﻿
정상 업로드한 경우 다음과 같이 외부에서 파일 접근이 가능합니다:
﻿https://gp.flarelane.com/sw.js﻿
3. 연동 완료 및 심화 설정
iOS 웹 푸시의 경우 현재 애플 정책에 의해 Safari 브라우저 내 '홈 화면에 추가' 후 만들어진 웹앱을 통해 접속했을 때 웹 푸시가 활성화됩니다. 자세한 내용은 iOS 웹 푸시 소개 및 동작 원리﻿를 참고하세요.
﻿
PC(윈도우)
﻿
﻿
모바일(안드로이드)
﻿
모든 연동이 완료되면 유저는 웹사이트 방문 시 구독을 위한 팝업이 노출됩니다. (언어는 브라우저 언어에 따라 다름)
허용을 누르게 되면 자동으로 해당 유저는 알림 구독 상태가 되며, 이후 브라우저를 벗어나도 알림을 받을 수 있는 상태가 됩니다.
﻿
4. (선택) 추가 연동
인앱메시지(팝업) 노출
﻿인앱메시지(팝업)﻿ 를 참고하여 개발자가 직접 팝업이 노출될 타이밍에 코드 1줄(displayInApp)을 추가합니다.
고객 데이터 연동
 고객 여정 캠페인﻿ 및 초개인화 메시지﻿ 등 초개인화 푸시 마케팅에 필요한 고객 데이터 연동﻿을 진행합니다.
푸시 클릭 시 커스텀 동작 정의
﻿Web SDK Reference﻿ 내 setNotificationConvertedHandler 함수를 사용합니다.
﻿

항목	설명
웹사이트 이름	푸시 제목 미입력 시 기본 노출될 사이트 대표 이름 입력
웹사이트 URL	https:// 로 시작하는 웹 푸시가 설치될 URL 입력 (주소 불일치 시 웹 푸시 미동작) 루트 URL 입력만 가능하며, 해당 URL을 기준으로 모바일용 서브도메인(m.example.com)이 추가 지원됩니다.

iOS: Swizzling 비활성화

카페24 연동하기