Guía de implementación de la mensajería dentro de la aplicación

Esta guía de implementación opcional y avanzada abarca consideraciones sobre códigos de mensajes dentro de la aplicación, tres casos de uso personalizados creados por nuestro equipo y fragmentos de código que los acompañan. ¡Visita nuestro repositorio de demostraciones Braze aquí! Esta guía de implementación se centra en una implementación Swift, pero se proporcionan fragmentos de código Objective-C para los interesados. ¿Buscas implementaciones HTML? ¡Echa un vistazo a nuestro repositorio de plantillas HTML!

Consideraciones sobre códigos

La siguiente guía ofrece una integración personalizada opcional para desarrolladores que se puede utilizar además de los mensajes predeterminados dentro de la aplicación. Se incluyen controladores de vista personalizados con cada caso de uso, que ofrecen ejemplos para ampliar la funcionalidad y personalizar de forma nativa el aspecto de tus mensajes dentro de la aplicación.

Subclases de ABKInAppMessage

El siguiente fragmento de código es un método delegado de interfaz de usuario del SDK de Braze que determina con qué vista de subclase quieres rellenar tu mensaje dentro de la aplicación. En esta guía cubrimos una implementación básica y mostramos cómo las subclases completo, deslizar hacia arriba y modal pueden implementarse de forma cautivadora. Ten en cuenta que si quieres configurar tu controlador de vista personalizado, debes configurar todas las demás subclases de mensajes dentro de la aplicación. Una vez que tengas una sólida comprensión de los conceptos que hay detrás de las subclases, consulta nuestros casos de uso para empezar a implementar subclases de mensajería dentro de la aplicación.

• 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 prácticos

A continuación te presentamos tres casos de uso. Cada caso de uso ofrece una explicación detallada, fragmentos de código relevantes y una visión de cómo pueden verse y utilizarse los mensajes dentro de la aplicación en el panel de Braze:

• Mensaje personalizado deslizable dentro de la aplicación
• Mensaje modal personalizado dentro de la aplicación
• Mensaje completo personalizado dentro de la aplicación

Mensaje personalizado deslizable dentro de la aplicación

Mientras creas tu mensaje deslizable dentro de la aplicación, puede que notes que no puedes modificar la ubicación del mensaje utilizando los métodos predeterminados. Una modificación como esta es posible subclasificando ABKInAppMessageSlideupViewController y sustituyendo la variable offset por tu propia variable personalizada. La imagen de la derecha muestra un ejemplo de cómo se puede utilizar esto para ajustar tus mensajes deslizantes dentro de la aplicación.

Visita la página SlideFromBottomViewController para empezar.

Añadir un comportamiento adicional a nuestra interfaz predeterminada

• 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 la restricción para la orientación del dispositivo
Ajusta el valor correspondiente en viewWillTransition() porque la subclase asume la responsabilidad de mantener sincronizada la restricción durante los cambios de diseño.

Mensaje modal personalizado dentro de la aplicación

Una ABKInAppMessageModalViewController puede subclasificarse para aprovechar una UIPickerView que ofrezca formas atractivas de recopilar valiosos atributos de usuario. El mensaje modal personalizado dentro de la aplicación te permite utilizar Contenido conectado o cualquier lista disponible para mostrar y capturar atributos de una lista dinámica de elementos.

Puedes interponer tus propias vistas en mensajes dentro de la aplicación subclasificados. Este ejemplo muestra cómo puede utilizarse un UIPickerView para ampliar la funcionalidad de un ABKModalInAppMessageViewController.

Visita el ModalPickerViewController para empezar.

Configuración del panel de control

Para configurar un mensaje modal dentro de la aplicación en el panel, debes proporcionar una lista de elementos formateada como una cadena separada por comas. En nuestro ejemplo, utilizamos Contenido conectado para extraer una lista JSON de nombres de equipos y darles el formato correspondiente.

En los pares clave-valor, proporciona un attribute_key; esta clave, junto con el valor seleccionado por el usuario, se guardará en su perfil de usuario como un atributo personalizado. Tu lógica de vista personalizada debe gestionar los atributos de usuario enviados a Braze.

El diccionario extras del objeto ABKInAppMessage te permite consultar una clave view_type (si existe) que indique la vista correcta que se debe mostrar. Es importante tener en cuenta que los mensajes dentro de la aplicación se configuran para cada mensaje, por lo que las vistas modales personalizadas y predeterminadas pueden funcionar armoniosamente.

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

Mensaje completo personalizado dentro de la aplicación

Utiliza mensajes completos personalizados dentro de la aplicación para crear avisos interactivos y fáciles de usar para recopilar valiosos datos de clientes. El ejemplo de la derecha muestra una implementación del mensaje completo personalizado dentro de la aplicación reimaginado como una cartilla push interactiva con preferencias de notificación.

Visita la página FullListViewController para empezar.

Configuración del panel de control

Para configurar un mensaje completo personalizado dentro de la aplicación en el panel, debes proporcionar una lista de tus etiquetas formateadas como una cadena separada por comas.

En los pares clave-valor, proporciona un attribute_key; esta clave, junto con los valores seleccionados por el usuario, se guardará en su perfil de usuario como un atributo personalizado. Tu lógica de vista personalizada debe gestionar los atributos de usuario enviados a Braze.

Interceptar toques de mensajes dentro de la aplicación

Interceptar los toques de mensajes dentro de la aplicación es crucial para que los botones personalizados de mensajes completos dentro de la aplicación funcionen correctamente. Por predeterminado, ABKInAppMessageImmersive añade un reconocedor de gestos de pulsación sobre el mensaje, para que los usuarios puedan descartar mensajes sin botones. Al añadir un UISwitch o un botón a la jerarquía de la vista UITableViewCell, los toques pasan a ser gestionados por nuestra vista personalizada. A partir de iOS 6, los botones y otros controles tienen preferencia cuando trabajan con reconocedores de gestos, lo que hace que nuestro mensaje dentro de la aplicación personalizado funcione como debería.