웹용 소프트 푸시 프롬프트
소프트 푸시 프롬프트는 브라우저의 기본 알림 권한 프롬프트가 표시되기 전에 보여주는 커스텀 메시지입니다. 사용자에게 푸시 알림을 활성화해야 하는 이유를 설명하고, 첫 방문 시 시스템 프롬프트를 바로 표시하는 것보다 옵트인 비율을 높일 수 있습니다. 이 가이드에서는 Braze 웹 SDK로 소프트 푸시 프롬프트를 구현하는 방법을 다루며, 프롬프트를 트리거하는 시점, 메시지 콘텐츠를 커스터마이징하는 방법, 사용자가 푸시의 가치를 이해한 후 요청 타이밍에 대한 모범 사례를 포함합니다.
필수 조건
이 기능을 사용하려면 먼저 Web Braze SDK를 통합해야 합니다. 또한 푸시 알림을 설정해야 합니다.
웹에서 mParticle의 임베디드 키트를 통해 Braze를 통합하는 경우, 소프트 푸시 프롬프트 구현 방법은 mParticle의 Braze 웹 이벤트 통합 3단계를 참조하세요.
소프트 푸시 프롬프트 소개
사이트에서 푸시 권한을 요청하기 전에 사용자에게 푸시 알림을 보내야 하는 이유를 설명하는 “소프트” 푸시 프롬프트를 구현하는 것이 좋습니다. 이는 브라우저가 사용자에게 직접 프롬프트를 표시할 수 있는 빈도를 제한하고, 사용자가 권한을 거부하면 다시 요청할 수 없기 때문에 유용합니다.
또는 표준 웹 푸시 통합에 설명된 대로 requestPushPermission()을 직접 호출하는 대신 특별한 커스텀 처리를 포함하려면 트리거 인앱 메시지를 사용하세요.

소프트 푸시 프롬프트 설정하기

1단계: 푸시 프라이머 Campaign 만들기
먼저, Braze 대시보드에서 “푸시 프라이밍”용 인앱 메시지 Campaign을 만들어야 합니다.
- 원하는 텍스트와 스타일로 Modal 인앱 메시지를 만드세요.
- 그런 다음, 클릭 시 동작을 메시지 닫기로 설정하세요. 이 동작은 나중에 커스터마이징할 수 있습니다.
- 키가
msg-id이고 값이push-primer인 키-값 페어를 메시지에 추가하세요. - 메시지에 커스텀 이벤트 트리거 동작(예: “prime-for-push”)을 지정하세요. 필요한 경우 대시보드에서 커스텀 이벤트를 수동으로 만들 수 있습니다.
2단계: 호출 제거하기
Braze SDK 통합에서 로딩 스니펫 내의 automaticallyShowInAppMessages() 호출을 찾아 제거하세요.
3단계: 통합 업데이트하기
마지막으로, 제거한 호출을 다음 스니펫으로 교체하세요. openSession()을 호출하기 전에 subscribeToInAppMessage()를 호출하세요. 이렇게 하면 인앱 메시지 리스너가 푸시 프라이머 메시지를 제때 수신할 수 있도록 등록됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import * as braze from "@braze/web-sdk";
// Be sure to remove any calls to braze.automaticallyShowInAppMessages()
braze.subscribeToInAppMessage(function(inAppMessage) {
// check if message is not a control variant
if (inAppMessage instanceof braze.inAppMessage) {
// access the key-value pairs, defined as `extras`
const keyValuePairs = inAppMessage.extras || {};
// check the value of our key `msg-id` defined in the Braze dashboard
if (keyValuePairs["msg-id"] === "push-primer") {
// We don't want to display the soft push prompt to users on browsers
// that don't support push, or if the user has already granted/blocked permission
if (
braze.isPushSupported() === false ||
braze.isPushPermissionGranted() ||
braze.isPushBlocked()
) {
// do not call `showInAppMessage`
return;
}
// user is eligible to receive the native prompt
// register a click handler on one of the two buttons
if (inAppMessage.buttons[0]) {
// Prompt the user when the first button is clicked
inAppMessage.buttons[0].subscribeToClickedEvent(function() {
braze.requestPushPermission(
function() {
// success!
},
function() {
// user declined
}
);
});
}
}
}
// show the in-app message now
braze.showInAppMessage(inAppMessage);
});
사용자에게 소프트 푸시 프롬프트를 표시하려면, 이 인앱 메시지를 트리거하는 이벤트 이름으로 braze.logCustomEvent를 호출하세요.
자주 묻는 질문
소프트 푸시 프롬프트란 무엇인가요?
소프트 푸시 프롬프트는 브라우저의 기본 알림 권한 대화 상자가 표시되기 전에 보여주는 커스텀 인앱 또는 온사이트 메시지입니다. 푸시의 가치를 설명하여 시스템 프롬프트가 나타났을 때 사용자가 수락할 가능성을 높여줍니다.
소프트 푸시 프롬프트를 언제 표시해야 하나요?
사용자가 제품의 가치를 이해한 후에 소프트 푸시 프롬프트를 표시하세요. 예를 들어, 온보딩을 완료한 후 또는 의미 있는 인앱 액션을 수행한 후가 적절하며, 첫 페이지 로드 시에는 표시하지 않는 것이 좋습니다. 구현 세부 사항은 이 가이드의 웹 SDK 단계를 참조하세요.