Last updated 24 oct. 2023

Ajouter un emplacement

Avant de commencer

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

Emplacements superposés

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 superposé Rokt.

Le SDK fournit des événements de rappel facultatifs 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: {
            // Rappel facultatif lorsque l'emplacement Rokt se charge
        }, onUnLoad: {
            // Rappel facultatif lorsque l'emplacement Rokt se décharge
        }, onShouldShowLoadingIndicator: {
            // Rappel facultatif pour afficher un indicateur de chargement
        }, onShouldHideLoadingIndicator: {
            // Rappel facultatif pour masquer un indicateur de chargement
        })
    }
}

Objective-C

#import <Rokt_Widget/Rokt_Widget-Swift.h>

// appeler 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 facultatif lorsque le placement Rokt se charge
    } 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:^(NSString *selectedPlacement, CGFloat widgetHeight) {
        // Non requis pour la superposition 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 facultatif lorsque le placement Rokt se charge
                    }, 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
                    })
   }
}

Fonctions optionnelles

Fonction	Objectif
Rokt.close()	Utilisé pour fermer automatiquement les emplacements superposés.

Emplacements 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 :

Dans la classe custom, définissez RoktEmbeddedView comme classe de la vue. Ensuite, définissez les contraintes supérieure, gauche et droite pour correspondre à l'emplacement où l'emplacement 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 de l'emplacement. Il y a un rappel dans la méthode execute pour notifier lorsque la hauteur a changé et renvoyer 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.

1. Placez RoktEmbeddedView comme Classe de la vue et Rokt_Widget comme Module.

2. Définissez les contraintes supérieures.

3. Définissez les contraintes gauches.

4. Définissez les contraintes droites.

5. Choisissez les contraintes de hauteur et de largeur.

6. Définissez la contrainte de hauteur.

7. Ajoutez les contraintes à la vue.

remarque

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

Exécutez 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 l'emplacement.

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

Swift

import Rokt_Widget
class OrderConfirmationViewController: UIViewController {

   // lié à RoktEmbeddedView créé à l'étape 5 ou il pourrait être créé de manière programmatique
    @IBOutlet weak var roktEmbeddedView: RoktEmbeddedView!

    ...

    // 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"]

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

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

Objective-C

#import <Rokt_Widget/Rokt_Widget-Swift.h>

// appeler cette fonction lorsque l'emplacement 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 peut être créé de manière programmatique
    NSDictionary<NSString *, RoktEmbeddedView *> *placements= [NSDictionary dictionaryWithObject:self.roktEmbeddedView forKey:@"RoktEmbedded1"];

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

SwiftUI

 
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){
               // placer 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 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, veuillez contacter votre responsable de compte Rokt pour vous assurer que les placements Rokt sont configurés de manière cohérente.