앱보이키트 (Objective-C 소프트웨어 개발 키트라고도 함)는 더 이상 지원되지 않으며 Swift SDK. 새로운 기능, 버그 수정, 보안 업데이트 또는 기술 지원은 더 이상 제공되지 않지만 메시징 및 분석은 정상적으로 계속 작동합니다. 자세한 내용은 새로운 Braze Swift 소프트웨어 개발 키트 소개 를 참조하세요.
기본 인앱 메시지 개발자 통합 가이드를 찾고 계신가요? 찾기 here.
인앱 메시징 구현 가이드
이 고급 구현 가이드(선택 사항)에서는 인앱 메시지 코드 고려사항, 저희 팀이 구축한 세 가지 커스텀 사용 사례 및 관련 코드 스니펫을 다룹니다. Braze Demo 저장소 여기를 방문하세요! 이 구현 가이드는 Swift 구현을 중심으로 하지만 관심 있는 사람을 위해 Objective-C 스니펫도 제공됩니다. HTML 구현을 찾고 계신가요? HTML 템플릿 리포지토리를 살펴보세요!
코드 고려 사항
다음 가이드에서는 기본 인앱 메시지 외에 사용할 수 있는 선택적 커스텀 개발자 통합도 제공합니다. 커스텀 보기 컨트롤러는 각 사용 사례에 포함되어 기능을 확장하고 인앱 메시지의 모양과 느낌을 기본적으로 사용자 지정하는 예제를 제공합니다.
ABKInAppMessage 하위 클래스
다음 코드 스니펫은 인앱 메시지를 채우려는 서브클래스 보기를 결정하는 Braze SDK의 UI 위임 메서드입니다. 이 가이드에서는 기본 구현을 다루고 전체, 슬라이드업 및 Modal 서브클래스를 매력적인 방식으로 구현하는 방법을 보여줍니다. 커스텀 보기 컨트롤러를 설정하려면 모든 다른 인앱 메시지 서브클래스를 설정해야 합니다. 서브클래싱의 개념에 대해 확실히 이해한 후, 사용 사례를 확인하여 인앱 메시징 서브클래스를 구현하기 시작합니다.
ABKInAppMessage 하위 클래스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
extension AppboyManager: ABKInAppMessageUIDelegate {
func inAppMessageViewControllerWith(_ inAppMessage: ABKInAppMessage) -> ABKInAppMessageViewController {
switch inAppMessage {
case is ABKInAppMessageSlideup:
return slideupViewController(inAppMessage: inAppMessage) //Custom Method
case is ABKInAppMessageModal:
return modalViewController(inAppMessage: inAppMessage) //Custom Method
case is ABKInAppMessageFull:
return fullViewController(inAppMessage: inAppMessage) //Custom Method
case is ABKInAppMessageHTML:
return ABKInAppMessageHTMLViewController(inAppMessage: inAppMessage)
default:
return ABKInAppMessageViewController(inAppMessage: inAppMessage)
}
}
}
ABKInAppMessage 하위 클래스
1
2
3
4
5
6
7
8
9
10
11
12
13
- (ABKInAppMessageViewController *)inAppMessageViewControllerWithInAppMessage:(ABKInAppMessage *)inAppMessage {
if ([inAppMessage isKindOfClass:[ABKInAppMessageSlideup class]]) {
return [self slideupViewControllerWithInAppMessage:inAppMessage]; //Custom Method
} else if ([inAppMessage isKindOfClass:[ABKInAppMessageModal class]]) {
return [self modalViewControllerWithInAppMessage:inAppMessage]; //Custom Method
} else if ([inAppMessage isKindOfClass:[ABKInAppMessageFull class]]) {
return [self fullViewControllerWithInAppMessage:inAppMessage]; //Custom Method
} else if ([inAppMessage isKindOfClass:[ABKInAppMessageHTML class]]) {
return [[ABKInAppMessageHTMLViewController alloc] initWithInAppMessage:inAppMessage];
} else {
return [[ABKInAppMessageViewController alloc] initWithInAppMessage:inAppMessage];
}
}
사용 사례
우리는 아래에 세 가지 사용 사례를 제공했습니다. 각 사용 사례는 자세한 설명, 관련 코드 스니펫 및 Braze 대시보드에서 인앱 메시지의 모양과 느낌에 대한 인상을 제공합니다.
커스텀 슬라이드업 인앱 메시지
슬라이드업 인앱 메시지를 작성하는 동안 기본 방법을 사용하여 메시지의 위치를 수정할 수 없다는 점을 알아차렸습니다. 메시지 위치를 수정하려면 ABKInAppMessageSlideupViewController를 서브클래스로 만들고 offset 변수를 자체 커스텀 변수로 재정의해야 합니다. 오른쪽의 이미지는 슬라이드업 인앱 메시지를 조정하는 방법의 예를 보여줍니다.
SlideFromBottomViewController에 방문하여 시작하십시오.
기본 UI에 추가 동작 추가
offset 변수 업데이트
offset 변수를 업데이트하고 자체 오프셋을 필요에 맞게 설정합니다.
1
2
3
func setSlideConstraint() {
offset = 0
}
1
2
3
4
5
6
7
8
override var offset: CGFloat {
get {
return super.offset
}
set {
super.offset = newValue + adjustedOffset
}
}
Version 3.34.0 or earlier
slideConstraint 변수 업데이트
slideConstraint 공용 변수는 슈퍼클래스 ABKInAppMessageSlideupViewController에서 나옵니다.
1
2
3
func setSlideConstraint() {
slideConstraint?.constant = bottomSpacing
}
1
2
3
private var bottomSpacing: CGFloat {
return AppboyManager.shared.activeApplicationViewController.topMostViewController().view.safeAreaInsets.bottom
}
Braze 데모 저장소를 방문하여 topMostViewController() 기능을 확인하세요.
offset 변수 업데이트
offset 변수를 업데이트하고 자체 오프셋을 필요에 맞게 설정합니다.
1
2
3
- (void)setOffset {
self.offset = 0;
}
1
2
3
4
5
6
7
- (CGFloat)offset {
return [super offset];
}
- (void)setOffset:(CGFloat)offset {
[super setOffset:offset + [self adjustedOffset]];
}
Version 3.34.0 or earlier
slideConstraint 변수 업데이트
slideConstraint 공용 변수는 슈퍼클래스 ABKInAppMessageSlideupViewController에서 나옵니다.
1
2
3
- (void)self.setSlideConstraint:(NSLayoutConstraint *)slideConstraint {
slideConstraint.constant = bottomSpacing;
}
1
2
3
- (CGFloat)bottomSpacing {
return [AppboyManager shared].activeApplicationViewController.topMostViewController.view.safeAreaInsets.bottom;
}
재정의 및 커스텀 제약 조건 설정
beforeMoveInAppMessageViewOnScreen()을 재정의하고 필요에 맞게 커스텀 제약 조건 값을 설정합니다. 원래 값은 슈퍼클래스에 설정됩니다.
1
2
3
4
override func beforeMoveInAppMessageViewOnScreen() {
super.beforeMoveInAppMessageViewOnScreen()
setOffset()
}
Version 3.34.0 or earlier
1
2
3
override func beforeMoveInAppMessageViewOnScreen() {
setSlideConstraint()
}
재정의 및 커스텀 제약 조건 설정
beforeMoveInAppMessageViewOnScreen()을 재정의하고 필요에 맞게 커스텀 제약 조건 값을 설정합니다. 원래 값은 슈퍼클래스에 설정됩니다.
1
2
3
4
- (void)beforeMoveInAppMessageViewOnScreen {
[super beforeMoveInAppMessageViewOnScreen];
[self setOffset];
}
Version 3.34.0 or earlier
1
2
3
- (void)beforeMoveInAppMessageViewOnScreen {
[self setSlideConstraint:self.slideConstraint];
}
기기 방향에 대한 제약 조건 조정
viewWillTransition()에서 각각의 값을 조정합니다. 서브클래스는 레이아웃 변경 중 제약 조건을 동기화해야 한다고 가정하기 때문입니다.
커스텀 모달 인앱 메시지
소중한 사용자 속성을 수집하는 매력적인 방법을 제공하기 위해 ABKInAppMessageModalViewController는 UIPickerView를 활용하여 서브클래스로 만들 수 있습니다. 커스텀 Modal 인앱 메시지를 사용하면 연결된 콘텐츠 또는 사용 가능한 목록을 통해 항목의 동적 목록에서 속성을 표시하고 캡처할 수 있습니다.
자체 보기를 서브클래스로 만든 인앱 메시지에 삽입할 수 있습니다. 이 예제에서는 UIPickerView를 사용하여 ABKModalInAppMessageViewController의 기능을 확장하는 방법을 보여줍니다.
ModalPickerViewController에 방문하여 시작하십시오.
대시보드 구성
대시보드에서 모달 인앱 메시지를 설정하려면 쉼표로 구분된 문자열로 형식화된 항목 목록을 제공해야 합니다. 이 예제에는, 연결된 콘텐츠를 사용하여 팀 이름의 JSON 목록을 가져오고 적절하게 형식을 지정합니다.
키-값 페어에서 attribute_key를 제공합니다. 이 키는 사용자가 선택한 값과 함께 고객 프로필에 커스텀 속성으로 저장됩니다. 귀하의 커스텀 보기 로직은 Braze로 전송된 사용자 속성을 처리해야 합니다.
ABKInAppMessage 오브젝트의 extras 사전을 통해 올바른 보기를 표시하도록 알리는 view_type 키(있는 경우)를 쿼리할 수 있습니다. 인앱 메시지는 메시지별로 구성되므로 커스텀 및 기본값 Modal 보기가 조화를 이룰 수 있습니다.
UI 표시 동작에 view_type 사용
원하는 서브클래스 보기 컨트롤러를 로드하도록 view_type에 대해 extras 사전을 쿼리합니다.
1
2
3
4
5
6
7
8
func modalViewController(inAppMessage: ABKInAppMessage) -> ABKInAppMessageModalViewController {
switch inAppMessage.extras?[InAppMessageKey.viewType.rawValue] as? String {
case InAppMessageViewType.picker.rawValue:
return ModalPickerViewController(inAppMessage: inAppMessage)
default:
return ABKInAppMessageModalViewController(inAppMessage: inAppMessage)
}
}
UI 표시 동작에 view_type 사용
원하는 서브클래스 보기 컨트롤러를 로드하도록 view_type에 대해 extras 사전을 쿼리합니다.
1
2
3
4
5
6
7
8
9
10
11
- (ABKInAppMessageModalViewController *)modalViewControllerWithInAppMessage:(ABKInAppMessage *)inAppMessage {
InAppMessageData *inAppMessageData = [[InAppMessageData alloc] init];
NSString *key = [inAppMessageData rawValueForInAppMessageKey:InAppMessageKeyViewType];
NSString *viewType = [inAppMessageData rawValueForInAppMessageViewType:InAppMessageViewTypePicker];
if ([inAppMessage.extras objectForKey:key] && [inAppMessage.extras[key] isEqualToString:viewType]) {
return [[ModalViewController alloc] initWithInAppMessage:inAppMessage];
} else {
return [[ABKInAppMessageModalViewController alloc] initWithInAppMessage:inAppMessage];
}
}
사용자 지정 보기 재정의 및 제공
loadView()를 재정의하고 필요에 맞게 커스텀 제약 조건 값을 설정합니다.
1
2
3
4
5
6
7
override var nibname: String{
return "ModalPickerViewController"
}
override func loadView() {
Bundle.main.loadNibNamed(nibName, owner: self, options: nil)
}
사용자 지정 보기 재정의 및 제공
loadView()를 재정의하고 필요에 맞게 커스텀 제약 조건 값을 설정합니다.
1
2
3
4
- (void)loadView {
NSString *nibName = @"ModalPickerViewController";
[[NSBundle mainBundle] loadNibNamed:nibName owner:self options:nil];
}
동적 목록을 위한 변수 형식
UIPickerView 구성 요소를 다시 로드하기 전에 inAppMessage 메시지 변수가 _문자열_로 출력됩니다. 이 메시지는 올바르게 표시되도록 항목 배열로 형식화되어야 합니다. 예를 들어, 이것은 components(separatedBy: ", ")을 사용하여 달성할 수 있습니다.
1
2
3
4
5
6
override func viewDidLoad() {
super.viewDidLoad()
items = inAppMessage.message.separatedByCommaSpaceValue
pickerView.reloadAllComponents()
}
PickerView에 대한 변수 형식 지정
UIPickerView 구성 요소를 다시 로드하기 전에 inAppMessage 메시지 변수가 _문자열_로 출력됩니다. 이 메시지는 올바르게 표시되도록 항목 배열로 형식화되어야 합니다. 예를 들어, 이것은 componentsSeparatedByString을 사용하여 달성할 수 있습니다.
1
2
3
4
5
6
- (void)viewDidLoad {
[super viewDidLoad];
self.items = [[NSArray alloc] initWithArray:[self.inAppMessage.message componentsSeparatedByString:@", "]];
[self.pickerView reloadAllComponents];
}
커스텀 속성 할당
서브클래스를 사용하여 사용자가 제출을 누른 후 속성과 이에 대응하는 선택된 값을 Braze에 전달합니다.
1
2
3
4
5
@IBAction func primaryButtonTapped(_ sender: Any) {
guard let item = selectedItem, !item.isEmpty, let attributeKey = inAppMessage.extras?[InAppMessageKey.attributeKey.rawValue] as? String else { return }
AppboyManager.shared.setCustomAttributeWithKey(attributeKey, andStringValue: item)
}
커스텀 속성 할당
서브클래스를 사용하여 사용자가 제출을 누른 후 속성과 이에 대응하는 선택된 값을 Braze에 전달합니다.
1
2
3
4
5
6
7
8
- (IBAction)primaryButtonTapped:(id)sender {
InAppMessageData *inAppMessageData = [[InAppMessageData alloc] init];
NSString *key = [inAppMessageData rawValueForInAppMessageKey:InAppMessageKeyAttributeKey];
if (self.selectedItem.length > 0 && [self.inAppMessage.extras objectForKey:key]) {
[[AppboyManager shared] setCustomAttributeWithKey:self.inAppMessage.extras[key] andStringValue:self.selectedItem];
}
}
FaceTime을 통해 비디오를 공유하기 위해 커스텀 Modal 인앱 메시지를 활용하는 데 관심이 있으신가요? SharePlay 인앱 메시지 구현 가이드를 확인하세요.
커스텀 전체 인앱 메시지
커스텀 전체 인앱 메시지를 사용하여 상호작용하고 사용자 친화적인 프롬프트를 만들어 귀중한 고객 데이터를 수집하세요. 오른쪽 예제는 알림 환경설정을 포함한 대화형 푸시 프라이머로 재구성된 커스텀 전체 인앱 메시지의 구현을 보여줍니다.
FullListViewController에 방문하여 시작하십시오.
대시보드 구성
대시보드에서 커스텀 전체 인앱 메시지를 설정하려면 쉼표로 구분된 문자열로 형식화된 태그 목록을 제공해야 합니다.
키-값 페어에서 attribute_key를 제공합니다. 이 키는 사용자가 선택한 값과 함께 고객 프로필에 커스텀 속성으로 저장됩니다. 귀하의 커스텀 보기 로직은 Braze로 전송된 사용자 속성을 처리해야 합니다.
로 설정됩니다.{: style=”max-width:65%;”}
인앱 메시지 터치 가로채기
인앱 메시지 터치를 가로채는 작업은 커스텀 전체 인앱 메시지 버튼이 올바르게 작동하도록 하는 데 매우 중요합니다. 기본적으로, ABKInAppMessageImmersive에서는 메시지에 탭 제스처 인식기를 추가하여 사용자가 버튼 없이 메시지를 해제할 수 있습니다. UISwitch 또는 버튼을 UITableViewCell 보기 계층 구조에 추가하면 이제 터치는 이제 커스텀 보기에 의해 처리됩니다. iOS 6부터 버튼 및 기타 컨트롤이 제스처 인식기보다 우선하므로, 커스텀 전체 인앱 메시지가 정상적으로 작동합니다.
GitHub 에서 이 페이지를 편집합니다.