Last updated 31 janv. 2025

Ajouter un emplacement

Avant de commencer

Assurez-vous que le SDK Rokt iOS a déjà été intégré dans votre application en suivant les étapes listées ici.

Placements en superposition

Exécutez le SDK Rokt iOS dans votre ViewController souhaité et ajoutez tous les attributs client appropriés. Le code d'exemple ci-dessous utilise ViewDidLoad pour afficher un emplacement en superposition Rokt.

Le SDK fournit des événements de rappel optionnels pour lorsque la vue se charge et se décharge.

Swift

import Rokt_Widget

class OrderConfirmationViewController: UIViewController {
    
    // appelez cette fonction lorsque l'emplacement doit être affiché
    func showWidget() {
        let attributes = ["email": "j.smith@example.com",
                "firstname": "Jenny",
                "lastname": "Smith",
                "mobile": "(555)867-5309",
                "postcode": "90210",
                "country": "US"]

        Rokt.execute(viewName: "RoktExperience", attributes: attributes, 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
        })
    }
}

Objective-C

#import <Rokt_Widget/Rokt_Widget-Swift.h>

// appelez cette fonction lorsque le placement doit être affiché
- (void)showWidget {
    NSDictionary *attributes = @{
        @"email" : @"j.smith@example.com",
        @"firstname": @"Jenny",
        @"lastname": @"Smith",
        @"mobile": @"(555)867-5309",
        @"postcode": @"90210",
        @"country": @"US"
    };
    [Rokt executeWithViewName:@"RoktExperience"
                   attributes:attributes
                   placements:nil
                       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 cacher un indicateur de chargement
    } onEmbeddedSizeChange:^(NSString *selectedPlacement, CGFloat widgetHeight) {
        // Pas requis pour la superposition en plein écran
    }];
}

SwiftUI

import SwiftUI
import Rokt_Widget
class OrderConfirmationViewController: View {
   
    func showPlacement() {
       let attributes = ["email": "j.smith@example.com",
               "firstname": "Jenny",
               "lastname": "Smith",
               "mobile": "(555)867-5309",
               "postcode": "90210",
               "country": "US"]

       Rokt.execute(viewName: "RoktExperience",
                    attributes: attributes,
                    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 cacher un indicateur de chargement
                    })
   }
}

Fonctions optionnelles

Fonction	Objectif
Rokt.close()	Utilisé pour fermer automatiquement les placements en superposition.

Placements intégrés

Modifiez votre Storyboard

Si vous utilisez SwiftUI, veuillez consulter les instructions dans le tableau SwiftUI ci-dessous. Si vous n'utilisez pas SwiftUI, veuillez suivre les instructions suivantes.

Dans votre Storyboard, ajoutez une vue et placez-la dans votre ViewController :

Dans la classe custom, définissez RoktEmbeddedView comme classe de la vue. Ensuite, définissez les contraintes supérieure, principale et secondaire pour correspondre à l'emplacement où le placement intégré sera affiché. Pour la hauteur, nous recommandons d'ajouter une contrainte de hauteur à zéro.

RoktEmbeddedView peut uniquement modifier sa propre hauteur en fonction du contenu du placement. Il y a un rappel dans la méthode execute pour notifier lorsque la hauteur a changé et retourner la nouvelle hauteur.

L'image ci-dessous illustre la manière la plus simple de définir RoktEmbeddedView en utilisant la disposition automatique.

1. Placez RoktEmbeddedView en tant que Classe de la vue et Rokt_Widget en tant que Module.

2. Définissez les contraintes supérieures.

3. Définissez les contraintes principales.

4. Définissez les contraintes secondaires.

5. Choisissez les contraintes de hauteur et de largeur.

6. Définissez la contrainte de hauteur.

7. Ajoutez des contraintes à la vue.

remarque

Le RoktEmbeddedView peut également être créé en code et inclus dans la mise en page dynamiquement.

Exécuter le SDK Rokt

Exécutez le SDK Rokt pour iOS dans votre ViewController souhaité et ajoutez tous les attributs clients appropriés. Le code d'exemple ci-dessous utilise ViewDidLoad pour lancer le placement.

Le SDK fournit des événements de rappel optionnels pour le chargement et le déchargement de la vue.

Swift

import Rokt_Widget
class OrderConfirmationViewController: UIViewController {

   // lié à RoktEmbeddedView créé à l'étape 5 ou il pourrait être créé par programmation
    @IBOutlet weak var roktEmbeddedView: RoktEmbeddedView!

    ...

    // appelez cette fonction lorsque le placement doit être affiché
    func showWidget() {
        let attributes = ["email": "j.smith@example.com",
                "firstname": "Jenny",
                "lastname": "Smith",
                "mobile": "(555)867-5309",
                "postcode": "90210",
                "country": "US"]

       let placements: [String : RoktEmbeddedView] = ["RoktEmbedded1": roktEmbeddedView]

        Rokt.execute(viewName: "RoktEmbeddedExperience", attributes: attributes, placements: placements, onLoad: {
            // Rappel optionnel lorsque le placement Rokt se charge
        }, onUnLoad: {
            // Rappel optionnel lorsque le placement Rokt se décharge
        }, onShouldShowLoadingIndicator: {
            // Rappel optionnel pour afficher un indicateur de chargement
        }, onShouldHideLoadingIndicator: {
            // Rappel optionnel pour masquer un indicateur de chargement
        }, onEmbeddedSizeChange: { selectedPlacement, widgetHeight in
            // Rappel optionnel pour obtenir le placement sélectionné et la hauteur requise par le placement chaque fois que la hauteur du placement change
        })
    }
}

Objective-C

#import <Rokt_Widget/Rokt_Widget-Swift.h>

// appelez cette fonction lorsque le placement doit être affiché
- (void)showWidget {
    NSDictionary *attributes = @{
        @"email" : @"j.smith@example.com",
        @"firstname": @"Jenny",
        @"lastname": @"Smith",
        @"mobile": @"(555)867-5309",
        @"postcode": @"90210",
        @"country": @"US"
    };

    // roktEmbeddedView est @property (weak, nonatomic) IBOutlet RoktEmbeddedView *roktEmbeddedView; dans .h qui pointe vers roktEmbeddedView défini à l'étape 5 ou pourrait être créé par programmation
    NSDictionary<NSString *, RoktEmbeddedView *> *placements= [NSDictionary dictionaryWithObject:self.roktEmbeddedView forKey:@"RoktEmbedded1"];

    [Rokt executeWithViewName:@"RoktExperience"
                   attributes:attributes
                   placements:placements
                       onLoad:^{
        // Callback optionnel pour le chargement du placement Rokt
    } onUnLoad:^{
        // Callback optionnel pour le déchargement du placement Rokt
    } onShouldShowLoadingIndicator:^{
        // Callback optionnel pour afficher un indicateur de chargement
    } onShouldHideLoadingIndicator:^{
        // Callback optionnel pour masquer un indicateur de chargement
    } onEmbeddedSizeChange:^(NSString *selectedPlacement, CGFloat widgetHeight){
        // Callback optionnel pour obtenir le selectedPlacement et la hauteur requise par le placement chaque fois que la hauteur du placement change
    }];
}

SwiftUI

 
import Rokt_Widget
import SwiftUI
 
// créer UIViewRepresentable pour connecter UIKit avec SwiftUI
struct RoktEmbeddedSwiftUIView: UIViewRepresentable {
   typealias UIViewType = RoktEmbeddedView
   var embedded: RoktEmbeddedView
  
   init() {
       embedded = RoktEmbeddedView()
   }
  
   func makeUIView(context: Context) -> RoktEmbeddedView {
       return embedded
   }
  
   func updateUIView(_ uiView: RoktEmbeddedView, context: Context) {
      
   }
}
 
struct OrderConfirmationViewController: View {
  
   // Créer une vue intégrée Rokt
   let roktEmbedded1 = RoktEmbeddedSwiftUIView()
   @State private var embeddedSize: CGFloat = 0
   @State private var placementDisplayed = false
  
   var body: some View {
       ScrollView {
           VStack(spacing: 0){
               // placez la vue intégrée de Rokt où vous le souhaitez
               roktEmbedded1
                   .frame(height: self.embeddedSize, alignment: .center)
           }
       }.onAppear {
           if !placementDisplayed {
        // afficher le placement lorsque la vue apparaît
               showPlacement()
           }
       }
   }
  
   private func showPlacement() {
      
       var placements = [String: RoktEmbeddedView]()
       placements["RoktEmbedded1"] = roktEmbedded1.embedded
      
       let attributes = ["email": "j.smith@example.com",
                         "firstname": "Jenny",
                         "lastname": "Smith",
                         "mobile": "(555)867-5309",
                         "postcode": "90210",
                         "country": "US"]
      
       Rokt.execute(viewName: "RoktEmbeddedExperience",
                    attributes: attributes,
                    placements: placements,
                    onLoad: {
           // Callback facultatif lorsque le placement Rokt se charge
           self.placementDisplayed = true
       }, onUnLoad: {
           // Callback facultatif lorsque le placement Rokt se décharge
       }, onShouldShowLoadingIndicator: {
           // Callback facultatif pour afficher un indicateur de chargement
       }, onShouldHideLoadingIndicator: {
           // Callback facultatif pour masquer un indicateur de chargement
       }, onEmbeddedSizeChange: { selectedPlacement, widgetHeight in
           embeddedSize = widgetHeight
       })
   }
}
 
 

remarque

Pour mettre à jour le nom de la vue RoktExperience ou le nom du placement RoktEmbedded1 avec une valeur différente, contactez votre gestionnaire de compte Rokt pour vous assurer que les placements Rokt sont configurés de manière cohérente.

Composant SwiftUI

À partir de la version majeure 4 du SDK Rokt iOS, vous pouvez ajouter une mise en page Rokt en utilisant le composant RoktLayout. Cela élimine la nécessité d'appeler Rokt.execute et prend en charge une intégration déclarative plus moderne utilisant SwiftUI.

Ajouter le composant

import SwiftUI
import Rokt_Widget

struct OrderConfirmationSwiftUI: View {
    let attributes: [String: String]
    let pageIdentifier: String
    let location: String
    @State var sdkTriggered = true

    var body: some View {
        VStack(alignment: .leading) {

            RoktLayout(sdkTriggered: $sdkTriggered,
                       viewName: pageIdentifier,
                       locationName: location, // Si vous utilisez une mise en page intégrée
                       attributes: attributes,
                       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 montrer un indicateur de chargement
            }, onShouldHideLoadingIndicator: {
                // Callback optionnel pour cacher un indicateur de chargement
            })

        }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
    }
}

remarque

Vous pouvez utiliser le composant RoktLayout pour les mises en page intégrées et en superposition.

Événements

Le SDK fournit les événements sur chaque page via l'API Rokt.events.

Rokt.events(viewName: "viewName") { roktEvent in
    print("Événement Rokt reçu \(roktEvent)")
}

Objets d'événement

Événement	Description	Paramètres
ShowLoadingIndicator	Déclenché avant que le SDK appelle le backend Rokt
HideLoadingIndicator	Déclenché lorsque le SDK reçoit un succès ou un échec du backend Rokt
OfferEngagement	Déclenché lorsque l'utilisateur s'engage avec l'offre	placementId: String
PositiveEngagement	Déclenché lorsque l'utilisateur s'engage positivement avec l'offre	placementId: String
FirstPositiveEngagement	Déclenché lorsque l'utilisateur s'engage positivement avec l'offre pour la première fois	placementId: String, setFulfillmentAttributes: func (attributes: [String: String])
PlacementInteractive	Déclenché lorsqu'un emplacement a été rendu et est interactif	placementId: String
PlacementReady	Déclenché lorsqu'un emplacement est prêt à être affiché mais n'a pas encore rendu le contenu	placementId: String
PlacementClosed	Déclenché lorsqu'un emplacement est fermé par l'utilisateur	placementId: String
PlacementCompleted	Déclenché lorsque la progression de l'offre atteint la fin et qu'aucune autre offre n'est disponible à 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é	placementId: String
PlacementFailure	Déclenché lorsqu'un emplacement n'a pas pu être affiché en raison d'un échec quelconque	placementId: String (optionnel)

Rappels

Le SDK iOS de Rokt prend en charge les rappels suivants qui sont passés dans execute :

onLoad

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

onShouldShowLoadingIndicator

Le 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 d'indicateurs de chargement en attendant que le placement se charge. Il ne nécessite aucun argument et ne renvoie aucune valeur.

remarque

Le comportement de ce rappel a changé entre la version majeure 3 et la version majeure 4 du SDK iOS de Rokt. Il n’y a plus de délai d’une seconde avant que le rappel ne soit exécuté. Si vous utilisez ces rappels dans la version majeure 3 et 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 vos applications si nécessaire.

onShouldHideLoadingIndicator

Le callback onShouldHideLoadingIndicator sera appelé lorsque le SDK obtient une réponse de succès ou d'échec du backend 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 ferme 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.

onEmbeddedSizeChange

Le callback onEmbeddedSizeChange sera appelé lorsque la hauteur du placement ou de la mise en page intégrée sélectionnée subit un changement. Il inclut des arguments pour le placement/la mise en page sélectionné(e) et la nouvelle hauteur, mais ne retourne aucune valeur.