ReactNative 푸시메세지 설정
ReactNative에서 푸시메세지 토큰 수집 및 수신을 위해 필요한 설정 가이드입니다.
푸시알림 권한 확인
사용자의 푸시알림 권한에 대한 확인을 거친 후 사용자의 푸시토큰을 수집 합니다.
아래의 예제는 사용자의 푸시알림 권한을 확인하는 방법으로 안드로이드의 경우 내장된 react-native PermissionAndroid를 사용하였으며, ios의 경우 React Native Firebase iOS permission API를 사용하였습니다.
푸시알림 권한 확인 절차에 대한 예제일 뿐, 앱의 특성이나 상황에 따라 권한을 확인 및 요청하는 위치는 달라질 수 있습니다.
예제에서 사용한 권한 확인 방식은 다음과 같으며, 자세한 내용은 사용된 API의 도큐먼트를 확인 해 주세요.
android : react-native PermissionAndroid API 사용
ios의 경우 React Native Firebase iOS permission API 사용
Device Token 수집
알림 권한 허용에 대한 확인 여부를 진행했다면, 사용자의 푸시토큰을 수집해야 합니다.
OS 모두 Firebase messaging 서비스를 기반으로 동작하기 때문에, getToken
호출을 통해 Token을 확인할 수 있습니다. 로그를 통해 수집된 token이 확인된다면, setPushToken
호출을 통해 와이즈트래커 SDK가 토큰을 수집할 수 있도록 코드를 추가 해 주세요.
푸시메시지 클릭 측정
앱의 상태는 총 3가지로 나눌 수 있습니다.
Foreground 상태 : 앱이 켜져있고, 앱을 사용하고 있는 상태 > 이벤트 핸들러의
onMessage
를 이용해 핸들링 할 수 있습니다.Background : Background는 앱이 꺼져있거나, 홈버튼을 눌러 앱을 빠져나온 경우입니다 > 이벤트 핸들러의
setBackgroundMessageHandler
를 이용할 수 있습니다.Quit : Quit는 앱이 종료된 상태를 나타냅니다 > Background와 동일하게 이벤트 핸들러의
setBackgroundMessageHandler
를 이용할 수 있습니다.
앱의 상태에 따라, 발송된 푸시메세지가 도착하여 유저가 메세지를 클릭하는 것을 측정하기 위해서 앱에 진입하는 시점에"NativeModules.
DotReactBridge.setPushClick
"
을 호출하는 로직을 작성해야 합니다.
유의 해 주셔야 할점은 앱이 Foreground 상태일때 알림메시지 수신에 대한 구현 방식에 따라서, 유저가 Foreground 상태에서 알림을 받아 , 해당 알림을 클릭한 시점에 setPushClick을 호출해주셔야 한다는 점 입니다.
만약 Foreground 상태일때 알림메세지에 대한 구현부가 없으나, NativeModules.DotReactBridge.setPushClick
을 호출한다면, 아래의 이미지 처럼 유저가 알림을 클릭하지 않았음에도, 대시보드에서 다이렉트 오픈이 카운팅될 수 있습니다.
와이즈트래커 대시보드에서 푸시메세지 테스트 발송시와 Firebase 콘솔에서 푸시 메세지 테스트 발송시 확인되는 메세지에는 다른점이 있습니다. 와이즈트래커 대시보드에서 메시지 발송시에는'RW_push_payload_WP'
객체 확인이 가능하나, Firebase 콘솔에서 메시지 발송 테스트 시에는 RW_push_payload_WP
객체정보는 확인되지 않습니다.
(아래에서 예제 확인 해 주세요)
'RW_push_payload_WP'
객체가 들어있는 정보만 setPushClick을 통해 전달하며, JsonString의 parsing을 통해 Direct오픈 여부등을 체크하기에, 다음과 같이 대시보드에서 발송시에만 setPushClick함수가 호출될 수 있도록 제어 해 주세요.
앱 진입시점은 앱마다 다를 수 있으며 아래의 예제는 App.js 를 진입시점으로 예제가 작성되었습니다.
푸시 수신동의
푸시발송은 기본 적용에서는 "수신거부"입니다. 아래 링크를 참조하여 화면에서 수신동의/거부를 진행 후 해당 데이터를 "태깅"작업을 통해 남겨주세요.
🎉 축하합니다!
ReactNative 앱의 푸시메세지 발송을 위한 모든 준비가 끝났습니다!
푸시메세지 발송 테스트를 통해 메시지 수신이 잘 이루어지는지 체크 해 주세요!
Last updated
Was this helpful?