JavaScript 연동하기

• 기기 정보를 노티플라이에 등록하여 웹 푸시 알림 수신 및 웹 팝업 노출
• 이벤트 및 유저 정보를 노티플라이와 연동하여 캠페인 타깃팅 및 분석 활용
• 유저 행동 데이터를 기반으로 한 이벤트 로깅 및 성과 측정

​

시작하기 전에

1. VAPID 키 생성: 웹 푸시 발송/수신을 위해 VAPID Key를 생성합니다. 콘솔 설정 → SDK 설정 → 웹사이트 설정에서 생성할 수 있습니다. (웹 푸시를 사용할 경우에만 필요한 단계입니다.)
2. HTTPS 환경 권장(브라우저 권한 정책) 권장 환경: 최신 Chrome/Edge/Safari, ES2017+, 빌드 툴(Webpack/Vite/Rollup 등) 사용 시 Service Worker 파일이 번들에 의해 누락되지 않도록 설정

​

1. 기본 설정

​

1. Service Worker 등록

my-react-project/
├── src/
├── public/
│   ├── index.html
│   ├── notifly-service-worker.js
│   └── ...
└── ...

self.importScripts(
  "https://cdn.jsdelivr.net/npm/notifly-js-sdk@2/dist/NotiflyServiceWorker.js"
);

​

2. SDK 초기화

SDK 2.5.0 이상에서는 projectId, username, password 외 모든 초기화 필드가 콘솔 설정값으로 대체됩니다. (세션/권한 팝업/SW 경로/지연시간/VAPID 키)

​

3. 푸시 알림 권한 요청

• 유저가 아직 알림 권한을 설정하지 않은 경우 → 안내 팝업을 보여준 뒤 브라우저 권한을 요청합니다.
• 유저가 이미 “허용”한 경우 → 더 이상 팝업을 띄우거나 권한을 다시 묻지 않습니다.
• 유저가 “차단(거부)”한 경우 → 다시 요청하지 않습니다. 팝업도 노출되지 않습니다.

• 팝업의 스타일(텍스트, 색상 등)을 브랜드에 맞게 바꾸고 싶다면 권한 팝업 커스터마이징 을 참고하세요.
• 완전히 커스텀 UI를 쓰고 싶다면:
  • SDK 2.5.0 이상: 노티플라이 콘솔에서 “자동 노출”을 꺼주세요.
  • SDK 2.5.0 미만: SDK 초기화 시 askPermission: false로 설정하세요.
  • 그 후 원하는 UI에서 직접 권한 요청을 구현할 수 있습니다.
  • MDN Web Docs - Notification: requestPermission 을 참고해 주세요.

​

지원 언어

• SDK 버전 2.8.0 이상
  • ko (한국어)
  • en (영어)
  • ja (일본어)
  • zh (중국어)
• SDK 버전 2.8.0 미만
  • 한국어, 영어만 지원됩니다.

​

수동 호출

notifly.requestPermission();        // 브라우저 언어 기반
notifly.requestPermission("en");    // 강제 언어(≥ 2.8.0)

1. language 파라미터를 전달한 경우 → 그 언어 코드로 팝업을 시도합니다.
2. 전달하지 않았거나 지원되지 않는 언어 코드인 경우 → a. 브라우저 언어가 지원 언어에 포함되면 그 언어를 사용합니다. b. 브라우저 언어도 지원되지 않으면 “기본 노출 언어”를 사용합니다. (아래 참고)

​

기본 노출 언어

• 브라우저에 선호 언어가 설정되어 있지 않은 경우
• 브라우저 언어가 SDK에서 지원하지 않는 경우

​

팝업 커스터마이즈

​

2. SDK 설치 & 초기화

​

1. 패키지 매니저 (npm/yarn/pnpm)

npm install notifly-js-sdk@latest --save

​

초기화 예시 (v2.5.0 이상)

import notifly from 'notifly-js-sdk';

useEffect(() => {
  if (typeof window !== 'undefined') {
    notifly.initialize({
      projectId: process.env.NEXT_PUBLIC_NOTIFLY_PROJECT_ID,
      username: process.env.NEXT_PUBLIC_NOTIFLY_PROJECT_USERNAME,
      password: process.env.NEXT_PUBLIC_NOTIFLY_PROJECT_PASSWORD,
    });
  }
}, []);

​

2. CDN

<script src="https://cdn.jsdelivr.net/npm/notifly-js-sdk@<SDK_VERSION>/dist/index.global.min.js"></script>
<script>
  window.notifly.initialize({
    projectId: "<PROJECT_ID>",
    username: "<USERNAME>",
    password: "<PASSWORD>",
  });
</script>

​

3. 유저 정보 등록

​

1. 유저 ID 등록

notifly.setUserId(userId?: string | null);

​

Parameters

const handleLogin = () => {
    ...
    notifly.setUserId('example_user_id');
    ...
}

const handleLogout = () => {
    ...
    notifly.setUserId(null); // unregister user id (notifly.setUserId(); works too!)
    ...
}

​

2. 유저 속성 설정

notifly.setUserProperties(userProperties);

​

Parameters

const handleRejectPushNotification = () => {
    ...
    notifly.setUserProperties({
        "paid_membership": true,
        "subscriptions": ["astro_boy", "x-men"],
    });
    ...
}

​

4. 이벤트 로깅

notifly.trackEvent(eventName, eventParams, segmentationEventParamKeys);

​

Parameters

const handleContentView = () => {
    ...
    notifly.trackEvent("view_content", {
        "content_name": "mickey_mouse",
    });
    ...
}

// 세그먼트 키 지정(최대 1개)
const handlePurchaseTicket = () => {
    ...
    notifly.trackEvent("ticket_purchase", {
        "show_id": "sample_show_id",
        "performance_start_time": 1674104659
    }, ["show_id"]);
    ...
}

const handleLogin = (userId) => {
  notifly.setUserId(userId);
  notifly.setUserProperties({
    '$phone_number': '01012345678',
    'paid_membership': true,
  });
  notifly.trackEvent("login");
};

​

5. 웹 팝업에서 커스텀 이벤트 로깅 (선택)

notifly.initialize({
  projectId,
  username,
  password,
  allowUserSuppliedLogEvent: true, // 팝업 내 유저 JS 이벤트 허용
});

​

6. 연동 테스트