Guía del repositorio del SDK de Roku

Acerca del SDK de Roku de Braze

El SDK de Roku de Braze te ayuda a integrar las capacidades de mensajería, análisis y participación de los usuarios de Braze en tu aplicación.

Para empezar, consulta los siguientes recursos:

• Guía del usuario de Braze
• Guía para desarrolladores de Braze

Integración inicial del SDK

El SDK de Roku de Braze te proporciona una API para informar de datos que puedes utilizar para análisis, segmentación y participación.

Paso 1: Añade los archivos

1. Añade BrazeSDK.brs a tu aplicación en el directorio source.
2. Añade BrazeTask.brs y BrazeTask.xml a tu aplicación en el directorio components.
3. Para usar la interfaz de usuario predeterminada de mensajes dentro de la aplicación, añade también BrazeDefaultInAppMessage.brs, BrazeDefaultInAppMessage.xml y BrazeDefaultInAppMessageStyles.brs al directorio components. Estos tres archivos pueden ir en una subcarpeta de components, siempre que permanezcan juntos.

Paso 2: Añade las referencias

Añade una referencia a BrazeSDK.brs en tu escena principal utilizando el siguiente elemento script:

1

<script type="text/brightscript" uri="pkg:/source/BrazeSDK.brs"/>

Paso 3: Configura

En main.brs, establece la configuración de Braze en el nodo global antes de CreateScene() para que esté disponible durante el init() de la Scene:

1
2
3
4
5
6
7
8
9

screen = CreateObject("roSGScreen")
globalNode = screen.getGlobalNode()
config = {}
config_fields = BrazeConstants().BRAZE_CONFIG_FIELDS
config[config_fields.API_KEY] = "YOUR_API_KEY_HERE"
config[config_fields.ENDPOINT] = "YOUR_ENDPOINT_HERE (e.g. https://sdk.iad-01.braze.com/)"
config[config_fields.HEARTBEAT_FREQ_IN_SECONDS] = 5
globalNode.addFields({brazeConfig: config})
screen.CreateScene("MainScene")

Paso 4: Inicializa Braze

Inicializa la instancia de Braze:

1
2

m.BrazeTask = createObject("roSGNode", "BrazeTask")
m.Braze = getBrazeInstance(m.BrazeTask)

Configuración de mensajes dentro de la aplicación

Si ya renderizas los mensajes dentro de la aplicación con tu propia interfaz de usuario y vas a actualizar a la versión 2.3.0 o posterior, consulta la guía de mensajes dentro de la aplicación.

El SDK puede mostrar mensajes dentro de la aplicación modales (MODAL) con su interfaz de usuario predeterminada. Esta opción está desactivada de forma predeterminada. Para activarla, añade los archivos BrazeDefaultInAppMessage (paso 1) y establece:

1

config[config_fields.AUTOMATIC_IAM_DISPLAY] = true

Llama a getBrazeInstance(m.BrazeTask) desde tu Scene principal para que el SDK pueda adjuntar el diálogo en el subproceso de renderizado. No necesitas observar BrazeInAppMessage ni crear una interfaz de usuario para el diálogo predeterminado.

La interfaz de usuario predeterminada no muestra los mensajes dentro de la aplicación de tipo deslizamiento hacia arriba, completos, modales con estilo ni HTML. El SDK registra un error para esos tipos. El renderizado HTML no es compatible con Roku.

Si renderizas tú mismo los mensajes dentro de la aplicación, deja automatic_iam_display sin establecer y observa BrazeTask.BrazeInAppMessage:

1

m.BrazeTask.observeField("BrazeInAppMessage", "onInAppMessageReceived")

Para interceptar un mensaje específico y mostrar una interfaz de usuario personalizada sin dejar de usar la visualización automática para todo lo demás, implementa esta función en tu Scene (y declárala en el <interface> del XML de la Scene):

1
2
3
4

function brazeHandleCustomInAppMessage(in_app_message as object) as boolean
  ' Return true if your app displayed the message, false to use the default SDK dialog.
  return false
end function

Para gestionar un clic personalizado sin dejar de usar la interfaz de usuario predeterminada de IAM, implementa esto en tu Scene (y declárala en el <interface> del XML de la Scene). El SDK registra el clic, cierra el mensaje y luego llama a esta función para que cualquier navegación pueda conservar el foco. El botón Atrás descarta el mensaje sin llamarla.

1
2
3
4
5
6
7
8
9

function brazeHandleInAppMessageClick(event as object) as void
  in_app_message = event.in_app_message
  button = event.button
  if button <> invalid
    ' Button click. Use button.click_action and button.uri.
    return
  end if
  ' Body click (no buttons). Use in_app_message.click_action and in_app_message.uri.
end function

Cuando gestionas tú mismo la interfaz de usuario, tu controlador tiene acceso al mensaje dentro de la aplicación de mayor prioridad desencadenado por tus Campaigns:

1

in_app_message = m.BrazeTask.BrazeInAppMessage

Entre los campos disponibles se incluyen:

• in_app_message.message - El texto del cuerpo del mensaje dentro de la aplicación
• in_app_message.buttons - Lista de botones (puede ser una lista vacía).
• in_app_message.id - ID que se utiliza al registrar impresiones o clics
• in_app_message.extras - Pares clave-valor
• in_app_message.image_url - URL de la imagen
• in_app_message.click_action - Cuando no hay botones, indica lo que debe ocurrir cuando el usuario hace clic en “OK” mientras se muestra el IAM. Puede ser “URI” o “NONE”.
• in_app_message.dismiss_type - Puede ser “AUTO_DISMISS” o “SWIPE”
• in_app_message.display_delay - Cuánto tiempo (en segundos) esperar antes de mostrar el mensaje dentro de la aplicación
• in_app_message.duration - Cuánto tiempo (en milisegundos) debe mostrarse el mensaje cuando dismiss_type es “AUTO_DISMISS”
• in_app_message.header - El texto del encabezado del mensaje dentro de la aplicación
• in_app_message.uri - Cuando click_action es “URI”, esto es lo que debe mostrarse

También puedes utilizar los campos de estilo del panel. Como alternativa, puedes implementar el mensaje dentro de la aplicación y darle estilo en tu aplicación de Roku con una paleta estándar.

• in_app_message.bg_color - Color de fondo
• in_app_message.close_button_color - Color del botón de cierre
• in_app_message.frame_color - El color de la superposición de la pantalla de fondo
• in_app_message.header_text_color - Color del texto del encabezado
• in_app_message.message_text_color - Color del texto del mensaje
• in_app_message.text_align - Puede ser “START”, “CENTER” o “END”

Entre los campos de los botones se incluyen:

• buttons[0].click_action - Puede ser “URI” para indicar que se abra el campo uri. Puede ser “NONE” para indicar que este botón debe cerrar el mensaje dentro de la aplicación.
• buttons[0].id - El valor del ID del propio botón
• buttons[0].text - El texto que se muestra en el botón
• buttons[0].uri - Cuando click_action es “URI”, esto es lo que debe mostrarse
• buttons[0].bg_color - Color de fondo del botón
• buttons[0].border_color - Color del borde del botón
• buttons[0].text_color - Color del texto del botón

La interfaz de usuario predeterminada BrazeDefaultInAppMessage registra las impresiones y los clics por ti.

Si implementas tu propia interfaz de usuario, registra una impresión cuando se muestre el mensaje:

1

LogInAppMessageImpression(in_app_message.id, brazetask)

Cuando un usuario haga clic en el mensaje, registra un clic:

1

LogInAppMessageClick(in_app_message.id, brazetask)

Luego procesa in_app_message.click_action.

Si el usuario hace clic en un botón, registra el clic en el botón:

1

LogInAppMessageButtonClick(inappmessage.id, inappmessage.buttons[selected].id, brazetask)

Luego procesa inappmessage.buttons[selected].click_action.

Después de procesar el mensaje dentro de la aplicación, borra el campo:

1

m.BrazeTask.BrazeInAppMessage = invalid

Integración básica del SDK completada

Braze ya recopila datos de tu aplicación. Para obtener más información sobre el registro de atributos, eventos y compras, consulta la documentación de Braze. La escena de la aplicación de ejemplo MainScene.brs también contiene ejemplos de API.

BrazeDefaultInAppMessage es la interfaz de usuario predeterminada de mensajes dentro de la aplicación del SDK. CustomSideBySideInAppMessage.brs en la aplicación de ejemplo muestra un diseño personalizado mediante brazeHandleCustomInAppMessage().

Referencia adicional

El directorio torchietv contiene una aplicación de ejemplo con el SDK de Braze integrado.

Para obtener información sobre el repositorio y proyectos de ejemplo, consulta https://github.com/braze-inc/braze-roku-sdk.