인앱 메시지 트리거

Braze SDK를 통해 인앱 메시지를 트리거하는 방법을 알아보세요.

메시지 트리거 및 전달

인앱 메시지는 SDK가 다음 커스텀 이벤트 유형 중 하나를 기록할 때 트리거됩니다: Session Start, Push Click, Any Purchase, Specific Purchase, Custom Event(마지막 두 개는 강력한 속성 필터를 포함합니다).

사용자 세션이 시작되면 Braze는 모든 적격 인앱 메시지를 기기에 전달하는 동시에 자산을 프리페칭하여 표시 지연 시간을 최소화합니다. 트리거 이벤트에 적격 인앱 메시지가 두 개 이상 있는 경우 우선순위가 가장 높은 메시지만 전달됩니다. 자세한 내용은 세션 수명 주기를 참조하세요.

인앱 메시지 유형

Braze는 세션 시작 시 다음 유형의 인앱 메시지를 사용자 기기에 전송합니다: inapp 및 templated_iam. 대시보드 사용자로서 다른 유형을 직접 볼 수는 없지만, Braze는 설정과 콘텐츠에 따라 이를 다르게 처리합니다.

inapp (표준)

inapp(또는 “표준”) 인앱 메시지는 Braze가 이미 알고 있는 커스텀 속성 등 필요한 정보가 이미 템플릿화되어 있습니다. 일반적으로 인앱 메시지가 기기에 다운로드되면 트리거 이벤트가 발생할 때 기기가 오프라인이거나 비행기 모드인 경우에도 SDK가 inapp 인앱 메시지를 표시합니다.

templated_iam (템플릿)

templated_iam(또는 “템플릿”) 인앱 메시지는 아직 필요한 정보가 템플릿화되지 않은 상태입니다. Braze는 메시지가 표시되기 전에 정보를 가져오기 위해 추가 요청을 해야 합니다.

인앱 메시지는 표시 전 Campaign 자격 재평가가 선택되어 있거나 메시지에 다음 Liquid 태그 중 하나라도 포함되어 있는 경우 템플릿 인앱 메시지로 전달됩니다:

• canvas_entry_properties
• connected_content
• {sms.${*}}와 같은 SMS 변수
• catalog_items
• catalog_selection_items
• event_properties

이 경우 세션 시작 시 기기는 전체 메시지 대신 해당 인앱 메시지의 트리거를 수신합니다. 사용자가 인앱 메시지를 트리거하면 사용자의 기기가 네트워크 요청을 보내 실제 메시지를 가져옵니다.

키-값 페어

Braze에서 Campaign을 생성할 때 키-값 페어를 extras로 설정할 수 있으며, 인앱 메시징 오브젝트가 이를 활용하여 앱으로 데이터를 전송할 수 있습니다.

• web
• android
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import * as braze from "@braze/web-sdk";

braze.subscribeToInAppMessage(function(inAppMessage) {
  // control group messages should always be "shown"
  // this will log an impression and not show a visible message
  if (inAppMessage instanceof braze.ControlMessage) {
    return braze.showInAppMessage(inAppMessage);
  }


  if (inAppMessage instanceof braze.InAppMessage) {
    const extras = inAppMessage.extras;
    if (extras) {
      for (const key in extras) {
        console.log("key: " + key + ", value: " + extras[key]);
      }
    }
  }
  braze.showInAppMessage(inAppMessage);
});

1
Map<String, String> getExtras()

1
extras: Map<String, String>

1
2
3
4
let customization = message.extras["custom-display"] as? String
if customization == "colorful-slideup" {
  // Perform your custom logic.
}

1
2
3
4
5
6
if ([message.extras[@"custom-display"] isKindOfClass:[NSString class]]) {
  NSString *customization = message.extras[@"custom-display"];
  if ([customization isEqualToString:@"colorful-slideup"]) {
    // Perform your custom logic.
  }
}

자동 트리거 비활성화하기

기본적으로 인앱 메시지는 자동으로 트리거됩니다. 이 기능을 비활성화하려면:

• web
• android
• swift
• flutter
• unity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
braze.subscribeToInAppMessage(function(inAppMessage) {
  // control group messages should always be "shown"
  // this will log an impression and not show a visible message

  if (inAppMessage.isControl) { // v4.5.0+, otherwise use  `inAppMessage instanceof braze.ControlMessage`
     return braze.showInAppMessage(inAppMessage);
  }

  // Display the in-app message. You could defer display here by pushing this message to code within your own application.
  // If you don't want to use the display capabilities in Braze, you could alternatively pass the in-app message to your own display code here.

  if ( should_show_the_message_according_to_your_custom_logic ) {
      braze.showInAppMessage(inAppMessage);
  } else {
      // do nothing
  }
});

한 세션에서 두 개의 인앱 메시지 연결하기

세션 시작 시 인앱 메시지를 트리거한 다음, 첫 번째 메시지에서 버튼을 누른 후 두 번째 인앱 메시지를 트리거할 수 있습니다. 이를 위해 두 번째 메시지를 트리거할 버튼 클릭에 대한 커스텀 이벤트를 기록합니다. 두 번째 메시지의 트리거는 이미 기기에 있어야 하며(사용자가 이미 두 번째 메시지에 적격해야 함), 기기 측에서 발생해야 합니다(Braze SDK는 Braze 서버에서 발생하는 커스텀 속성 변경을 감지하지 않습니다). 인앱 메시지 트리거 간 기본 30초 쿨다운을 변경하여 여러 인앱 메시지를 빠르게 연속으로 표시해야 합니다. 플랫폼별 구성에 대해서는 기본 사용량 제한 재정의하기를 참조하세요.

기본 사용량 제한 재정의하기

기본적으로 SDK는 트리거된 인앱 메시지를 30초에 한 번으로 제한합니다. 이를 재정의하려면 Braze 인스턴스가 초기화되기 전에 구성 파일에 다음 속성을 추가하세요. 이 값은 초 단위의 새로운 사용량 제한으로 사용됩니다.

프로덕션 앱의 경우, 사용자가 연속적인 인앱 메시지에 압도되지 않도록 이 값을 10초 미만으로 설정하지 마세요. 테스트 및 샘플 앱 플로우의 경우 5초가 일반적인 설정입니다.

테스트를 위해 이 간격을 0으로 설정할 수 있습니다. 그러나 0초 간격이 여러 인앱 메시지를 동시에 표시하도록 강제하지는 않습니다. 하나의 인앱 메시지가 이미 표시 중인 경우, 현재 메시지가 닫힐 때까지 다른 트리거된 메시지는 표시되지 않습니다.

• web
• android
• swift

1
2
// Sets the minimum time interval between triggered in-app messages to 5 seconds instead of the default 30
braze.initialize('YOUR-API-KEY', { minimumIntervalBetweenTriggerActionsInSeconds: 5 })

1
<integer name="com_braze_trigger_action_minimum_time_interval_seconds">5</integer>

1
2
3
4
5
6
7
8
let configuration = Braze.Configuration(
  apiKey: "YOUR-APP-IDENTIFIER-API-KEY",
  endpoint: "YOUR-BRAZE-ENDPOINT"
)
// Sets the minimum trigger time interval to 5 seconds
configuration.triggerMinimumTimeInterval = 5
let braze = Braze(configuration: configuration)
AppDelegate.braze = braze

1
2
3
4
5
6
7
BRZConfiguration *configuration =
    [[BRZConfiguration alloc] initWithApiKey:@"<BRAZE_API_KEY>"
                                    endpoint:@"<BRAZE_ENDPOINT>"];
// Sets the minimum trigger time interval to 5 seconds
configuration.triggerMinimumTimeInterval = 5;
Braze *braze = [BrazePlugin initBraze:configuration];
AppDelegate.braze = braze;

수동으로 메시지 트리거하기

기본적으로 인앱 메시지는 SDK가 커스텀 이벤트를 기록할 때 자동으로 트리거됩니다. 그러나 이 외에도 다음 메서드를 사용하여 수동으로 메시지를 트리거할 수 있습니다.

서버 측 이벤트 사용

• web
• android
• swift

1
2
3
4
5
6
7
8
9
10
11
Braze.getInstance(context).subscribeToPushNotificationEvents(event -> {
  final Bundle kvps = event.getNotificationPayload().getBrazeExtras();
  if (kvps.containsKey("IS_SERVER_EVENT")) {
    BrazeProperties eventProperties = new BrazeProperties();

    // The campaign name is a string extra that clients can include in the push
    String campaignName = kvps.getString("CAMPAIGN_NAME");
    eventProperties.addProperty("campaign_name", campaignName);
    Braze.getInstance(context).logCustomEvent("IAM Trigger", eventProperties);
  }
});

1
2
3
4
5
6
7
8
9
10
11
Braze.getInstance(applicationContext).subscribeToPushNotificationEvents { event ->
    val kvps = event.notificationPayload.brazeExtras
    if (kvps.containsKey("IS_SERVER_EVENT")) {
        val eventProperties = BrazeProperties()

        // The campaign name is a string extra that clients can include in the push
        val campaignName = kvps.getString("CAMPAIGN_NAME")
        eventProperties.addProperty("campaign_name", campaignName)
        Braze.getInstance(applicationContext).logCustomEvent("IAM Trigger", eventProperties)
    }
}

1
2
3
4
5
6
func handleExtras(userInfo: [AnyHashable : Any]) {
  print("A push was received")
  if userInfo != nil && (userInfo["IS_SERVER_EVENT"] as? String) != nil && (userInfo["CAMPAIGN_NAME"] as? String) != nil {
    AppDelegate.braze?.logCustomEvent("IAM Trigger", properties: ["campaign_name": userInfo["CAMPAIGN_NAME"]])
  }
}

1
2
3
4
5
6
- (void)handleExtrasFromPush:(NSDictionary *)userInfo {
  NSLog(@"A push was received.");
  if (userInfo !=nil && userInfo[@"IS_SERVER_EVENT"] !=nil && userInfo[@"CAMPAIGN_NAME"]!=nil) {
    [AppDelegate.braze logCustomEvent:@"IAM Trigger" properties:@{@"campaign_name": userInfo[@"CAMPAIGN_NAME"]}];
  }
};

미리 정의된 메시지 표시

미리 정의된 인앱 메시지를 수동으로 표시하려면 다음 메서드를 사용하세요:

• web
• android
• swift

1
BrazeInAppMessageManager.getInstance().addInAppMessage(inAppMessage);

1
BrazeInAppMessageManager.getInstance().addInAppMessage(inAppMessage)

1
2
3
if let inAppMessage = AppDelegate.braze?.inAppMessagePresenter?.nextAvailableMessage() {
  AppDelegate.braze?.inAppMessagePresenter?.present(message: inAppMessage)
}

실시간 메시지 표시

대시보드에서 사용할 수 있는 동일한 커스터마이징 옵션을 사용하여 로컬 인앱 메시지를 실시간으로 생성하고 표시할 수도 있습니다. 이를 위해:

• web
• android
• swift
• unity

1
2
3
4
  // Displays a slideup type in-app message.
  var message = new braze.SlideUpMessage("Welcome to Braze! This is an in-app message.");
  message.slideFrom = braze.InAppMessage.SlideFrom.TOP;
  braze.showInAppMessage(message);

1
2
3
// Initializes a new slideup type in-app message and specifies its message.
InAppMessageSlideup inAppMessage = new InAppMessageSlideup();
inAppMessage.setMessage("Welcome to Braze! This is a slideup in-app message.");

1
2
3
// Initializes a new slideup type in-app message and specifies its message.
val inAppMessage = InAppMessageSlideup()
inAppMessage.message = "Welcome to Braze! This is a slideup in-app message."

1
2
3
4
let customInAppMessage = Braze.InAppMessage.slideup(
  .init(message: "YOUR_CUSTOM_SLIDEUP_MESSAGE", slideFrom: .bottom, themes: .defaults)
)
AppDelegate.braze?.inAppMessagePresenter?.present(message: customInAppMessage)

1
2
3
4
5
6
7
8
9
BRZInAppMessageRaw *customInAppMessage = [[BRZInAppMessageRaw alloc] init];
customInAppMessage.type = BRZInAppMessageRawTypeSlideup;
customInAppMessage.message = @"YOUR_CUSTOM_SLIDEUP_MESSAGE";
customInAppMessage.slideFrom = BRZInAppMessageRawSlideFromBottom;
customInAppMessage.themes = @{
  @"light": BRZInAppMessageRawTheme.defaultLight,
  @"dark": BRZInAppMessageRawTheme.defaultDark
};
[AppDelegate.braze.inAppMessagePresenter presentMessage:customInAppMessage];

1
Appboy.AppboyBinding.DisplayNextInAppMessage();

인앱 메시지 지연 원인

세션 시작 후 몇 초 뒤에 인앱 메시지 Campaign을 수신하는 경우, 다음과 같은 원인으로 지연이 발생했을 수 있습니다:

• Campaign 트리거 지연
• 커스터마이징
• 트리거 이벤트가 예상보다 늦게 기록됨(예: templated_iam의 경우)

웹용 이탈 의도 메시지

이탈 의도 메시지는 방문자가 웹사이트를 떠나기 전에 중요한 정보를 전달하는 데 사용되는 비침해적 인앱 메시지입니다.

웹 SDK에서 이러한 메시지 유형에 대한 트리거를 설정하려면, 웹사이트에 이탈 의도 라이브러리(예: ouibounce의 오픈 소스 라이브러리)를 구현한 다음, 다음 코드를 사용하여 'exit intent'를 Braze의 커스텀 이벤트로 기록하세요. 이제 향후 인앱 메시지 Campaign에서 이 메시지 유형을 커스텀 이벤트 트리거로 사용할 수 있습니다.

1
2
3
  var _ouibounce = ouibounce(false, {
    callback: function() { braze.logCustomEvent('exit intent'); }
  });