Guia de implementação de envio de mensagens no app

Este guia de implementação opcional e avançado aborda considerações sobre o código de mensagens no app, três casos de uso personalizados criados por nossa equipe e os trechos de código que os acompanham. Visite nosso repositório de demonstrações do Braze aqui! Este guia de implementação está centrado em uma implementação Swift, mas são fornecidos trechos em Objective C para os interessados. Procurando implementações em HTML? Dê uma olhada em nosso repositório de modelos HTML!

Considerações de código

O guia a seguir oferece uma integração de desenvolvedor personalizada opcional para ser usada além das mensagens no app padrão. Os controladores de exibição personalizados estão incluídos em cada caso de uso, oferecendo exemplos para ampliar a funcionalidade e personalizar nativamente a aparência de suas mensagens no app.

Subclasses de ABKInAppMessage

O trecho de código a seguir é um método delegado de interface do usuário do SDK do Braze que determina com qual visualização de subclasse você deseja preencher sua mensagem no app. Neste guia, abordamos uma implementação básica e mostramos como as subclasses completa, deslizante e modal podem ser implementadas de maneiras cativantes. Observe que, se quiser configurar seu view controller personalizado, você deverá configurar todas as outras subclasses de mensagens no app. Depois que você tiver uma sólida compreensão dos conceitos por trás da subclasse, confira nossos casos de uso para começar a implementar subclasses de mensagens no app.

• swift
• objective-c

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)
    }
  }
}

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];
  }
}

Casos de uso

Fornecemos três casos de uso abaixo. Cada caso de uso oferece uma explicação detalhada, trechos de código relevantes e uma visão de como as mensagens no app podem parecer e ser usadas no dashboard do Braze:

• Mensagem no app com slide personalizado
• Mensagem modal personalizada no app
• Mensagem no app completa personalizada

Mensagem no app com slide personalizado

Ao criar sua mensagem no app com slide-up, você pode perceber que não é possível modificar o posicionamento da mensagem usando os métodos padrão. Modificações como essa são possíveis ao criar uma subclasse de ABKInAppMessageSlideupViewController e substituir a variável offset por sua própria variável personalizada. A imagem à direita mostra um exemplo de como isso pode ser usado para ajustar suas mensagens deslizantes no app.

Visite o site SlideFromBottomViewController para começar.

Adição de comportamento adicional à nossa UI padrão

• swift
• objective-c

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
  }
}

1
2
3
func setSlideConstraint() {
    slideConstraint?.constant = bottomSpacing
}

1
2
3
private var bottomSpacing: CGFloat {
    return AppboyManager.shared.activeApplicationViewController.topMostViewController().view.safeAreaInsets.bottom
}

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]];
}

1
2
3
- (void)self.setSlideConstraint:(NSLayoutConstraint *)slideConstraint {
  slideConstraint.constant = bottomSpacing;
}

1
2
3
- (CGFloat)bottomSpacing {
  return [AppboyManager shared].activeApplicationViewController.topMostViewController.view.safeAreaInsets.bottom;
}

• swift
• objective-c

1
2
3
4
override func beforeMoveInAppMessageViewOnScreen() {
  super.beforeMoveInAppMessageViewOnScreen()
  setOffset()
}

1
2
3
override func beforeMoveInAppMessageViewOnScreen() {
  setSlideConstraint()
}

1
2
3
4
- (void)beforeMoveInAppMessageViewOnScreen {
  [super beforeMoveInAppMessageViewOnScreen];
  [self setOffset];
}

1
2
3
- (void)beforeMoveInAppMessageViewOnScreen {
  [self setSlideConstraint:self.slideConstraint];
}

Ajustar a restrição para a orientação do dispositivo
Ajuste o respectivo valor em viewWillTransition() porque a subclasse assume a responsabilidade de manter a restrição sincronizada durante as alterações de layout.

Mensagem modal personalizada no app

Um ABKInAppMessageModalViewController pode ser subclassificado para aproveitar um UIPickerView que oferece maneiras engajadas de coletar valiosas atribuições do usuário. A mensagem modal personalizada no app permite que você use o Connected Content ou qualquer lista disponível para exibir e capturar atribuições de uma lista dinâmica de itens.

Você pode interpor suas próprias exibições em mensagens no app de subclasse. Este exemplo mostra como um UIPickerView pode ser utilizado para ampliar a funcionalidade de um ABKModalInAppMessageViewController.

Visite o ModalPickerViewController para começar.

Configuração do dashboard

Para configurar uma mensagem modal no app no dashboard, você deve fornecer uma lista de itens formatada como uma string separada por vírgulas. Em nosso exemplo, usamos o conteúdo conectado para extrair uma lista JSON de nomes de equipes e formatá-los adequadamente.

Nos pares de chave-valor, forneça um attribute_key; essa chave, juntamente com o valor selecionado pelo usuário, será salva em seu perfil de usuário como um atributo personalizado. Sua lógica de visualização personalizada deve lidar com os atributos do usuário enviados ao Braze.

O dicionário extras no objeto ABKInAppMessage permite que você consulte uma chave view_type (se houver) que sinalize a exibição correta. É importante notar que as mensagens no app são configuradas por mensagem, de modo que as exibições modais personalizadas e padrão podem funcionar harmoniosamente.

• swift
• objective-c

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)
  }
}

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];
  }
}

• swift
• objective-c

1
2
3
4
5
6
7
override var nibname: String{
  return "ModalPickerViewController"
}

override func loadView() {
  Bundle.main.loadNibNamed(nibName, owner: self, options: nil)
}

1
2
3
4
- (void)loadView {
  NSString *nibName = @"ModalPickerViewController";
  [[NSBundle mainBundle] loadNibNamed:nibName owner:self options:nil];
}

• swift
• objective-c

1
2
3
4
5
6
override func viewDidLoad() {
  super.viewDidLoad()
 
  items = inAppMessage.message.separatedByCommaSpaceValue
  pickerView.reloadAllComponents()
}

1
2
3
4
5
6
- (void)viewDidLoad {
  [super viewDidLoad];
   
  self.items = [[NSArray alloc] initWithArray:[self.inAppMessage.message componentsSeparatedByString:@", "]];
  [self.pickerView reloadAllComponents];
}

• swift
• objective-c

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)
}

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];
  }
}

Mensagem completa e personalizada no app

Use mensagens completas e personalizadas no app para criar prompts interativos e fáceis de usar para coletar dados valiosos de clientes. O exemplo à direita mostra uma implementação da mensagem no app personalizada e completa, reimaginada como um primer push interativo com preferências de notificação.

Visite o site FullListViewController para começar.

Configuração do dashboard

Para configurar uma mensagem completa e personalizada no app no dashboard, você deve fornecer uma lista de suas tags formatadas como uma string separada por vírgulas.

Nos pares de chave-valor, forneça um attribute_key; essa chave, juntamente com os valores selecionados pelo usuário, será salva em seu perfil de usuário como um atributo personalizado. Sua lógica de visualização personalizada deve lidar com os atributos do usuário enviados ao Braze.

Interceptação de toques em mensagens no app

A interceptação de toques de mensagens no app é crucial para que os botões personalizados de mensagens completas no app funcionem corretamente. Por padrão, o ABKInAppMessageImmersive adiciona um reconhecedor de gestos de toque à mensagem, para que os usuários possam descartar mensagens sem botões. Ao adicionar um UISwitch ou botão à hierarquia da visualização UITableViewCell, os toques agora são tratados pela nossa visualização personalizada. A partir do iOS 6, os botões e outros controles têm precedência ao trabalhar com reconhecedores de gestos, fazendo com que nossa mensagem completa personalizada no app funcione como deveria.