Ajouter un placement (ancien)

Le SDK Rokt pour Flutter peut être utilisé pour afficher le placement en superposition au-dessus du contenu de votre application.

Avant de commencer

Assurez-vous que le SDK Flutter de Rokt a déjà été intégré dans votre application.

Placements en superposition

Importer le SDK

Importez le SDK dans le fichier dart de votre application :

import 'package:rokt_sdk/rokt_sdk.dart';

Exécuter le SDK

Exécutez le SDK au point souhaité en ajoutant les attributs client appropriés. Le placement Rokt s'affichera après un court délai qui peut être configuré via la plateforme Rokt.

Vous pouvez déterminer quels attributs client sont inclus dans votre intégration Rokt. Plus d'informations sur les champs de données disponibles peuvent être trouvées sur la page attributs. Si vous souhaitez intégrer plus d'attributs, vous pouvez ajouter des lignes de code supplémentaires pour chaque nouvel attribut aux exemples ci-dessous.

void executeRokt() {
    // Remplacez RoktExperience par votre viewName
    RoktSdk.execute(
                    viewName: "RoktExperience",
                    attributes: {"email": "j.smith@example.com",
                        "firstname": "Jenny",
                        "lastname": "Smith",
                        "mobile": "(555)867-5309",
                        "postcode": "90210",
                        "country": "US"},
                    onLoad: () {
                        // Callback optionnel pour lorsque le placement Rokt se charge
                    },
                    onUnLoad: () {
                        // Callback optionnel pour lorsque le placement Rokt se décharge
                    },
                    onShouldShowLoadingIndicator: () {
                        // Callback optionnel pour afficher un indicateur de chargement
                    },
                    onShouldHideLoadingIndicator: () {
                        // Callback optionnel pour masquer un indicateur de chargement
                    });
}

remarque

Le ViewName (“RoktExperience”) peut être modifié lors de l'exécution du SDK à plusieurs endroits pour afficher une expérience différente en fonction du contexte où le SDK est exécuté dans l'application. Si vous modifiez le ViewName, travaillez avec l'équipe Rokt pour vous assurer que les ajustements correspondants sont effectués dans le système Rokt.

Emplacements intégrés

Importer le SDK

Importez le SDK Rokt dans le fichier JavaScript :

import 'package:rokt_sdk/rokt_sdk.dart';

Ajouter RoktWidget à votre vue

Ajoutez RoktWidget dans la fonction build de votre vue. Le widget Rokt sera injecté dans cet espace réservé lorsque la méthode execute est appelée :

const RoktWidget(placeholderName: "RoktEmbedded1")

Veuillez vous assurer que la vue est créée dans la zone visible de l'écran, puis appelez showWidget. RoktWidget a un callback pour notifier lorsque le widget est créé, ce qui pourrait être utilisé.

RoktWidget(placeholderName: "RoktEmbedded1", onWidgetCreated: () { showWidget() })

Exécuter le SDK Flutter de Rokt

Exécutez le SDK au point souhaité en envoyant les attributs client appropriés. L'emplacement Rokt s'affiche ensuite après un court délai qui est configurable via la plateforme Rokt.

Vous pouvez dicter quels attributs client sont inclus dans votre intégration Rokt. Plus d'informations sur les champs de données disponibles peuvent être trouvées sur la page attributs. Si vous souhaitez intégrer plus d'attributs, vous pouvez ajouter des lignes de code supplémentaires pour chaque nouvel attribut aux exemples ci-dessous.

void executeRokt() {
    // Remplacez RoktExperience par votre viewName
    RoktSdk.execute(
                    viewName: "RoktEmbeddedExperience",
                    attributes: {"email": "j.smith@example.com",
                        "firstname": "Jenny",
                        "lastname": "Smith",
                        "mobile": "(555)867-5309",
                        "postcode": "90210",
                        "country": "US"},
                    onLoad: () {
                        // Callback optionnel pour lorsque l'emplacement Rokt se charge
                    },
                    onUnLoad: () {
                        // Callback optionnel pour lorsque l'emplacement Rokt se décharge
                    },
                    onShouldShowLoadingIndicator: () {
                        // Callback optionnel pour afficher un indicateur de chargement
                    },
                    onShouldHideLoadingIndicator: () {
                        // Callback optionnel pour masquer un indicateur de chargement
                    });
}

remarque

Le ViewName (« RoktEmbeddedExperience ») peut être modifié lors de l'exécution du SDK dans plusieurs emplacements. Cette configuration vous permet d'afficher une expérience différente selon le contexte où le SDK est exécuté dans l'application. Si vous modifiez le ViewName ou placeholderName (« RoktEmbedded1 »), veuillez travailler avec l'équipe Rokt pour vous assurer que les ajustements correspondants sont effectués dans le système Rokt.

Événements

À partir de la version 4.3.0, le SDK Rokt expose un EventChannel pour les événements du SDK

final EventChannel roktEventChannel = EventChannel('RoktEvents');
//...
roktEventChannel.receiveBroadcastStream().listen((dynamic event) {
    debugPrint("Événement Rokt reçu $event");
    switch (event["event"]) {
    case "ShowLoadingIndicator":
        debugPrint("Événement ${event["viewName"]}");
        break;
    case "HideLoadingIndicator":
        debugPrint("Événement ${event["viewName"]}");
        break;
    case "OfferEngagement":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
        break;
    case "PositiveEngagement":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
        break;
    case "FirstPositiveEngagement":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
        break;
    case "PlacementInteractive":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
        break;
    case "PlacementReady":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
        break;
    case "PlacementClosed":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
        break;
    case "PlacementCompleted":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
        break;
    case "PlacementFailure":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
        break;
    case "OpenUrl":
        debugPrint("Événement ${event["viewName"]}, ${event["placementId"]}");
    default:
        break;
    }
});

Objets d'événement

Événement	Description	Autres propriétés
ShowLoadingIndicator	Déclenché avant que le SDK appelle le backend de Rokt	viewName: String
HideLoadingIndicator	Déclenché lorsque le SDK reçoit un succès ou un échec du backend de Rokt	viewName: String
OfferEngagement	Déclenché lorsque l'utilisateur interagit avec l'offre	viewName: String, placementId: String
PositiveEngagement	Déclenché lorsque l'utilisateur interagit positivement avec l'offre	viewName: String, placementId: String
FirstPositiveEngagement	Déclenché lorsque l'utilisateur interagit positivement avec l'offre pour la première fois	viewName: String, placementId: String
PlacementInteractive	Déclenché lorsqu'un emplacement a été rendu et est interactif	viewName: String, placementId: String
PlacementReady	Déclenché lorsqu'un emplacement est prêt à être affiché mais n'a pas encore rendu le contenu	viewName: String, placementId: String
PlacementClosed	Déclenché lorsque l'utilisateur ferme un emplacement	viewName: String, placementId: String
PlacementCompleted	Déclenché lorsque la progression de l'offre atteint la fin et qu'il n'y a plus d'offres à afficher. Également déclenché lorsque le cache est atteint mais que l'emplacement récupéré ne sera pas affiché car il a été précédemment rejeté	viewName: String, placementId: String
PlacementFailure	Déclenché lorsqu'un emplacement n'a pas pu être affiché en raison d'une défaillance ou lorsque aucun emplacement n'est disponible à afficher	viewName: String, placementId: String (optionnel)
OpenUrl	Déclenché lorsque l'utilisateur appuie sur une URL qui est configurée pour être envoyée à l'application partenaire	viewName: String, placementId: String, url: String

Callbacks

Le SDK Flutter de Rokt prend en charge les callbacks (rappels) suivants qui sont passés dans execute :

onLoad

Le callback onLoad sera appelé lorsque le placement sera chargé et interactif. Ce callback ne fournit aucun argument et ne retourne aucune valeur.

onShouldShowLoadingIndicator

Le callback onShouldShowLoadingIndicator sera appelé lors d'un appel execute réussi, juste avant que le SDK ne déclenche un appel au backend de Rokt. Il peut être utilisé pour afficher des vues de progression des indicateurs de chargement en attendant que le placement se charge. Il ne nécessite aucun argument et ne retourne aucune valeur.

remarque

Le comportement de ce callback a changé entre la version majeure 3 et la version majeure 4 du SDK Flutter de Rokt. Il n'y a plus de délai d'une seconde avant l'exécution du callback. Si vous utilisez ces callbacks dans la version majeure 3 et que vous passez à la version majeure 4, testez le comportement pour vous assurer que l'expérience utilisateur n'est pas affectée. Vous pouvez créer un comportement de délai qui convient aux besoins de votre application si nécessaire.

onShouldHideLoadingIndicator

Le callback onShouldHideLoadingIndicator sera appelé lorsque le SDK obtiendra une réponse de succès ou d'échec du backend de Rokt. Il peut être utilisé pour annuler les vues de progression ou les indicateurs de chargement. Il ne nécessite aucun argument et ne retourne aucune valeur.

onUnload

Le callback onUnload sera appelé lorsque le SDK fermera le placement. Il sera également déclenché si l'appel d'exécution échoue. Il ne nécessite aucun argument et ne retourne aucune valeur.