🧑‍💻 개발자 가이드
웹사이트 블로그 콘솔 바로가기 도입 문의 이용 문의

Flutter 푸시메세지 설정

Flutter에서 푸시메세지 토큰 수집 및 수신을 위해 필요한 설정 가이드입니다.

푸시메세지 설정에 대한 예제일 뿐, 앱의 특성이나 상황에 따라 코드 삽입의 위치는 달라질 수 있습니다.

Device Token 수집

알림 권한 허용에 대한 확인 여부를 진행했다면, 사용자의 푸시토큰을 수집해야 합니다.

OS 모두 Firebase messaging 서비스를 기반으로 동작하기 때문에, getToken 호출을 통해 Token을 확인할 수 있습니다. 로그를 통해 수집된 token이 확인된다면, setPushToken 호출을 통해 와이즈트래커 SDK가 토큰을 수집할 수 있도록 코드를 추가 해 주세요.

void main() async {
...
...
...
  // binding initialized check
  WidgetsFlutterBinding.ensureInitialized();       
  print("WiseLog DOT start....");
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  if (Platform.isIOS) {
    // 푸시 알림을 처리하기 위한 사용자 권한을 요청
    FirebaseMessaging.instance.requestPermission();
  }
  
  final fcmToken = await FirebaseMessaging.instance.getToken();
  print("WiseLog DOT FCM Token: $fcmToken");
  final fcmTokenString = fcmToken.toString() ?? '';
  print("WiseLog DOT FCM TokenString: $fcmTokenString");
  // 와이즈트래커 SDK가 토큰을 수집합니다.
  DOT.setPushToken(fcmToken.toString());
...
...
...
}

푸시메시지 클릭 측정

앱의 상태는 총 3가지로 나눌 수 있습니다.

  • Foreground 상태 : 앱이 켜져있고, 앱을 사용하고 있는 상태

  • Background : Background는 앱이 꺼져있거나, 홈버튼을 눌러 앱을 빠져나온 경우

  • Terminated : Terminated는 앱이 종료된 상태

앱의 상태에 따라, 발송된 푸시메세지가 도착하여 유저가 메세지를 클릭하는 것을 측정하기 위해서 앱에 진입하는 시점에setPushClick을 호출하는 로직을 작성해야 합니다.

유의 해 주셔야 할점은 앱이 Foreground 상태일때 알림메시지 수신에 대한 구현 방식에 따라서, 유저가 Foreground 상태에서 알림을 받아 , 해당 알림을 클릭한 시점에 setPushClick을 호출해주셔야 한다는 점 입니다.

만약 Foreground 상태일때 알림메세지에 대한 구현부가 없으나, setPushClick 을 호출한다면, 아래의 이미지 처럼 유저가 알림을 클릭하지 않았음에도, 대시보드에서 다이렉트 오픈이 카운팅될 수 있습니다.

와이즈트래커 대시보드에서 푸시메세지 테스트 발송시와 Firebase 콘솔에서 푸시 메세지 테스트 발송시 확인되는 메세지에는 다른점이 있습니다. 와이즈트래커 대시보드에서 메시지 발송시에는'RW_push_payload_WP'객체 확인이 가능하나, Firebase 콘솔에서 메시지 발송 테스트 시에는 RW_push_payload_WP 객체정보는 확인되지 않습니다.

(아래에서 예제 확인 해 주세요)

'RW_push_payload_WP' 객체가 들어있는 정보만 setPushClick을 통해 전달하며, JsonString의 parsing을 통해 Direct오픈 여부등을 체크하기에, 다음과 같이 대시보드에서 발송시에만 setPushClick함수가 호출될 수 있도록 제어 해 주세요.

와이즈트래커 대시보드 발송과 Firebase console 에서 발송되는 메시지 payload 비교
1. 와이즈트래커 대시보드에서 메시지 전송시 수신되는 remoteMessage 원본:  
{
   "data":{
      "RW_push_payload_WP":
      "{\"RW_push_payload_CK\":\"0000\",\"RW_push_payload_SK\":\"00000000\",
         \"RW_push_payload_TT\":\"ios test\",\"RW_push_payload_EXPIRED\":\"1672498800000\",
         \"RW_push_payload_PR\":\"7\",\"RW_push_payload_BD\":\"ios test\"
      }"
   },
   "from":"0000000000000",
   "messageId":"0000000000000000",
   "notification":{
      "body":"ios test",
      "title":"ios test"
   }
}

2. firebase console 발송 테스트시 수신되는 remoteMessage 원본 : 
{
   "data":{},
   "from":"0000000000000",
   "messageId":"0000000000000000",
   "mutableContent":true,
   "notification":{
      "body":"fcm test",
      "title":"fcm test"
   },
   "sentTime":"0000000000"
}

앱 진입시점은 앱마다 다를 수 있으며 아래의 예제는 Main.dart를 진입시점으로 예제가 작성되었습니다.

"void main() async {
 ...
 ...

  // 와이즈트래커 SDK가 토큰을 수집합니다.
  DOT.setPushToken(fcmToken.toString());
...
...
  // Foreground 상태에서 FCM 메시지 수신 핸들러 설정
  FirebaseMessaging.onMessage.listen((RemoteMessage remoteMessage) {
    // 메시지가 수신된 경우, setPushClick 메소드가 해당 메시지가 와이즈트래커 대시보드를 통해서 
    // 보낸 메시지가 맞는지 확인함
    // 와이즈트래커에서 보낸 메시지가 맞을 경우, Direct 오픈 수가 1 올라갑니다.
    print(""WiseLog DOT FCM 메시지를 foreground 상태에서 수신하였습니다."");

    // 와이즈트래커 push payload 확인
    final pushPayload = remoteMessage.data?['RW_push_payload_WP'];
    // 객체가 들어있는 정보만 setPushClick을 통해 전달하며, JsonString의 parsing을 통해 Direct오픈 여부등을 체크.
    if (pushPayload != null) {
      DOT.setPushClick(pushPayload);
    } else {
      print(""WiseLog DOT FCM remotemessage"");
    }
  });

  // Background 상태에서 FCM 메시지 수신하여 앱이 다시 열리는 경우에 대한 핸들러 설정
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage remoteMessage) {
    print(""WiseLog DOT FCM 메시지를 수신하였습니다. (1)"");
    print(""WiseLog DOT FCM ${remoteMessage.notification?.body}"");

    final pushPayload = remoteMessage.data?['RW_push_payload_WP'];
    if (pushPayload != null) {
      DOT.setPushClick(pushPayload);
    }
  });

 // terminated 상태에서 FCM 메시지 수신 핸들러 설정
  final FirebaseMessaging firebaseMessaging = FirebaseMessaging.instance;
  RemoteMessage? initialMessage = await firebaseMessaging.getInitialMessage();
  if (initialMessage != null) {
    final pushPayload = initialMessage.data['RW_push_payload_WP'];
    if (pushPayload != null) {
      // Handle the push payload
      print(""WiseLog DOT FCM 메시지를 terminated 상태에서 수신하였습니다."");
      print(""WiseLog DOT FCM ${initialMessage.notification?.body}"");
      DOT.setPushClick(pushPayload);
    } else {
      print(""WiseLog DOT FCM 메시지를 terminated 상태에서 실패하였습니다."");
      print(""WiseLog DOT FCM ${initialMessage.notification?.body}"");
    }
  }
...
...
}

푸시 수신동의

푸시발송은 기본 적용에서는 "수신거부"입니다. 아래 링크를 참조하여 화면에서 수신동의/거부를 진행 후 해당 데이터를 "태깅"작업을 통해 남겨주세요.

🎉 축하합니다!

Flutter 앱의 푸시메세지 발송을 위한 모든 준비가 끝났습니다!

푸시메세지 발송 테스트를 통해 메시지 수신이 잘 이루어지는지 체크 해 주세요!

PreviousiOS 기초 설정Next푸시 알림 데이터 이용

Last updated