Mobile SDK - iOS - Kleep Docs

Repositório no Github: https://github.com/KlipFit/kleep-spm

Instalação

Este processo precisa ser seguido apenas uma vez, na primeira vez que você precisar instalar o SDK no seu projeto. Consulte a seção Atualização para ver as instruções de atualizações subsequentes.

Adicione o seguinte pacote: https://github.com/KlipFit/kleep-spm
Altere a regra de dependência para: até a próxima versão principal

Permissões

Adicione a seguinte permissão ao seu projeto no info.plist: NSCameraUsageDescription

Uso

Método 1: `requestSize`

Este método permite implementar a lógica do CTA.

parâmetro	prioridade	descrição
productID	obrigatório	ID do seu produto
retailerName	obrigatório	Nome do varejista
customerID	opcional	Identificador CRM, usado para analytics
trackingID	opcional	ID do usuário usado por solução de rastreamento externa

Esquema de lógica Este esquema explica como atualizar o CTA que abre o Kleep. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 Exemplo de implementação

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 é chamado quando o CTA é clicado. Ele permite carregar as diferentes telas. O desenvolvedor que integra o SDK deve incorporá-las em um bottom sheet.

parâmetro	prioridade	descrição
productID	obrigatório	ID do seu produto
retailerName	obrigatório	Nome do varejista
customerID	opcional	Identificador CRM, usado para analytics
trackingID	opcional	ID usado por provedor de rastreamento externo

Exemplo de implementação

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	prioridade	descrição
eventName	obrigatório	Nome do evento a rastrear
params	opcional	Informações associadas ao evento

import Klipfit

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

Queremos rastrear 3 eventos:

eventName	Acionador
`product_viewed`	Ao visualizar a PDP
`product_added_to_cart`	Ao adicionar produto ao carrinho
`checkout_completed`	Ao confirmar pedido após o pagamento

product_viewed Parâmetros (CSV) Exemplo

{
		productId: str
}

product_added_to_cart Parâmetros (CSV) Exemplo

{
    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) Exemplo

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

Bem-vindo

CMS

Mobile

Painel

Dados

Privacidade

Mobile SDK - iOS

Instalação

Permissões

Uso

Método 1: `requestSize`

Método 2: `loadView`

Método 3: `track`

​Instalação

​Permissões

​Uso

​Método 1: requestSize

​Método 2: loadView

​Método 3: track

Instalação

Permissões

Uso

Método 1: `requestSize`

Método 2: `loadView`

Método 3: `track`