Vai al contenuto principale
Github Repository: https://github.com/KlipFit/kleep-spm

Installazione


Questo processo deve essere eseguito una sola volta, la prima volta che è necessario installare l’SDK nel tuo progetto. Fai riferimento alla sezione Aggiornamento per le istruzioni sugli aggiornamenti successivi.
  1. Aggiungi il seguente pacchetto: https://github.com/KlipFit/kleep-spm
  2. Cambia la regola di dipendenza a: fino alla versione major successiva

Permessi


Aggiungi il seguente permesso al tuo progetto in info.plist: NSCameraUsageDescription

Utilizzo


Metodo 1: requestSize

Questo metodo consente di implementare la logica del CTA.
parametroprioritàdescrizione
productIDobbligatorioIl tuo ID prodotto
retailerNameobbligatorioNome del retailer
customerIDopzionaleIdentificatore CRM, usato per le analisi
trackingIDopzionaleID utente usato da una soluzione di tracciamento esterna
Schema logico Questo schema spiega come aggiornare il CTA che apre Kleep. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 Esempio di implementazione
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)
	          }
        }
    }
}

Metodo 2: loadView

Questo metodo viene chiamato quando si clicca sul CTA. Consente di caricare le diverse schermate. Lo sviluppatore che integra l’SDK deve incorporarle in un bottom sheet.
parametroprioritàdescrizione
productIDobbligatorioIl tuo ID prodotto
retailerNameobbligatorioNome del retailer
customerIDopzionaleIdentificatore CRM, usato per le analisi
trackingIDopzionaleID usato da un provider di tracciamento esterno
Esempio di implementazione
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
}

Metodo 3: track

Questo metodo consente di tracciare eventi personalizzati.
parametroprioritàdescrizione
eventNameobbligatorioNome dell’evento da tracciare
paramsopzionaleInformazioni associate all’evento
import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)
Vogliamo tracciare 3 eventi:
eventNameTrigger
product_viewedAlla visualizzazione della PDP
product_added_to_cartAll’aggiunta del prodotto al carrello
checkout_completedAlla conferma dell’ordine dopo il pagamento
product_viewed Parametri (CSV) Esempio
{
		productId: str
}
product_added_to_cart Parametri (CSV) Esempio
{
    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 Parametri (CSV) Esempio
{
    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"
				}
	    }
	    ...
    ],
}