블럭스 연동하기

블럭스를 연동하는 과정을 소개합니다.

고객님 서비스에 따라 연동 방식이 달라요.

서버와 클라이언트 모두 자체 구축한 경우, ⓐ 자체 구축 탭을 클릭하세요.
서버는 웹 빌더를 이용하고, 클라이언트만 자체 구축한 경우, ⓑ 헤드리스 탭을 클릭하세요.

자체 구축
헤드리스

SDK 연동하기

웹 서비스를 기준으로 설명드려요. 각 단계의 자세한 설명은 Web SDK 를 참고하세요.

* 모바일 앱인 경우, Android · iOS · React Native · Flutter SDK 문서를 참고하세요.

1. SDK 설치

스크립트 태그를 추가하거나 패키지를 설치해서 블럭스 SDK를 설치하세요.

스크립트 태그
모듈 임포트

<script src="https://scripts.blux.ai/blux_web_sdk/2.2.28/sdk_script.js"></script>

npm install @blux.ai/web-sdk

yarn add @blux.ai/web-sdk

pnpm install @blux.ai/web-sdk

2. BluxClient 인스턴스 생성

블럭스 콘솔에서 애플리케이션 아이디와 API 키를 확인하세요. 연동 키로 BluxClient 인스턴스를 생성하세요.

스크립트 태그
모듈 임포트

<script>
	const bluxClient = new BluxClient({
		bluxApplicationId: "BLUX_APPLICATION_ID",
		bluxAPIKey: "BLUX_API_KEY",
	});
</script>

import { BluxClient } from @blux.ai/web-sdk

const bluxClient = new BluxClient({
	bluxApplicationId: "BLUX_APPLICATION_ID",
	bluxAPIKey: "BLUX_API_KEY",
});

3. 유저 로그인/로그아웃 설정

고객님의 서비스에 유저가 로그인할 때, BluxClient 인스턴스의 signIn() 메서드를 호출하세요.

유저가 로그아웃할 때는 signOut() 메서드를 호출하세요.

// 유저가 로그인할 때
bluxClient.signIn({
	userId: "USER ID",
});

// 유저가 로그아웃할 때
bluxClient.signOut();

자동 로그인 기능이 구현되어 있다면, 앱이 시작될 때 BluxClient 인스턴스를 생성하고, 바로 signIn() 메서드를 호출하세요.

// 자동 로그인이 구현되어 있는 경우
const bluxClient = new BluxClient({
	bluxApplicationId: "BLUX_APPLICATION_ID",
	bluxAPIKey: "BLUX_API_KEY",
});
bluxClient.signIn({
	userId: "USER ID",
});

유저 정보 연동하기

기존 유저 목록을 연동하고, 블럭스 SDK로 유저 속성을 업데이트하세요.

유저 정보 연동하기를 참고해서 유저 정보를 연동하세요.

1. 기존 유저 목록 연동

고객님 서비스의 기존 유저 목록을 연동하는 방식은 2가지에요.

AWS S3 버킷에 유저 목록을 업로드하기 (상품 정보 연동하기에 안내된 방식과 동일해요.)
.csv 파일을 블럭스 담당자에게 전달하기

* 유저 정보는 보안상의 이유로, URL 접근 방식을 사용하지 않아요.

* 신규로 가입하는 유저는 signIn() 메서드가 호출될 때, 자동으로 연동돼요.

2. 유저 정보 업데이트

유저의 정보를 업데이트할 때는 블럭스 SDK를 이용해요.

고객님의 서비스에서 유저 정보를 업데이트할 때, BluxClient 인스턴스의 setUserProperties() 메서드 혹은 setCustomUserProperties() 메서드를 호출하세요.

// 유저의 전화번호 혹은 이메일 주소를 변경할 때
bluxClient.setUserProperties({
  userProperties: {
    phone_number: "01012345678",
    email_address: "user@example.com",
  },
});

// 유저의 다른 정보를 변경할 때
bluxClient.setCustomUserProperties({
  customUserProperties: {
    age: 20,
    gender: "M",
    ...
  },
});

행동 데이터 연동하기

블럭스 SDK로 행동 데이터를 연동하세요.

행동 데이터 연동하기를 참고해서 행동 데이터를 연동하세요.

1. 기본 이벤트 연동

이벤트 인스턴스를 생성하고 BluxClient 인스턴스의 sendEvent() 메서드를 호출하세요. 호출 시점은 아래 표를 참고하세요.

만약 고객님의 서비스에 '평점 남기기'와 같은 유저 행동이 없다면, AddRateEvent() 이벤트는 연동하지 않아도 돼요. 서비스에 존재하는 이벤트만 연동하세요.

행동	이벤트	호출 시점
상세페이지 진입하기	`AddProductDetailViewEvent()`	유저가 상품 상세페이지에 진입한 순간
장바구니 담기	`AddCartaddEvent()`	유저가 상품을 장바구니에 담은 순간
구매하기	`AddOrderEvent()`	유저가 상품을 구매하여 비용을 지불한 순간
좋아요 누르기	`AddLikeEvent()`	유저가 상품에 좋아요 버튼을 누른 순간
평점 남기기	`AddRateEvent()`	유저가 상품에 평점을 남긴 순간

bluxClient.sendEvent(
	new AddCartaddEvent({
		itemId: "ITEM_ID",
		customEventProperties: {
			brandName: "Nike",
			categoryName: "Shoes",
		},
	})
);

// 한 번에 2개 이상의 행동 데이터를 연동할 수도 있어요.
bluxClient.sendEvent(
	[
		new AddCartaddEvent({
			itemId: "ITEM_ID_1",
			customEventProperties: {
				brandName: "Nike",
			},
		}),
		new AddCartaddEvent({
			itemId: "ITEM_ID_2",
			customEventProperties: {
				brandName: "Adidas",
			},
		}),
		...
	]
);

2. (선택) 커스텀 이벤트 연동

기본 이벤트에 포함되지 않는 추가적인 행동 데이터도 연동할 수 있어요.

커스텀 이벤트 객체의 인스턴스를 생성하고 BluxClient 인스턴스의 sendEvent() 메서드를 호출하세요.

상품 정보 연동하기

상품 정보 연동하기를 참고해서 상품 정보를 연동하세요.

블럭스 연동이 완료되었어요!

앱 설치하기

카페24 · 샵바이 · 고도몰 연동 가이드를 참고해서 웹 빌더에 ‘블럭스’ 앱을 설치하세요.

설치 한 번으로 유저 정보와 상품 정보가 자동으로 연동돼요.