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

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

1단계: 푸시 프라이머 Campaign 만들기
먼저, Braze 대시보드에서 “Prime for Push” 인앱 메시징 Campaign을 생성해야 합니다.
- 원하는 텍스트와 스타일로 모달 인앱 메시지를 만듭니다.
- 다음으로, 클릭 시 동작을 Close Message로 설정합니다. 이 동작은 나중에 커스터마이징할 수 있습니다.
- 키는
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 단계를 참조하세요.