웹 푸시(Web Push) 연동하기

플레어레인을 사용하여 웹 푸시(Web Push) 알림을 코드 1줄로 구현할 수 있습니다.
사전 준비
﻿플레어레인 관리자 에서 회원가입 후 프로젝트를 생성합니다.
[채널] > [웹 푸시] 를 선택하여 웹 푸시 연동을 시작합니다.
﻿
﻿
1. 웹사이트 정보 입력
﻿
항목
설명
웹사이트 이름
푸시 제목 미입력 시 기본 노출될 사이트 대표 이름 입력
웹사이트 URL
https:// 로 시작하는 웹 푸시가 설치될 URL 입력 (주소 불일치 시 웹 푸시 미동작)
루트 URL 입력만 가능하며, 해당 URL을 기준으로 모바일용 서브도메인(m.example.com)이 추가 지원됩니다.
﻿
2. ServiceWorker 파일 업로드
웹 푸시 사용을 위해 ServiceWorker 가 활성화되어야 합니다. 콘솔 내 파일 다운로드 버튼을 클릭하여 sw.js 파일을 받은 뒤, 웹사이트 루트 경로로 업로드하여 외부 접근이 가능하도록 합니다.
(ex. example.com 도메인의 sw.js 파일의 경우 example.com/sw.js 로 접속이 가능해야 합니다.)
﻿
이미 ServiceWorker를 사용 중이라면 해당 파일에 다음 스크립트를 추가합니다.
JS
importScripts('https://cdn.flarelane.com/ServiceWorker.js');
importScripts('https://cdn.flarelane.com/ServiceWorker.js');
﻿
﻿
3. SDK 삽입 및 초기화 코드 구현
웹사이트 </body> 태그 바로 위에 다음 스크립트를 추가합니다. 프로젝트 ID는 콘솔의 [프로젝트] 페이지에서 확인할 수 있습니다.
플레어레인 SDK가 제공하는 함수 리스트는  Mobile Push SDK Reference﻿ 에서 확인할 수 있습니다.
JS
<script src="https://cdn.flarelane.com/WebSDK.js" charset="UTF-8"></script>
<script>
    FlareLane.initialize({
        projectId: "프로젝트 ID",
        // 사용중인 별도 이름의 ServiceWorker가 있는 경우 해당 경로
		// serviceWorkerPath: '/otherServiceWorker.js'
    });
</script>

<script src="https://cdn.flarelane.com/WebSDK.js" charset="UTF-8"></script>
<script>
    FlareLane.initialize({
        projectId: "프로젝트 ID",
        // 사용중인 별도 이름의 ServiceWorker가 있는 경우 해당 경로
		// serviceWorkerPath: '/otherServiceWorker.js'
    });
</script>
﻿
﻿
4. 연동 완료 및 심화 설정
iOS 웹 푸시의 경우 현재 애플 정책에 의해 Safari 브라우저 내 '홈 화면에 추가' 후 만들어진 웹앱을 통해 접속했을 때 웹 푸시가 활성화됩니다. 자세한 내용은 iOS 웹 푸시(Web Push) 소개 및 동작 원리﻿를 참고하세요.
﻿
PC(윈도우)
﻿
﻿
모바일(안드로이드)
﻿
모든 연동이 완료되면 유저는 웹사이트 방문 시 구독을 위한 팝업이 노출됩니다. (언어는 브라우저 언어에 따라 다름)
허용을 누르게 되면 자동으로 해당 유저는 알림 구독 상태가 되며, 이후 브라우저를 벗어나도 알림을 받을 수 있는 상태가 됩니다.
﻿
5. 추가 연동
초개인화 마케팅을 위해 고객 데이터를 연동합니다.
 고객 여정 자동화﻿ 및 메시지 개인화﻿ 등 초개인화 푸시 마케팅에 필요한 고객 데이터 연동﻿을 진행합니다.
푸시 클릭 시 동작을 정의하고 싶습니다.
﻿Web Push SDK Reference﻿ 내 setNotificationConvertedHandler 함수를 사용합니다.
﻿

iOS: Swizzling 비활성화

카페24 연동하기

Docs powered by Archbee

TABLE OF CONTENTS

사전 준비

1. 웹사이트 정보 입력

2. ServiceWorker 파일 업로드

3. SDK 삽입 및 초기화 코드 구현

4. 연동 완료 및 심화 설정

5. 추가 연동

초개인화 마케팅을 위해 고객 데이터를 연동합니다.

푸시 클릭 시 동작을 정의하고 싶습니다.

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