Last updated 15 août 2024

Ajouter un emplacement

Avant de commencer

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

Emplacements de superposition

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

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

Swift
Objective-C
SwiftUI

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: {
            // Rappel optionnel pour le chargement de l'emplacement Rokt
        }, onUnLoad: {
            // Rappel optionnel pour le déchargement de l'emplacement Rokt
        }, onShouldShowLoadingIndicator: {
            // Rappel optionnel pour afficher un indicateur de chargement
        }, onShouldHideLoadingIndicator: {
            // Rappel optionnel pour masquer un indicateur de chargement
        })
    }
}

#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 masquer un indicateur de chargement
    } onEmbeddedSizeChange:^(NSString *selectedPlacement, CGFloat widgetHeight) {
        // Non requis pour une superposition plein écran
    }];
}

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 masquer un indicateur de chargement
                    })
   }
}

Fonctions optionnelles

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

Placements intégrés

Modifier votre Storyboard

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

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

ViewController

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

RoktEmbeddedView ne peut modifier que 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 mise en page automatique.

Placez RoktEmbeddedView comme Classe de vue et Rokt_Widget comme Module.
Définissez les contraintes supérieures.
Définissez les contraintes principales.
Définissez les contraintes secondaires.
Choisissez les contraintes de hauteur et de largeur.
Définissez la contrainte de hauteur.
Ajoutez des contraintes à la vue.

RoktEmbeddedView

remarque

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

Exécuter le SDK Rokt

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

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

Swift
Objective-C
SwiftUI

import Rokt_Widget
class OrderConfirmationViewController: UIViewController {

   // lié à RoktEmbeddedView créé à l'étape 5 ou il pourrait être créé par programme
    @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 pour lorsque le placement Rokt se charge
        }, onUnLoad: {
            // Rappel optionnel pour 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 selectedPlacement et la hauteur requise par le placement chaque fois que la hauteur du placement change
        })
    }
}

#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 il pourrait être créé par programme
    NSDictionary<NSString *, RoktEmbeddedView *> *placements= [NSDictionary dictionaryWithObject:self.roktEmbeddedView forKey:@"RoktEmbedded1"];

    [Rokt executeWithViewName:@"RoktExperience"
                   attributes:attributes
                   placements:placements
                       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
    } onEmbeddedSizeChange:^(NSString *selectedPlacement, CGFloat widgetHeight){
        // Callback optionnel pour obtenir le placement sélectionné et la hauteur requise par le placement chaque fois que la hauteur du placement change
    }];
}

 
import Rokt_Widget
import SwiftUI
 
// création de 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 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 optionnel pour lorsque le placement Rokt se charge
           self.placementDisplayed = true
       }, 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
       }, 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 iOS de Rokt, vous pouvez ajouter une mise en page Rokt en utilisant le composant RoktLayout. Cela supprime la nécessité d'appeler Rokt.execute et prend en charge une intégration déclarative plus moderne en utilisant SwiftUI.

Ajouter le composant

import SwiftUI
import Rokt_Widget

struct OrderConfirmationSwiftUI: View {
    let attributes: [String: String]
    let pageIdentifier: String
    let location: String

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

            RoktLayout(sdkTriggered: true,
                       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 afficher un indicateur de chargement
            }, onShouldHideLoadingIndicator: {
                // Callback optionnel pour masquer 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 superposées.

É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 de Rokt
HideLoadingIndicator	Déclenché lorsque le SDK reçoit un succès ou un échec du backend de 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 de contenu	placementId: String
PlacementClosed	Déclenché lorsque l'utilisateur ferme un emplacement	placementId: String
PlacementCompleted	Déclenché lorsque la progression de l'offre atteint la fin et qu'il n'y a plus d'offres à afficher	placementId: String
PlacementFailure	Déclenché lorsqu'un emplacement n'a pas pu être affiché en raison d'une défaillance	placementId: String (optionnel)

Callbacks

Le SDK iOS de Rokt prend en charge les callbacks 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 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 iOS 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 impacté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 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 renvoie 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 renvoie 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 renvoie aucune valeur.

Avant de commencer​

Emplacements de superposition​

Fonctions optionnelles​

Placements intégrés​

Modifier votre Storyboard​

Exécuter le SDK Rokt​

Composant SwiftUI​

Ajouter le composant​

Événements​

Objets d'événement​

Callbacks​

onLoad​

onShouldShowLoadingIndicator​

onShouldHideLoadingIndicator​

onUnload​

onEmbeddedSizeChange​

Avant de commencer

Emplacements de superposition

Fonctions optionnelles

Placements intégrés

Modifier votre Storyboard

Exécuter le SDK Rokt

Composant SwiftUI

Ajouter le composant

Événements

Objets d'événement

Callbacks

onLoad

onShouldShowLoadingIndicator

onShouldHideLoadingIndicator

onUnload

onEmbeddedSizeChange