SDK Móvil - iOS - Kleep Docs

Repositorio de Github: https://github.com/KlipFit/kleep-spm

Instalación

Este proceso solo debe seguirse una vez, la primera vez que necesites instalar el SDK en tu proyecto. Consulta la sección Actualización para ver las instrucciones de actualizaciones posteriores.

Añade el siguiente paquete: https://github.com/KlipFit/kleep-spm
Cambia la regla de dependencia a: hasta la siguiente versión mayor

Permisos

Añade el siguiente permiso a tu proyecto en info.plist: NSCameraUsageDescription

Uso

Método 1: `requestSize`

Este método permite implementar la lógica del CTA.

parámetro	prioridad	descripción
productID	obligatorio	El ID de tu producto
retailerName	obligatorio	Nombre del comerciante
customerID	opcional	Identificador CRM, usado para analíticas
trackingID	opcional	ID de usuario usado por la solución de seguimiento externa

Esquema lógico Este esquema explica cómo actualizar el CTA que abre Kleep. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 Ejemplo de implementación

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étodo 2: `loadView`

Este método se llama cuando se hace clic en el CTA. Permite cargar las diferentes pantallas. El desarrollador que integra el SDK debe embebidos en un bottom sheet.

parámetro	prioridad	descripción
productID	obligatorio	El ID de tu producto
retailerName	obligatorio	Nombre del comerciante
customerID	opcional	Identificador CRM, usado para analíticas
trackingID	opcional	ID usado por el proveedor de seguimiento externo

Ejemplo de implementación

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étodo 3: `track`

Este método permite rastrear eventos personalizados.

parámetro	prioridad	descripción
eventName	obligatorio	Nombre del evento a rastrear
params	opcional	Información asociada al evento

import Klipfit

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

Queremos rastrear 3 eventos:

eventName	Disparador
`product_viewed`	Al visualizar la PDP
`product_added_to_cart`	Al añadir producto al carrito
`checkout_completed`	Tras la confirmación del pedido después del pago

product_viewed Parámetros (CSV) Ejemplo

{
		productId: str
}

product_added_to_cart Parámetros (CSV) Ejemplo

{
    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 Parámetros (CSV) Ejemplo

{
    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"
				}
	    }
	    ...
    ],
}

Bienvenida

CMS

Móvil

Panel

Datos

Privacidad

SDK Móvil - iOS

Instalación

Permisos

Uso

Método 1: `requestSize`

Método 2: `loadView`

Método 3: `track`

​Instalación

​Permisos

​Uso

​Método 1: requestSize

​Método 2: loadView

​Método 3: track

Instalación

Permisos

Uso

Método 1: `requestSize`

Método 2: `loadView`

Método 3: `track`