@blux.ai/web-sdk 0.0.3 → 0.0.5

package/.prettierrc

@@ -1,5 +1,4 @@
 {
-  "printWidth": 120,
   "tabWidth": 2,
   "singleQuote": false
 }

package/.sentryclirc

@@ -0,0 +1,3 @@
+
+[auth]
+token=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

package/README.md

@@ -1,21 +1,157 @@
-# @blux.ai/web-sdk
-
-The BluxClient Web SDK Library is a set of methods attached to a global bluxclient object intended to be used by websites wishing to send data to Blux collector api.
-
-### Requirements
-
----
-
-- [Node.js](https://github.com/nodejs/node) >= 10.24.1 (ES6 2015 지원)
-- TypeScript (권장)
+# Blux Web sdk 행동데이터 연동 안내 문서
 
 ### Installation
 
----
+- Supported Node.js Version `>= 10.24.1`
+- npm/yarn을 이용하여 설치하실 수 있습니다.
 
 ```shell
 // NPM 이용
 npm install @blux.ai/web-sdk
+
 // Yarn 이용
 yarn add @blux.ai/web-sdk
 ```
+
+### **Initialize**
+
+---
+
+- 필요 변수 : `클라이언트 ID`, `API 키`
+
+```typescript
+BluxClient.setLogLevel("debug");
+BluxClient.init({
+  bluxClientId: "{blux_client_id}",
+  bluxApiKey: "{blux_api_key}",
+});
+```
+
+- **setLogLevel** : 연동 관련하여 디버깅을 하기 위해서 로깅을 활성화할 수 있습니다. 해당 설정은 정적이므로 BluxClient를 초기화하기 전에 호출하실 수 있습니다.
+  - `'debug'`
+  - `'log'`
+  - `'warning'`
+  - `'error'`
+  - `'fatal'`
+
+### signIn
+
+- 회원 유저에 대해서 부여하고 계시는 유저 ID를 넘겨주시면 됩니다.
+- Blux 서비스에서 같은 `UserId`를 가지는 유저는 같은 유저로 식별됩니다.
+- 비회원 유저에서 회원 유저로 식별되는 시점에 아래 함수를 호출해주세요.
+- 회원 유저가 앱을 실행하는 시점에도 `initialize` 메소드 호출 이후에 실행되어야 합니다.
+
+```typescript
+BluxClient.signIn("USER ID");
+```
+
+### setUserProperties
+
+- 유저에게 지정된 속성들을 부여합니다. 전화번호, 이메일 번호를 등록할 수 있습니다.
+
+```typescript
+BluxClient.setUserProperties({
+  phone_number: "+821011112222",
+  email_address: "test@example.com",
+});
+```
+
+### setCustomUserProperties
+
+- `setUserProperties`에서 설정할 수 있는 지정된 속성 외 임의의 속성을 부여할 수 있습니다.
+
+```typescript
+BluxClient.setCustomUserProperties({
+  custom_key1: "any_value",
+  custom_key2: true,
+  custom_key3: null,
+  custom_key4: 3,
+});
+```
+
+### signOut
+
+- 유저가 서비스에서 로그아웃 한 경우 호출해주시면 됩니다.
+- 유저들을 더 잘 식별하기위해 사용됩니다.
+
+```typescript
+BluxClient.signOut();
+```
+
+### sendEvent
+
+#### 상품 상세 페이지 진입
+
+: 유저가 제품 상세보기 페이지에 들어가거나, 영상을 시청하는 등 클릭을 통해 어떠한 아이템에 대해 관심을 보이는 행동을 보일 때 사용 가능한 이벤트입니다.
+
+---
+
+```typescript
+BluxClient.sendEvent(
+  new AddProductDetailViewEvent({
+    itemId: "ITEM_ID",
+  })
+);
+```
+
+#### 상품 좋아요
+
+: 유저가 제품이나 영상 등에 좋아요를 누르거나, 찜을 해두는 등 적극적인 관심을 보이는 행동을 할 때 사용 가능한 이벤트입니다.
+
+---
+
+```typescript
+BluxClient.sendEvent(
+  new AddLikeEvent({
+    itemId: "ITEM_ID",
+  })
+);
+```
+
+#### 상품 장바구니 담기
+
+: 이커머스에서 유저가 제품을 장바구니에 담는 행동을 할 때 사용 가능한 이벤트입니다.
+
+---
+
+```typescript
+BluxClient.sendEvent(
+  new AddCartaddEvent({
+    itemId: "ITEM_ID",
+  })
+);
+```
+
+#### 상품 구매
+
+: 유저가 제품을 구매했을 때 사용 가능한 이벤트입니다. 추가 인풋으로 `price`가 요구되며, 제품의 구매 당시 가격을 기록하면 됩니다.
+
+---
+
+- **_동일 상품 복수 구매_**
+  - price 파라미터의 경우, 해당 상품 판매를 통한 총 매출을 계산할 때 활용됩니다. 추천에 의한 매출 기여액 지표를 보여드릴 때 사용되는 값으로 만약 5,000원짜리 상품을 5개 구매하였다면, 25,000 을 입력하시면 됩니다.
+- **_복수 상품 구매_**
+  - `AddPurchaseEvent` 객체를 각 상품 구매건에 맞춰서 생성한 후 list 형태로 넘겨주시면 됩니다.
+
+```typescript
+BluxClient.sendEvent(
+  new AddPurchaseEvent({
+    itemId: "ITEM_ID",
+    price: 1000,
+  })
+);
+```
+
+```typescript
+// 복수 상품을 구매한 경우
+BluxClient.sendEvent([
+  new AddPurchaseEvent({
+    itemId: "ITEM_ID_1",
+    price: 1000,
+  }),
+  new AddPurchaseEvent({
+    itemId: "ITEM_ID_2",
+    price: 2000,
+  }),
+]);
+```

package/demo/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package/demo/craco.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  webpack: {
+    configure: (config) => {
+      // ...
+      const fileLoaderRule = getFileLoaderRule(config.module.rules);
+      if (!fileLoaderRule) {
+        throw new Error("File loader not found");
+      }
+      fileLoaderRule.exclude.push(/\.cjs$/);
+      // ...
+      return config;
+    },
+  },
+};
+
+function getFileLoaderRule(rules) {
+  for (const rule of rules) {
+    if ("oneOf" in rule) {
+      const found = getFileLoaderRule(rule.oneOf);
+      if (found) {
+        return found;
+      }
+    } else if (rule.test === undefined && rule.type === "asset/resource") {
+      return rule;
+    }
+  }
+}

package/demo/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@blux.ai/web-sdk": "../",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@craco/craco": "^7.1.0",
+    "tailwindcss": "^3.4.4"
+  }
+}

package/demo/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/demo/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/demo/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/demo/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

package/demo/src/App.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import BluxClient, { AddLikeEvent } from "@blux.ai/web-sdk";
+function App() {
+  const [bluxClientId, setBluxClientId] = useState<string>(
+    "cc392627-0c7a-40a0-b472-fbd0842eb125"
+  );
+  const [bluxApiKey, setBluxApiKey] = useState<string>(
+    "yvU_CEMtZxqWXKFpkv2FsN2ICoKb6G8BrmiD5urZzYg"
+  );
+
+  const [userId, signIn] = useState<string>(
+    `test_user_id_${Math.floor(Math.random() * 100)}`
+  );
+
+  const [telNumber, setTelNumber] = useState<string>("+821012345678");
+  const [email, setEmail] = useState<string>("qa@blux.ai");
+  const [customKey, setCustomKey] = useState<string>("custom_key");
+  const [customValue, setCustomValue] = useState<string>("custom_value");
+
+  const [isInitialized, setIsInitialized] = useState<boolean>(false);
+
+  return (
+    <div className="p-10">
+      <div className="input-container flex flex-col">
+        <div>BluxUser</div>
+        <div>
+          {BluxClient.bluxUser$.value
+            ? JSON.stringify(BluxClient.bluxUser$.value)
+            : "not initialized"}
+        </div>
+        <div>BluxClientId</div>
+        <input
+          className="w-[500px] rounded-md border-black border-2"
+          type="text"
+          placeholder="Enter Blux Client ID"
+          value={bluxClientId}
+          onChange={(e) => setBluxClientId(e.target.value)}
+        />
+        <div className="mt-3">BluxApiKey</div>
+        <input
+          className="w-[500px] rounded-md border-black border-2"
+          type="text"
+          placeholder="Enter Blux API Key"
+          value={bluxApiKey}
+          onChange={(e) => setBluxApiKey(e.target.value)}
+        />
+        <div className="mt-3">User Id</div>
+        <input
+          className="w-[500px] rounded-md border-black border-2"
+          type="text"
+          placeholder="Enter User Id"
+          value={userId}
+          onChange={(e) => signIn(e.target.value)}
+        />
+        <div className="mt-3">Phone Number</div>
+        <input
+          className="w-[500px] rounded-md border-black border-2"
+          type="text"
+          placeholder="Enter phone number"
+          value={telNumber}
+          onChange={(e) => setTelNumber(e.target.value)}
+        />
+        <div className="mt-3">Email</div>
+        <input
+          className="w-[500px] rounded-md border-black border-2"
+          type="text"
+          placeholder="Enter email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <div className="mt-3">CustomKey</div>
+        <input
+          className="w-[500px] rounded-md border-black border-2"
+          type="text"
+          placeholder="Enter custom key"
+          value={customKey}
+          onChange={(e) => setCustomKey(e.target.value)}
+        />
+        <div className="mt-3">CustomValue</div>
+        <input
+          className="w-[500px] rounded-md border-black border-2"
+          type="text"
+          placeholder="Enter custom value"
+          value={customValue}
+          onChange={(e) => setCustomValue(e.target.value)}
+        />
+      </div>
+      <div className="mt-10 flex gap-4">
+        <button
+          className="bg-blue-500 rounded-md p-4 disabled:bg-gray-300"
+          onClick={() =>
+            BluxClient.init({ bluxClientId, bluxApiKey }).then(() =>
+              setIsInitialized(true)
+            )
+          }
+          disabled={bluxClientId === "" || bluxApiKey === ""}
+        >
+          init
+        </button>
+        <button
+          className="bg-blue-500 rounded-md p-4 disabled:bg-gray-300"
+          onClick={() => BluxClient.signIn(userId)}
+          disabled={!isInitialized}
+        >
+          signIn
+        </button>
+        <button
+          className="bg-blue-500 rounded-md p-4 disabled:bg-gray-300"
+          onClick={() => BluxClient.signOut()}
+          disabled={!isInitialized}
+        >
+          signOut
+        </button>
+        <button
+          className="bg-blue-500 rounded-md p-4 disabled:bg-gray-300"
+          onClick={() =>
+            BluxClient.setUserProperties({ phone_number: telNumber })
+          }
+          disabled={!isInitialized}
+        >
+          setUserProperties (phone number)
+        </button>
+        <button
+          className="bg-blue-500 rounded-md p-4 disabled:bg-gray-300"
+          onClick={() => BluxClient.setUserProperties({ email_address: email })}
+          disabled={!isInitialized}
+        >
+          setUserProperties (email)
+        </button>
+        <button
+          className="bg-blue-500 rounded-md p-4 disabled:bg-gray-300"
+          onClick={() =>
+            BluxClient.setCustomUserProperties({ [customKey]: customValue })
+          }
+          disabled={!isInitialized}
+        >
+          setCustomProperties
+        </button>
+        <button
+          className="bg-blue-500 rounded-md p-4 disabled:bg-gray-300"
+          onClick={() =>
+            BluxClient.sendEvent(
+              new AddLikeEvent({
+                item_id: "test-neo",
+                url: "test-url",
+              })
+            )
+          }
+          disabled={!isInitialized}
+        >
+          sendEvent
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/demo/src/index.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

package/demo/src/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/demo/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/demo/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/demo/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";

package/demo/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};