Ajouter un emplacement (ancien)

Avant de commencer

Assurez-vous que le SDK iOS de Rokt a déjà été intégré dans 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 client appropriés. L'exemple de code ci-dessous utilise ViewDidLoad pour afficher un emplacement de superposition Rokt.

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

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

#<|vq_16188|>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 la 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 suivre les instructions suivantes.

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

ViewController

Sur la classe custom, définissez RoktEmbeddedView comme la classe de la vue. Ensuite, définissez les contraintes supérieures, principales et finales 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 peut uniquement modifier sa propre hauteur en fonction du contenu du placement. Il existe 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 Class de la vue et Rokt_Widget comme Module.
Définissez les contraintes supérieures.
Définissez les contraintes principales.
Définissez les contraintes finales.
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éé dans le 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 clients appropriés. Le code d'exemple ci-dessous utilise ViewDidLoad pour lancer le placement.

Le SDK fournit des événements de rappel (callback) 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 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 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
        })
    }
}

#```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 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 selectedPlacement 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 élimine la nécessité d'appeler Rokt.execute et prend en charge une intégration déclarative plus moderne en utilisant SwiftUI.

Ajout du 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 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 n'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 interagit avec l'offre	placementId: String
PositiveEngagement	Déclenché lorsque l'utilisateur interagit positivement avec l'offre	placementId: String
FirstPositiveEngagement	Déclenché lorsque l'utilisateur interagit 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'une défaillance ou lorsqu'aucun emplacement n'est disponible à afficher	placementId: String (optionnel)
OpenUrl	Déclenché lorsque l'utilisateur appuie sur une URL qui est configurée pour être envoyée à l'application partenaire	placementId: String, url: String

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é après un appel réussi à execute, 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 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 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 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 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/mise en page sélectionné et la nouvelle hauteur, mais ne retourne pas de valeur.

Avant de commencer​

Emplacements de superposition​

Fonctions optionnelles​

Placements intégrés​

Modifier votre Storyboard​

Exécuter le SDK Rokt​

Composant SwiftUI​

Ajout du 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

Ajout du composant

Événements

Objets d'événement

Callbacks

onLoad

onShouldShowLoadingIndicator

onShouldHideLoadingIndicator

onUnload

onEmbeddedSizeChange