Zum Hauptinhalt springen
Github Repository: https://github.com/KlipFit/kleep-spm

Installation


Dieser Prozess muss nur einmal durchgeführt werden, wenn Sie das SDK zum ersten Mal in Ihrem Projekt installieren müssen. Weitere Informationen zu nachfolgenden Updates finden Sie im Abschnitt Update.
  1. Fügen Sie folgendes Paket hinzu: https://github.com/KlipFit/kleep-spm
  2. Ändern Sie die Abhängigkeitsregel auf: bis zur nächsten Hauptversion

Berechtigungen


Fügen Sie folgende Berechtigung in info.plist Ihres Projekts hinzu: NSCameraUsageDescription

Verwendung


Methode 1: requestSize

Diese Methode ermöglicht die Implementierung der CTA-Logik.
ParameterPrioritätBeschreibung
productIDerforderlichIhre Produkt-ID
retailerNameerforderlichName des Händlers
customerIDoptionalCRM-Identifikator, für Analytics verwendet
trackingIDoptionalBenutzer-ID, die von einer externen Tracking-Lösung verwendet wird
Logik-Schema Dieses Schema erklärt, wie der CTA zum Öffnen von Kleep aktualisiert wird. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 Implementierungsbeispiel
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)
	          }
        }
    }
}

Methode 2: loadView

Diese Methode wird aufgerufen, wenn der CTA angeklickt wird. Sie ermöglicht das Laden der verschiedenen Bildschirme. Der Entwickler, der das SDK integriert, sollte sie in ein Bottom Sheet einbetten.
ParameterPrioritätBeschreibung
productIDerforderlichIhre Produkt-ID
retailerNameerforderlichName des Händlers
customerIDoptionalCRM-Identifikator, für Analytics verwendet
trackingIDoptionalID, die von einem externen Tracking-Anbieter verwendet wird
Implementierungsbeispiel
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
}

Methode 3: track

Diese Methode ermöglicht das Tracking benutzerdefinierter Ereignisse.
ParameterPrioritätBeschreibung
eventNameerforderlichName des zu trackenden Ereignisses
paramsoptionalMit dem Ereignis verbundene Informationen
import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)
Wir möchten 3 Ereignisse tracken:
eventNameAuslöser
product_viewedBeim Aufrufen des PDP
product_added_to_cartBeim Hinzufügen eines Produkts zum Warenkorb
checkout_completedBei der Bestellbestätigung nach der Zahlung
product_viewed Parameter (CSV) Beispiel
{
		productId: str
}
product_added_to_cart Parameter (CSV) Beispiel
{
    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 Parameter (CSV) Beispiel
{
    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"
				}
	    }
	    ...
    ],
}