Passer au contenu

Cette page a été traduite automatiquement et peut contenir des inexactitudes. Pour signaler une erreur de traduction, utilisez le module de commentaires en bas de la table des matières, à droite de la page.

Guide du dépôt du SDK Roku

À propos du SDK Roku de Braze

Le SDK Roku de Braze vous aide à intégrer les fonctionnalités de communication, d’analyse et d’engagement des utilisateurs de Braze dans votre application.

Pour commencer, consultez les ressources suivantes :

Intégration initiale du SDK

Le SDK Roku de Braze met à votre disposition une API qui vous permet de transmettre des informations utiles pour l’analyse, la segmentation et l’engagement.

Étape 1 : Ajouter les fichiers

Ajoutez BrazeSDK.brs à votre application dans le répertoire source.
Ajoutez BrazeTask.brs et BrazeTask.xml à votre application dans le répertoire components.
Pour utiliser l’interface utilisateur par défaut des messages in-app, ajoutez également BrazeDefaultInAppMessage.brs, BrazeDefaultInAppMessage.xml et BrazeDefaultInAppMessageStyles.brs au répertoire components. Ces trois fichiers peuvent être placés dans un sous-dossier de components, à condition qu’ils restent ensemble.

Étape 2 : Ajouter les références

Ajoutez une référence à BrazeSDK.brs dans votre scène principale à l’aide de l’élément script suivant :

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

Étape 3 : Configurer

Dans main.brs, définissez la configuration de Braze sur le nœud global avant CreateScene() afin qu’elle soit disponible pendant l’exécution de init() dans la Scene :

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

Étape 4 : Initialiser Braze

Initialisez l’instance Braze :

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

Configuration des messages in-app

Si vous affichez déjà les messages in-app avec votre propre interface utilisateur et que vous effectuez une mise à niveau vers la version 2.3.0 ou ultérieure, consultez le guide des messages in-app.

Le SDK peut afficher les messages in-app modaux (MODAL) avec son interface par défaut. Cette option est désactivée par défaut. Pour l’activer, ajoutez les fichiers BrazeDefaultInAppMessage (étape 1) et définissez :

config[config_fields.AUTOMATIC_IAM_DISPLAY] = true

Appelez getBrazeInstance(m.BrazeTask) depuis votre Scene principale afin que le SDK puisse attacher la boîte de dialogue sur le thread de rendu. Vous n’avez pas besoin d’observer BrazeInAppMessage ni de créer une interface pour la boîte de dialogue par défaut.

Les messages in-app contextuels, plein écran, modaux stylisés et HTML ne sont pas affichés par l’interface par défaut. Le SDK enregistre une erreur pour ces types. Le rendu HTML n’est pas pris en charge sur Roku.

Si vous affichez vous-même les messages in-app, ne définissez pas automatic_iam_display et observez BrazeTask.BrazeInAppMessage :

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

Pour intercepter un message spécifique et afficher une interface personnalisée tout en conservant l’affichage automatique pour tous les autres, implémentez cette fonction sur votre Scene (et déclarez-la dans l’<interface> du XML de la Scene) :

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

Pour gérer un clic personnalisé tout en utilisant l’interface par défaut des messages in-app, implémentez cette fonction sur votre Scene (et déclarez-la dans l’<interface> du XML de la Scene). Le SDK enregistre le clic, ferme le message, puis appelle cette fonction afin que toute navigation puisse conserver le focus. Le bouton Retour ferme le message sans l’appeler.

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

Lorsque vous gérez vous-même l’interface, votre gestionnaire a accès au message in-app de plus haute priorité déclenché par vos campagnes :

in_app_message = m.BrazeTask.BrazeInAppMessage

Les champs disponibles sont notamment les suivants :

in_app_message.message - Le corps du texte du message in-app
in_app_message.buttons - Liste des boutons (peut être une liste vide).
in_app_message.id - ID à utiliser lors de l’enregistrement des impressions ou des clics
in_app_message.extras - Paires clé-valeur
in_app_message.image_url - URL de l’image
in_app_message.click_action - En l’absence de boutons, action à exécuter lorsque l’utilisateur clique sur « OK » pendant l’affichage du message in-app. Peut être « URI » ou « NONE ».
in_app_message.dismiss_type - Peut être « AUTO_DISMISS » ou « SWIPE »
in_app_message.display_delay - Délai d’attente (en secondes) avant l’affichage du message in-app
in_app_message.duration - Durée d’affichage du message (en millisecondes) lorsque dismiss_type est « AUTO_DISMISS »
in_app_message.header - Le texte d’en-tête du message in-app
in_app_message.uri - Lorsque click_action est « URI », cette valeur doit être affichée

Vous pouvez également utiliser les champs de style définis dans le tableau de bord. Vous pouvez aussi implémenter le message in-app et le styliser dans votre application Roku à l’aide d’une palette standard.

in_app_message.bg_color - Couleur d’arrière-plan
in_app_message.close_button_color - Couleur du bouton de fermeture
in_app_message.frame_color - Couleur de la superposition de l’écran d’arrière-plan
in_app_message.header_text_color - Couleur du texte d’en-tête
in_app_message.message_text_color - Couleur du texte du message
in_app_message.text_align - Peut être « START », « CENTER » ou « END »

Les champs des boutons sont notamment les suivants :

buttons[0].click_action - Peut être « URI » pour indiquer d’ouvrir le champ uri. Peut être « NONE » pour indiquer que ce bouton doit fermer le message in-app.
buttons[0].id - La valeur de l’ID du bouton lui-même
buttons[0].text - Le texte à afficher sur le bouton
buttons[0].uri - Lorsque click_action est « URI », cette valeur doit être affichée
buttons[0].bg_color - Couleur d’arrière-plan du bouton
buttons[0].border_color - Couleur de la bordure du bouton
buttons[0].text_color - Couleur du texte du bouton

L’interface par défaut BrazeDefaultInAppMessage enregistre les impressions et les clics à votre place.

Si vous implémentez votre propre interface, enregistrez une impression lorsque le message est affiché :

LogInAppMessageImpression(in_app_message.id, brazetask)

Lorsqu’un utilisateur clique sur le message, enregistrez un clic :

LogInAppMessageClick(in_app_message.id, brazetask)

Traitez ensuite in_app_message.click_action.

Si l’utilisateur clique sur un bouton, enregistrez le clic sur le bouton :

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

Traitez ensuite inappmessage.buttons[selected].click_action.

Après avoir traité le message in-app, effacez le champ :

m.BrazeTask.BrazeInAppMessage = invalid

Intégration de base du SDK terminée

Braze collecte désormais les données de votre application. Pour en savoir plus sur l’enregistrement des attributs, des événements et des achats, consultez la documentation de Braze. La scène de l’application d’exemple MainScene.brs contient également des exemples d’API.

BrazeDefaultInAppMessage est l’interface utilisateur par défaut du SDK pour les messages in-app. Dans l’application d’exemple, CustomSideBySideInAppMessage.brs montre une mise en page personnalisée via brazeHandleCustomInAppMessage().

Références supplémentaires

Le répertoire torchietv contient un exemple d’application dans laquelle le SDK de Braze est intégré.

Pour en savoir plus sur le dépôt et consulter des exemples de projets, rendez-vous sur https://github.com/braze-inc/braze-roku-sdk.

New Stuff!