자사웹(직접 푸시) 연동하기
플레어레인을 사용하여 웹 푸시(Web Push)를 몇 분만에 쉽게 구현할 수 있습니다.
본격적인 연동에 앞서 웹 푸시 소개를 꼭 먼저 읽어주세요. 플레어레인을 이해하는데 큰 도움이 됩니다.
1. 사전 준비
플레어레인 관리자 에서 회원가입 후 프로젝트를 생성합니다.
2. 웹 푸시 초기 설정
[채널] > [웹 푸시] > [직접 푸시] 를 선택하여 초기 설정을 시작합니다.
3. 초기 설정 정보 입력
항목 | 설명 |
사이트명 | 푸시 제목 미입력 시 기본 노출될 사이트 대표 이름 입력 |
사이트 URL | 웹 푸시가 설치될 웹사이트 주소 입력 (주소 불일치 시 웹 푸시 미동작) 입력한 URL을 기반으로 아래 URL들이 추가 지원됩니다. - http 입력 시 https 까지 추가 지원 - 모바일용 서브도메인(m.example.com) 추가 지원 |
4. ServiceWorker 생성 및 호스팅
사용 중인 ServiceWorker 파일이 없다면 sw.js 라는 이름의 파일을 생성하고, 사용 중인 파일이 있다면 해당 파일을 편집기로 엽니다.
해당 ServiceWorker 파일에 다음 스크립트를 추가합니다.
해당 ServiceWorker 파일을 웹사이트 루트 경로에서 호스팅합니다. (ex. example.com 도메인의 sw.js 파일의 경우 example.com/sw.js 로 접속이 가능해야 합니다.)
5. SDK 삽입 및 초기화 코드 구현
프로젝트 ID는 관리자 페이지 내 '프로젝트' 설정에서 확인할 수 있습니다.
웹사이트 </body> 태그 바로 위에 다음 스크립트를 추가합니다.
6. 연동 완료 및 심화 설정
여기까지 모두 잘 되었다면, 웹사이트 새로고침 시 구독 유도 팝업이 노출됩니다.
이후 플레어레인 관리자 내 웹 푸시 설정 화면에서 팝업 및 위젯의 세부 설정을 진행할 수 있습니다.