메인 콘텐츠로 건너뛰기
Github Repository: https://github.com/KlipFit/kleep-spm

​
설치

이 과정은 프로젝트에 SDK를 처음 설치할 때 한 번만 수행하면 됩니다. 이후 업데이트 방법은 업데이트 섹션을 참고하세요.
  1. 다음 패키지를 추가합니다: https://github.com/KlipFit/kleep-spm
  2. 의존성 규칙을 다음으로 변경합니다: 다음 주요 버전까지

​
권한

프로젝트의 info.plist에 다음 권한을 추가합니다: NSCameraUsageDescription

​
사용법

​
메서드 1: requestSize

이 메서드는 CTA의 로직을 구현하는 데 사용됩니다.
파라미터우선순위설명
productID필수상품 ID
retailerName필수리테일러 이름
customerID선택 사항CRM 식별자, 분석에 사용
trackingID선택 사항외부 추적 솔루션에서 사용하는 사용자 ID
로직 스키마 이 스키마는 Kleep을 여는 CTA를 업데이트하는 방법을 설명합니다. https://www.figma.com/board/BlurZ01lR3JBQZeTUU98TE/Mobile---CTA-Logic?node-id=0-1&t=ccXWciNziIdfhgew-1 구현 예시 
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)
	          }
        }
    }
}

​
메서드 2: loadView

이 메서드는 CTA가 클릭될 때 호출됩니다. 다양한 화면을 로드하는 데 사용됩니다. SDK를 통합하는 개발자는 이를 바텀 시트에 임베드해야 합니다.
파라미터우선순위설명
productID필수상품 ID
retailerName필수리테일러 이름
customerID선택 사항CRM 식별자, 분석에 사용
trackingID선택 사항외부 추적 제공자가 사용하는 ID
구현 예시 
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
}

​
메서드 3: track

이 메서드는 커스텀 이벤트를 추적하는 데 사용됩니다.
파라미터우선순위설명
eventName필수추적할 이벤트 이름
params선택 사항이벤트와 연관된 정보
import Klipfit

Klipfit.shared.track(eventName: String, params: [String: Any]? = nil)
3가지 이벤트를 추적합니다:
eventName트리거
product_viewed상품 페이지 (PDP) 조회 시
product_added_to_cart장바구니에 상품 추가 시
checkout_completed결제 후 주문 확인 시
product_viewed 파라미터 (CSV) 예시 
{
		productId: str
}
product_added_to_cart 파라미터 (CSV) 예시 
{
    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 파라미터 (CSV) 예시 
{
    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"
				}
	    }
	    ...
    ],
}