SDK Mobile - iOS - Kleep Docs

Dépôt Github : https://github.com/KlipFit/kleep-spm

Installation

Cette procédure ne doit être suivie qu’une seule fois, lors de la première installation du SDK dans votre projet. Référez-vous à la section Mise à jour pour les instructions des mises à jour ultérieures.

Ajoutez le package suivant : https://github.com/KlipFit/kleep-spm
Changez la règle de dépendance en : jusqu’à la prochaine version majeure

Permissions

Ajoutez la permission suivante à votre projet dans info.plist : NSCameraUsageDescription

Utilisation

Méthode 1 : `requestSize`

Cette méthode permet d’implémenter la logique du CTA.

paramètre	priorité	description
productID	requis	L’identifiant de votre produit
retailerName	requis	Nom du revendeur
customerID	optionnel	Identifiant CRM, utilisé pour les analytics
trackingID	optionnel	Identifiant utilisateur utilisé par la solution de tracking externe

Schéma logique Ce schéma explique comment mettre à jour le CTA ouvrant Kleep. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 Exemple d’implémentation

import Klipfit

struct ContentView: View {
    @State var isOpenView = false
        
    var body: some View {
        VStack {
            Spacer()
            Button("Open Kleep") {
                isOpenView = true
            }
            Spacer(minLength: 40)
            
            Button("obtenir la taille") {
                Klipfit.shared.requestSize(productID: String, retailerName: String, trackingID: String, customerID: String) { kleepResult in
                    switch kleepResult {
                    case .notSupported:
	                    // Hide CTA
                        print("NotSupported")
                    case .noRecommendationYet:
	                    // Display CTA with neutral label
                        print("NoRecommendationYet")
                    case .recommendationFound(let result):
	                    // Display CTA with size reco
                        print("RecommendationFound: ", result)
                    }
                }
            }
            Spacer()
        }
        .sheet(isPresented: $isOpenView) {
            KlipFitFindSizeView { result, variantID in 
							// addToCart(variantID)
          }
        }
    }
}

Méthode 2 : `loadView`

Cette méthode est appelée lorsque le CTA est cliqué. Elle permet de charger les différents écrans. Le développeur intégrant le SDK doit les intégrer dans une bottom sheet.

paramètre	priorité	description
productID	requis	L’identifiant de votre produit
retailerName	requis	Nom du revendeur
customerID	optionnel	Identifiant CRM, utilisé pour les analytics
trackingID	optionnel	Identifiant utilisé par le fournisseur de tracking externe

Exemple d’implémentation

struct KlipFitFindSizeView: UIViewControllerRepresentable {
		
		public var onResult: KleepOnResultCompletion

    func makeUIViewController(context: Context) -> KlipftNavigationController {
        guard let viewController =
        KlipftNavigationController.loadView(
                productID: String,
                retailerName: String,
                language: KleepLanguageCode, // .fr .en .es .it .pt .nl 
                trackingID: "",
                customerID: "",
                stocks: [String : Bool]?,
                onResult: onResult
        )
        else {
            fatalError("ViewController not implemented in storyboard")
        }
        viewController.navigationBar.isHidden = true
        return viewController
    }
    func updateUIViewController(_ uiViewController: KlipftNavigationController, context: Context) {
    }
    typealias UIViewControllerType = KlipftNavigationController
}

Méthode 3 : `track`

Cette méthode permet de tracker des événements personnalisés.

paramètre	priorité	description
eventName	requis	Nom de l’événement à tracker
params	optionnel	Informations associées à l’événement

import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)

Nous souhaitons tracker 3 événements :

eventName	Déclencheur
`product_viewed`	À la consultation de la PDP
`product_added_to_cart`	À l’ajout au panier
`checkout_completed`	À la confirmation de commande après paiement

product_viewed Paramètres (CSV) Exemple

{
		productId: str
}

product_added_to_cart Paramètres (CSV) Exemple

{
    productId: str,
    variantId: str,
    cart: [
	    {
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
				sku: "XYZ",
		    size: "S",
		    quantity: 2,
		    price: {
						amount: "50",
				    currencyCode: "EUR"		    
		    }
	    },
	    {
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
		    sku: "XYZ",
		    size: "S",
		    quantity: 1,
		    price: {
				    amount: "40",
				    currencyCode: "USD"
				}
	    }
	    ...
    ],
}

checkout_completed Paramètres (CSV) Exemple

{
    orderId: "000001",
    cart: [
	    {
		    lineItemId: "000001#1",
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
				sku: "XYZ",
		    size: "S",
		    quantity: 2,
		    price: {
						amount: "50",
				    currencyCode: "EUR"		    
		    }
	    },
	    {
			  lineItemId: "000000#2",
		    productId: "123ABC456",
		    variantId: "123ABC456-00R",
		    sku: "XYZ",
		    size: "S",
		    quantity: 1,
		    price: {
				    amount: "40",
				    currencyCode: "USD"
				}
	    }
	    ...
    ],
}

Bienvenue

CMS

Mobile

Tableau de bord

Données

Confidentialité

SDK Mobile - iOS

Installation

Permissions

Utilisation

Méthode 1 : `requestSize`

Méthode 2 : `loadView`

Méthode 3 : `track`

​Installation

​Permissions

​Utilisation

​Méthode 1 : requestSize

​Méthode 2 : loadView

​Méthode 3 : track

Installation

Permissions

Utilisation

Méthode 1 : `requestSize`

Méthode 2 : `loadView`

Méthode 3 : `track`