Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cobluestars/dataherd-raika
"Dataherd-Raika is a library designed to simulate large-scale user behavior datasets. It takes a single user event (like a click or keyword input) and, by applying simple probability distributions and custom variables, expands it into a vast dataset."
https://github.com/cobluestars/dataherd-raika
big-data data data-generation data-generator data-science front-end javascript machine-learning npm-package simulator statistics typescript user-behavior user-experience
Last synced: 26 days ago
JSON representation
"Dataherd-Raika is a library designed to simulate large-scale user behavior datasets. It takes a single user event (like a click or keyword input) and, by applying simple probability distributions and custom variables, expands it into a vast dataset."
- Host: GitHub
- URL: https://github.com/cobluestars/dataherd-raika
- Owner: cobluestars
- License: mit
- Created: 2023-12-31T02:53:54.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-01-12T23:07:42.000Z (10 months ago)
- Last Synced: 2024-09-30T10:23:33.814Z (about 1 month ago)
- Topics: big-data, data, data-generation, data-generator, data-science, front-end, javascript, machine-learning, npm-package, simulator, statistics, typescript, user-behavior, user-experience
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/dataherd-raika
- Size: 560 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ๐บdataherd-raika๐บ
![dataherd-raika](https://raw.githubusercontent.com/cobluestars/dataherd-raika/main/assets/dataherd-raika.png)
"Dataherd-raika๋ ๋๊ท๋ชจ ์ฌ์ฉ์ ํ๋ ๋ฐ์ดํฐ์ ์ ์๋ฎฌ๋ ์ด์ ํ๊ธฐ ์ํด ์ค๊ณ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ํ๋์ ์ฌ์ฉ์ ์ด๋ฒคํธ(์: ํด๋ฆญ ๋๋ ํค์๋ ์ ๋ ฅ)๋ฅผ ์ทจํ์ฌ ๊ฐ๋จํ ํ๋ฅ ๋ถํฌ์ ์ฌ์ฉ์ ์ ์ ๋ณ์๋ฅผ ์ ์ฉ, ๊ด๋ฒ์ํ ๋ฐ์ดํฐ์ ์ผ๋ก ํ์ฅํฉ๋๋ค."
"Dataherd-Raika is a cutting-edge library designed to simulate large-scale user behavior datasets. It takes a single user event (like a click or keyword input) and, by applying simple probability distributions and custom variables, expands it into a vast dataset."
### ๐บ Ver 1.3.0: ์ปจํ ์คํธ(๋งฅ๋ฝ)์ ๊ธฐ๋ฐํ ์กฐ๊ฑด๋ถ ์ต์ ์ ๊ณต ๐บ
### ๐บ Ver 1.3.0: Provides context-based conditional options ๐บ
``` typescript
//์ปค์คํ ๋ฐ์ดํฐ ํญ๋ชฉ ํ์ , Custom data type
type UserDefinedItem = {
/**๐บ Ver 1.3.0: ์ปจํ ์คํธ(๋งฅ๋ฝ)์ ๊ธฐ๋ฐํ ์กฐ๊ฑด๋ถ ์ต์ ์ ๊ณต ๐บ
* Provides context-based conditional options */
contextBasedOptions?: (context: any) => any;
};```
```javascript
{
name: 'developer',
type: 'array',
options: [
{
name: 'age',
type: 'number',
distribution: 'normal',
mean: 40,
options: [20, 60]
},
{
name: 'salary',
type: 'number',
contextBasedOptions: (context) => {
if (context.age < 30) {
return {
options: [20000, 40000],
distribution: 'normal',
mean: 27000
};
} else {
return {
options: [30000, 100000],
distribution: 'normal',
mean: 40000
};
}
}
}
]
},```
- contextBasedOptions๋ ์ฌ์ฉ์ ์ ์ ๋ฐ์ดํฐ ํญ๋ชฉ์ ๋ํด ๋์ ์ผ๋ก ๊ฐ์ ์์ฑํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ด ๊ธฐ๋ฅ์ ๋ค๋ฅธ ํญ๋ชฉ์ ๊ฐ์ผ๋ก ํน์ ๋ฐ์ดํฐ ํญ๋ชฉ์ ๊ฐ์ ์ํฅ์ ์ฃผ๊ณ ์ถ์ ๋ ์ ์ฉํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ฌ์ฉ์์ ์ฐ๋ น๋(age)์ ๋ฐ๋ผ '๊ธ์ฌ(salary)' ๋ฐ์ดํฐ์ ์คํํธ๋ผ์ ๋ค๋ฅด๊ฒ ์ค์ ํ ์ ์์ต๋๋ค.
- contextBasedOptions provides the capability to dynamically generate values for user-defined data items. This feature is useful when you want the value of a certain data item to be influenced by the values of other items. For example, you can set different spectrums for 'salary' data based on the user's age group.
#### ์ฌ์ฉ๋ฒ: How to Use
``` typescript
//์ปค์คํ ๋ฐ์ดํฐ ํญ๋ชฉ ํ์ , Custom data type
type UserDefinedItem = {
/**๐บ Ver 1.3.0: ์ปจํ ์คํธ(๋งฅ๋ฝ)์ ๊ธฐ๋ฐํ ์กฐ๊ฑด๋ถ ์ต์ ์ ๊ณต ๐บ
* Provides context-based conditional options */
contextBasedOptions?: (context: any) => any;
};```
- UserDefinedItem ํ์ ์ contextBasedOptions ์์ฑ์ ํจ์๋ก ์ ์ํ์ฌ ์ฌ์ฉํฉ๋๋ค. ์ด ํจ์๋ context ๊ฐ์ฒด๋ฅผ ๋งค๊ฐ๋ณ์๋ก ๋ฐ์ผ๋ฉฐ, ์ด context๋ ๋ค๋ฅธ ๋ฐ์ดํฐ ํญ๋ชฉ๋ค์ ํ์ฌ ๊ฐ๋ค์ ํฌํจํฉ๋๋ค.
- ๋งค๊ฐ๋ณ์ context: ํ์ฌ ๋ฐ์ดํฐ ์ํ๋ฅผ ๋ํ๋ด๋ ๊ฐ์ฒด์ ๋๋ค. ์ด ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ๋ฐ์ดํฐ ํญ๋ชฉ๋ค์ ๊ฐ์ ์ ๊ทผํ๊ณ , ๊ทธ์ ๋ฐ๋ผ ์กฐ๊ฑด๋ถ ๋ก์ง์ ์คํํ ์ ์์ต๋๋ค.
- ๋ณด๋ค ์์ธํ ์ฌ์ฉ๋ฒ์, '3. ์ปค์คํ ๋ฐ์ดํฐ ์ค์ : Setting Custom Data'์ '์ฌ์ฉ๋ฒ'์ ์ฐธ์กฐํ์ธ์!
- The contextBasedOptions property of the UserDefinedItem type is defined as a function. This function takes a context object as a parameter, which includes the current values of other data items.
- Parameter context: This is an object representing the current data state. You can use this object to access the values of other data items and execute conditional logic based on them.
- For more detailed usage instructions, refer to '3. ์ปค์คํ ๋ฐ์ดํฐ ์ค์ : Setting Custom Data' in the 'How To Use' section!
## ๐บ์ฌ์ฉ๋ฒ & ์์ ๊ฒฐ๊ณผ: How to Use & Expected Results๐บ
### 1. ์์ ๋ฐ ์ข ๋ฃ ์๊ฐ, ํผํฌ ํ์ ์ค์ : Setting Start and End Time, Peak Times
### ์ฌ์ฉ๋ฒ: How To Use
#### TimestampSettings ๊ฐ์ฒด ์ ์: Defining the TimestampSettings Object
```typescript
type TimestampSettings = {
startTime: string;
endTime: string;
peakTimes?: string[][];
peakTimeWeight: number; //Peak Time Weight: (Default: * 1.6)
};// TimestampSettings ๊ฐ์ฒด ์ด๊ธฐํ
const timestampSettings: TimestampSettings = {
startTime: '2024-01-01T00:00:00',
endTime: '2024-01-01T08:00:00',
peakTimes: [
['2024-01-01T02:00:00', '2024-01-01T03:00:00'],
['2024-01-01T05:00:00', '2024-01-01T06:00:00']
],
peakTimeWeight: 2 //Peak Time Weight
};```
- startTime๊ณผ endTime์ ์ด๋ฒคํธ ํ์์คํฌํ ์์ฑ์ ์ฌ์ฉ๋๋ ์์ ๋ฐ ์ข ๋ฃ ์๊ฐ์ ์ ์ํฉ๋๋ค.
- peakTimes๋ ํน์ ์๊ฐ๋์ ํ์์คํฌํ ์์ฑ ํ๋ฅ ์ ๋์ด๊ธฐ ์ํ ์ค์ ์ ๋๋ค. ๊ฐ ํผํฌ ํ์์ ์์ ๋ฐ ์ข ๋ฃ ์๊ฐ์ ๋ฌธ์์ด ๋ฐฐ์ด๋ก ์ ์๋ฉ๋๋ค.
- ์ ์์์์๋ 2024๋ 1์ 1์ผ ์์ ๋ถํฐ ์ค์ 8์ ์ฌ์ด์ ํ์์คํฌํ๋ฅผ ์์ฑํ๋๋ก ์ค์ ํ๋ฉฐ, ์ค์ 2์๋ถํฐ 3์, ๊ทธ๋ฆฌ๊ณ 5์๋ถํฐ 6์ ์ฌ์ด์ ํ์์คํฌํ ์์ฑ ํ๋ฅ ์ด 2๋ฐฐ ๋์์ง๋๋ก ํผํฌ ํ์์ ์ค์ ํฉ๋๋ค.
- ๐บ Ver 1.2.5: ํผํฌํ์ ๊ฐ์ค์น ์กฐ์ ๐บ: ์ฌ๋งํ๋ฉด ์ ์์์ฒ๋ผ ํผํฌํ์์ startTime ~ endTime ์ฌ์ด์์ ๊ท ๋ฑํ๊ฒ ๋ถ๋ฐฐํด ์ฃผ์ธ์. ํน์ ์๊ฐ๋์ ๋ชฐ์์ ํผํฌ ํ์์ ์ค์ ํ ์, ๊ฐ์ค์น๊ฐ ๋น์ ์์ ์ผ๋ก ๋์์ง๋๋ค. ์ถํ ํด๋น ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
- startTime and endTime define the start and end times for generating event timestamps.
- peakTimes is an optional setting to increase the probability of generating timestamps during specific time intervals. Each peak time interval is defined by an array of start and end time strings.
- In the example above, the timestamp will be generated between midnight and 8 AM on January 1, 2024, with increased probability (twice) of generating timestamps between 4 AM to 6 AM and 7 AM to 8 AM.
- ๐บ Version 1.2.5: Adjusted Peak Time Weight ๐บ: Whenever possible, please distribute peak times evenly between the start time and end time. Setting peak times concentrated in specific time periods can result in abnormally high weightings. I will look into resolving this issue in the future.
#### ์๊ฐ ์ค์ ์ด๊ธฐํ ํจ์: Initialize Timestamp Settings
```javascript
import { initializeTimestampSettings } from 'dataherd-raika';
// ์๊ฐ ์ค์ ์ด๊ธฐํ ํจ์ ํธ์ถ
initializeTimestampSettings(timestampSettings);```
- ์ด ํจ์๋ TimestampSettings ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ํ์์คํฌํ ์์ฑ์ ํ์ํ ์๊ฐ ์ค์ ์ ์ด๊ธฐํํฉ๋๋ค.
- This function initializes the timestamp creation settings using the TimestampSettings object.
#### ๋๋ค ํ์์คํฌํ ์์ฑ ํจ์: Generating a Random Timestamp
```javascript
import { getRandomTimestamp } from 'dataherd-raika';
const timestamp = getRandomTimestamp();
```
- ์ด ํจ์๋ ์ค์ ๋ ์๊ฐ ๋ฒ์ ๋ด์์ ๋๋ค ํ์์คํฌํ๋ฅผ ์์ฑํฉ๋๋ค.
- ์ค์ ๋ ํผํฌ ํ์์ด ์๋ค๋ฉด, ํด๋น ์๊ฐ๋์ ํ์์คํฌํ๊ฐ ์์ฑ๋ ํ๋ฅ ์ด ๋ ๋์ต๋๋ค.
- ์ด๋ฒคํธ ์ถ์ ํจ์ trackClickEvent, trackKeywordEvent๋ฅผ ์ฌ์ฉํ ๊ฒฝ์ฐ, ๋ ํจ์๋ค์ getRandomTimestamp ํจ์์ ํธ์ถ์ด ๋ด์ฅ๋์ด ์์ผ๋ฏ๋ก, ํน๋ณํ ๊ฒฝ์ฐ๊ฐ ์๋๋ผ๋ฉด ํด๋น ํจ์๋ ํธ์ถํ์ง ์์๋ ๋ฉ๋๋ค.
- This function generates a random timestamp within the configured time range.
- If peak times are set, there is a higher probability of generating a timestamp during those intervals.
- When using event tracking functions such as 'trackClickEvent' and 'trackKeywordEvent', calls to 'getRandomTimestamp' are built into these functions, so there is usually no need to call it separately.
### ์์ ๊ฒฐ๊ณผ: Expected Results
- getRandomTimestamp ํจ์๋ initializeTimestampSettings ํจ์๋ฅผ ํตํด ์ค์ ๋ ์๊ฐ ๋ฒ์ ๋ฐ ํผํฌ ํ์์ ๋ฐ๋ผ ๋๋ค ํ์์คํฌํ๋ฅผ ์์ฑํฉ๋๋ค.
- ์ค์ ๋ ํผํฌ ํ์์ด ์์ ๊ฒฝ์ฐ, ํด๋น ์๊ฐ๋์ ํ์์คํฌํ๊ฐ ์์ฑ๋ ํ๋ฅ ์ด ๋์์ง๋๋ค.
- ํผํฌ ํ์์ด ์๊ฑฐ๋ ์ ํจํ์ง ์์ ๊ฒฝ์ฐ, ์ค์ ๋ ์๊ฐ ๋ฒ์ ๋ด์์ ๊ท ๋ฑํ๊ฒ ๋๋ค ํ์์คํฌํ๊ฐ ์์ฑ๋ฉ๋๋ค.
- The getRandomTimestamp function generates random timestamps according to the time range and peak times set by the initializeTimestampSettings function.
- If peak times are set, there is a higher probability of generating timestamps during those specific intervals.
- If there are no peak times set or if they are not valid, timestamps are generated uniformly within the configured time range.
### 2. ํด๋ฆญ ์ด๋ฒคํธ & ํน์ ํค์๋ ์ด๋ฒคํธ ํ์ ์กฐ์ : Adjusting Click Event & Specific Keyword Event Counts
```javascript
import { setUserClickCount,setUserKeywordCount } from 'dataherd-raika';
setUserClickCount(25);
setUserKeywordCount(25);```
- ์ด ํจ์๋ค์ ์ฌ์ฉ์๊ฐ ํด๋ฆญํ๊ฑฐ๋, ํค์๋๋ฅผ ์์ฑ/๊ฒ์ํ ๋๋ง๋ค, ์ ์ฉ๋๋ ์นด์ดํธ, ๋ง๋ค์ด์ง๋ ๋ฐ์ดํฐ ์๋ฅผ ์ค์ ํฉ๋๋ค.
- These functions set the count of data generated each time a user clicks or creates/searches a keyword.
### 3. ์ปค์คํ ๋ฐ์ดํฐ ์ค์ : Setting Custom Data
```typescript
//์ปค์คํ ๋ฐ์ดํฐ ํญ๋ชฉ ํ์ , Custom data type
type UserDefinedItem = {
name: string; // ํญ๋ชฉ๋ช : ๋ฐ์ดํฐ ํญ๋ชฉ ์ด๋ฆ์ ์ ํฉ๋๋ค.
// Item Name: Set the name of the data item.type: 'number' | 'string' | 'boolean' | 'array' | 'object'; // ํ์ : ์ซ์ / ๋ฌธ์ / boolean / ๋ฐฐ์ด / ๊ฐ์ฒด
// Type: Number / String / Boolean / Array / Objectโ type: 'number'; // 1 ~ 10 ์ฌ์ด์์ ๋๋คํ ๊ฐ์ด ์ ํ๋ฉ๋๋ค. distribution, mean, standardDeviation ์ต์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
โ options: [1, 10]; // Random value is selected between 1 and 10. The distribution, mean, and standard deviation options are available.distribution?: 'uniform' | 'normal'; //ํ๋ฅ ๋ถํฌ ํ์ : uniform: ์์ ๋๋ค, normal: ์ ๊ท ๋ถํฌ(๊ฐ์ฐ์ค ๋ถํฌ)
// Distribution Type: Uniform: Completely random, Normal: Gaussian distributionmean?: number; //ํ๊ท ๊ฐ ์ค์ (๋ํดํธ: ์ค๊ฐ๊ฐ),
// Mean: Set the average value (default: median)
standardDeviation?: number; //ํ์คํธ์ฐจ ์ค์ (๋ํดํธ: 6์๊ทธ๋ง),
// Standard Deviation: Set the standard deviation (default: 6 sigma)
options?: number | string | number[] | string[] | UserDefinedItem[] | object; //options์ ํ์ ์ ๋ช ์์ ์ผ๋ก ์ ์
//Explicitly define the type of optionsrandomizeArrays?: boolean; //๋ฐฐ์ด ํญ๋ชฉ์ ๋๋ค ์ ํ ์ฌ๋ถ (๋ํดํธ: false)
//Whether to randomly select array items (default: false)
randomizeObjects?: boolean; //๊ฐ์ฒด ํญ๋ชฉ์ ๋๋ค ์ ํ ์ฌ๋ถ (๋ํดํธ: false)
//Whether to randomly select object items (default: false)selectionProbability?: boolean; //'๋ฌธ์์ด ๊ทธ๋ฃน', '๋ฐฐ์ด', '๊ฐ์ฒด' ํญ๋ชฉ์ ๋๋ค ์ ํ ์, ํน์ ํญ๋ชฉ(๋ค)์ด ์ ํ๋ ํ๋ฅ ์กฐ์ ์ฌ๋ถ (๋ํดํธ: false)
//Adjust the probability of selecting certain items during random selection of 'string group', 'array', 'object' items (default: false)
probabilitySetting?: ProbabilitySetting[]; // selectionProbability: true์ผ ์, ํน์ ํญ๋ชฉ(๋ค)์ ํ๋ฅ ์ค์
// When selectionProbability is true, set the probability of specific itemsarraySelectionCount?: number; //๋ฐฐ์ด์์ ์ ํํ ํญ๋ชฉ ์ (๋ํดํธ: 1)
//Number of items to select from an array (default: 1)objectSelectionCount?: number; //๊ฐ์ฒด์์ ์ ํํ ํญ๋ชฉ ์ (๋ํดํธ: 1)
//Number of items to select from an object (default: 1)randomizeSelectionCount?: boolean; //์ ํํ ํญ๋ชฉ ์ ๋ด์์ ๋ฌด์์ ์ ํ ์ฌ๋ถ (ex: ์ ํ ํญ๋ชฉ: 3์ผ ์, 1๊ฐ ~ 3๊ฐ์ ํญ๋ชฉ์ด ์ ํ๋ ์ ์์.) (๋ํดํธ: 1)
// Whether to randomly select within the chosen number of items
// (e.g., If selection items: 3, then 1 to 3 items can be selected.) (default: 1)/** ๐บ Ver 1.1.0: ์บ์ ๋ฐ์ดํฐ ์ค์ ์ ์ํ ํ์ ๐บ
* Type for Cache Data Settings */cacheSettings?: CacheDataSettings; // ์บ์ ๋ฐ์ดํฐ ์ค์
// Cache Data Settings
/**๐บ Ver 1.3.0: ์ปจํ ์คํธ(๋งฅ๋ฝ)์ ๊ธฐ๋ฐํ ์กฐ๊ฑด๋ถ ์ต์ ์ ๊ณต ๐บ
* Provides context-based conditional options */
contextBasedOptions?: (context: any) => any;
};// ํ๋ฅ ์ค์ ์ ์ํ ํ์
// Type for Probability Setting
type ProbabilitySetting = {
identifier: number | string; //๋ฐฐ์ด/๊ฐ์ฒด์ ์ธ๋ฑ์ค ํน์ ํญ๋ชฉ๋ช ์ผ๋ก ํ๋ฅ ๋ถ์ฌํ ๋์์ ์ ํจ.
// Identifies the target for probability assignment by array/object index or item name.
probability: number; //ํ๋ฅ ๋ถ์ฌ (0~100)
// Probability assignment (0~100)
}/**๐บ Ver 1.1.0: ์บ์ ๋ฐ์ดํฐ ์๋ฎฌ๋ ์ด์ ์ค์ ์ ์ํ ํ์
* Type for Cache Data Simulation Settings ๐บ*/type CacheDataSettings = {
enableCacheSimulation: boolean; // ์บ์ ๋ฐ์ดํฐ ์๋ฎฌ๋ ์ด์ ํ์ฑํ ์ฌ๋ถ
// Whether to enable cache data simulation
simulatedCacheSize: number; // ์๋ฎฌ๋ ์ด์ ์บ์ ๋ฐ์ดํฐ์ ํฌ๊ธฐ (์: MB ๋จ์)
// Size of simulated cache data (e.g., in MB)
simulatedDelay: number; // ๋ฐ์ดํฐ ์ฒ๋ฆฌ ์ ์ธ์์ ์ธ ์ง์ฐ ์๊ฐ (์: ๋ฐ๋ฆฌ์ด ๋จ์)
// Artificial delay time in data processing (e.g., in milliseconds)
};
```
### ์ฌ์ฉ๋ฒ: How To Use
โ์ฃผ์: name, type, options, ํ๋ฅ ์ ์ ๋ฐ ์ค๊ณ๋ฅผ ์ ํํ ํ์ญ์์ค.โ
โCaution: Ensure the definition and design of name, type, options, and probability are accurate.โ
```typescript
import { UserDefinedItem } from 'dataherd-raika';
const UserDefinedItems: UserDefinedItem[] = [
// ์ ์ญ ์ปค์คํ ๋ฐ์ดํฐ ํญ๋ชฉ๋ค
{ name: 'age', type: 'number', options: [10, 50], distribution: 'uniform'},
{ name: 'job', type: 'string', options: ['student', 'web developer', 'accountant'] },
{ name: 'salary', type: 'number', options: [25000, 100000], distribution: 'normal', mean: 36000, standardDeviation: (100000 - 25000) / 6 },
{ name: 'drinks', type: 'array', options: ['Americano', 'Latte', 'Cappuccino', 'Green Tea Latte'], randomizeArrays: true },
{ name: 'hobbies', type: 'object', options: { hobby1: 'reading', hobby2: 'gaming', hobby3: 'coding', hobby4: 'hiking' }, randomizeObjects: true }
]);
``````typescript
import { UserDefinedItem } from 'dataherd-raika';
const GlobalUserDefinedItems: UserDefinedItem[] = [
{
name: 'job',
type: 'array',
options:[
{
name: 'student',
type: 'array',
options: [
{
name: 'age',
type: 'number',
options: [10, 30]
},
{
name: 'salary',
type: 'number',
options: [8000, 20000],
contextBasedOptions: (context) => {
const rareCaseProbability = 0.001
if (Math.random() < rareCaseProbability) {
return {
options: [20000, 100000] //Salary with 0.1% probability: 20000 to 100000
}
}
}
}
]
},
{
name: 'developer',
type: 'array',
options: [
{
name: 'age',
type: 'number',
distribution: 'normal',
mean: 40,
options: [20, 60]
},
{
name: 'salary',
type: 'number',
contextBasedOptions: (context) => {
if (context.age < 30) {
return {
options: [20000, 40000],
distribution: 'normal',
mean: 27000
};
} else {
return {
options: [30000, 100000],
distribution: 'normal',
mean: 40000
};
}
}
}
]
},
{
name: 'accountant',
type: 'array',
options: [
{
name: 'age',
type: 'number',
distribution: 'normal',
mean: 40,
options: [20, 60]
},
{
name: 'salary',
type: 'number',
contextBasedOptions: (context) => {
if (context.age < 30) {
return {
options: [25000, 40000],
distribution: 'normal',
mean: 30000
};
} else {
return {
options: [30000, 100000],
distribution: 'normal',
mean: 40000
};
}
}
}
]
}
],
randomizeArrays: true,
selectionProbability: true,
probabilitySetting: [
{ identifier: 1, probability: 45 }, //(45% ํ๋ฅ ๋ก developer ์ ํ)
{ identifier: 2, probability: 45 }, //(45% ํ๋ฅ ๋ก accountant ์ ํ)
],
},
{
name: 'favorite drinks',
type: 'array',
options: ['Americano', 'Latte', 'Cappuccino', 'Green Tea Latte'],
randomizeArrays: true
},
{
name: 'hobbies',
type: 'object',
options: { hobby1: 'reading', hobby2: 'gaming', hobby3: 'coding', hobby4: 'hiking' },
randomizeObjects: true,
objectSelectionCount: 3,
randomizeSelectionCount: true
},/** ๐บ Ver 1.1.0 ๐บ: ์บ์ ๋ฐ์ดํฐ & ์๊ฐ ์ง์ฐ ๋ก์ง ์ถ๊ฐ
Added Cache Data & Time Delay Logic */
{
name: 'cache-data',
type: 'object',
cacheSettings: {
enableCacheSimulation: true,
simulatedCacheSize: 1, // 1MB์ ๋ฌด์๋ฏธํ ํ ์คํธ ์บ์ ๋ฐ์ดํฐ
// 1MB of nonsensical text cache data
simulatedDelay: 500 // 500ms ์ง์ฐ
// 500ms delay
}
}
];
```### ์์ ๊ฒฐ๊ณผ: Expected Results
- ์ปค์คํ ๋ฐ์ดํฐ๊ฐ ์ด๋ฒคํธ ๋ฐ์ดํฐ์ ํฌํจ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ฌ์ฉ์์ ๋์ด, ์ง์ , ์ฐ๋ด, ์ ํธ ์๋ฃ, ์ทจ๋ฏธ, ์บ์ ๋ฐ์ดํฐ ๋ฑ์ด ๋ฐ์ดํฐ์ ํฌํจ๋ ์ ์์ต๋๋ค.
- Custom data is included in the event data. For example, user information such as age, job, salary, preferred drinks, hobbies, and cache-data can be included in the data.
```json
{
"eventType": "click",
"timestamp": "2024-01-01T19:40:47.615Z",
"cacheImpact": {
"simulatedCacheDelay_ms": 91.29999995231628, // ์บ์ ๋ฐ์ดํฐ์ ์ํด ์ง์ฐ๋ ์๊ฐ (ms)
// Time delayed due to cache data (ms)
"simulatedCacheSize_MB": 1, // ์บ์ ๋ฐ์ดํฐ ํฌ๊ธฐ (MB)
// Cache data size (MB)
"simulatedDelay_ms": 500, // ์ค์ ๋ ์ธ์์ ์ธ ์ง์ฐ ์๊ฐ (ms)
// Configured artificial delay time (ms)
"totalDelay_ms": 591.2999999523163 // ์ด ์ง์ฐ ์๊ฐ (ms)
// Total delay time (ms)
},
"clickCount": 1,
"job": [
{
"developer": [
{
"age": 30
},
{
"salary": 55220
}
]
}
],
"favorite drinks": [
"Americano"
],
"hobbies": {
"hobby1": "reading",
"hobby3": "coding"
}
}
```
### 4. ์ ์ญ & ๋ก์ปฌ ์ปค์คํ ๋ฐ์ดํฐ ๊ทธ๋ฃน ์ค์ : Setting Global & Local Custom Data Groups
- ์ ์ญ ์ปค์คํ ๋ฐ์ดํฐ๋ ๋ชจ๋ ์ด๋ฒคํธ ์ ํ์ ๊ณตํต์ ์ผ๋ก ์ ์ฉ๋๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ํฉ๋๋ค.
- ๋ก์ปฌ ์ปค์คํ ๋ฐ์ดํฐ๋ ํน์ ์ด๋ฒคํธ ์ ํ์๋ง ์ ์ฉ๋๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ํฉ๋๋ค.
- ์ด๋ฅผ ํตํด ์ฌ์ฉ์์ ์ํธ์์ฉ์ ๋ ์ธ๋ฐํ๊ฒ ์ถ์ ํ๊ณ ๋ถ์ํ ์ ์์ต๋๋ค.
- Global custom data defines data that is common to all event types.
- Local custom data defines data that applies only to specific event types.
- This allows for more detailed tracking and analysis of user interactions.
### ์ฌ์ฉ๋ฒ: How To Use
#### ์ ์ญ ์ปค์คํ ๋ฐ์ดํฐ: Global Custom Data
```javascript
import { setGlobalUserDefinedItems } from 'dataherd-raika';
// ์ค์ ํ UserDefinedItems๋ฅผ ์ฌ์ฉ
setGlobalUserDefinedItems(UserDefinedItems);```
- ์ ์ญ ์ปค์คํ ๋ฐ์ดํฐ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ชจ๋ ์ด๋ฒคํธ์์ ๊ณตํต์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค. setGlobalUserDefinedItems ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ญ ๋ฐ์ดํฐ ํญ๋ชฉ์ ์ค์ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ฌ์ฉ์์ ์ง์ , ์ฐ๋ น๋ ๋ฑ๊ณผ ๊ฐ์ ์ผ๋ฐ์ ์ธ ์ ๋ณด๋ฅผ ์ ์ญ ๋ฐ์ดํฐ๋ก ์ค์ ํ ์ ์์ต๋๋ค.
- Global custom data is used across all events in the application. The setGlobalUserDefinedItems function allows you to set global data items. For example, general information such as a user's job or age group can be set as global data.
#### ๋ก์ปฌ ์ปค์คํ ๋ฐ์ดํฐ: Local Custom Data
```javascript
import { setLocalCustomDataGroup } from 'dataherd-raika';
setLocalCustomDataGroup('clickEventCategoryA', [
{ name: 'categoryA-specific', type: 'string', options: ['Option1', 'Option2'] }
]);setLocalCustomDataGroup('clickEventCategoryB', [
{ name: 'categoryB-specific', type: 'number', options: [1, 10] }
]);```
- ๋ก์ปฌ ์ปค์คํ ๋ฐ์ดํฐ๋ ํน์ ์ด๋ฒคํธ์๋ง ์ ์ฉ๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํน์ ํด๋ฆญ ์ด๋ฒคํธ์๋ง ์ ์ฉ๋๋ ๋ฐ์ดํฐ๋ฅผ ์ ์ํ ๋ ์ฌ์ฉํฉ๋๋ค. setLocalCustomDataGroup ํจ์๋ฅผ ํตํด ๊ฐ ์ด๋ฒคํธ ์นดํ ๊ณ ๋ฆฌ๋ณ๋ก ๋ค๋ฅธ ๋ฐ์ดํฐ๋ฅผ ์ค์ ํ ์ ์์ต๋๋ค.
- Local custom data applies only to specific events. For example, it's used to define data that applies only to certain click events. The setLocalCustomDataGroup function allows you to set different data for each event category.
### 5. ํด๋ฆญ ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ค์ / ํด๋ฆญ ์ด๋ฒคํธ ์ถ์ ํจ์ ์ฌ์ฉ: Setting Click Event Listeners / Using Click Event Tracking Function
trackClickEvent ํจ์์ trackKeywordEvent ํจ์๋ ์นํ์ด์ง๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ฌ์ฉ์์ ํด๋ฆญ๊ณผ ํค์๋ ์ด๋ฒคํธ๋ฅผ ์ถ์ ํ๋ ๋ฐ ์ฌ์ฉ๋๋ ํจ์๋ค์ ๋๋ค.
์ด๋ค์ ์ด๋ฌํ ์ํธ์์ฉ๊ณผ ๊ด๋ จ๋ ๋ฐ์ดํฐ๋ฅผ ์์งํ๊ณ ๊ด๋ฆฌํ์ฌ, ๋ถ์, ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์ ๋๋ ๋ค์ํ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ฐ ํจ์์ ๊ตฌ์ฑ๊ณผ ์ฌ์ฉ๋ฒ์ ์์ธํ ์ดํด๋ด ์๋ค.
The trackClickEvent and trackKeywordEvent functions are used to track user click and keyword events on web pages or applications. They collect and manage data related to these interactions for analysis, user experience improvement, or various other purposes. Let's take a closer look at the configuration and usage of each function.
#### trackClickEvent Function
```javascript
trackClickEvent(event, 'clickEventCategoryA', true, false, sendKeywordEventToServer);
```
- ๋งค๊ฐ๋ณ์:
1. event: ์ฌ์ฉ์ ์ํธ์์ฉ์์ ๋ฐ์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ Event ๊ฐ์ฒด (์: ๋ง์ฐ์ค ํด๋ฆญ).
2. eventType: ์ด๋ฒคํธ๋ฅผ ๋ถ๋ฅํ๋ ๋ฌธ์์ด (์: 'button_click', 'nav_click').
3. includeLocalCustomData: ์ด ์ด๋ฒคํธ ์ ํ์ ํน์ ํ ๋ก์ปฌ ์ปค์คํ ๋ฐ์ดํฐ๋ฅผ ํฌํจํ ์ง ๊ฒฐ์ ํ๋ ์ฌ๋ถ. (true/false)
4. includeGlobalCustomData: ์ ์ญ์ ์ผ๋ก ์ ์๋ ์ปค์คํ ๋ฐ์ดํฐ๋ฅผ ํฌํจํ ์ง ๊ฒฐ์ ํ๋ ์ฌ๋ถ. (true/false)
5. callback: ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ฅผ ์์งํ ํ ํธ์ถ๋ ํจ์. ์ต์ ์ผ๋ก ์ ํ ๊ฐ๋ฅ.
- Parameters:
1. event: JavaScript Event object occurring from user interaction (e.g., mouse click).
2. eventType: String categorizing the event (e.g., 'button_click', 'nav_click').
3. includeLocalCustomData: Whether to include local custom data specific to this event type. (true/false)
4. includeGlobalCustomData: Whether to include globally defined custom data. (true/false)
5. callback: An optional function to be called after collecting event data.
- ์๋ ๋ฐฉ์:
1. ํจ์๋ ์ ์๋ ํ์(userDefinedClickCount)๋งํผ ํด๋ฆญ ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ฅผ ์์ฑํฉ๋๋ค.
2. ์ด๋ฒคํธ ์ ํ, ์ง์ ๋ ๋ฒ์ ๋ด์ ๋๋ค ํ์์คํฌํ, ํด๋ฆญ ํ์๋ฅผ ์บก์ฒํฉ๋๋ค.3. includeLocalCustomData ๋๋ includeGlobalCustomData๊ฐ ์ฐธ์ด๋ฉด, ์ด ์ด๋ฒคํธ ์ ํ์ ์ง์ญ์ ์ผ๋ก ํน์ ์ ์ญ์ ์ผ๋ก ์ ์๋ ์ปค์คํ ๋ฐ์ดํฐ๋ ํฌํจ๋ฉ๋๋ค.
4. ์ต์ ์ผ๋ก, ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ ์ ๊ณต๋ callback ํจ์์ ์ ๋ฌ๋ฉ๋๋ค.
- How It Works:
1. The function generates click event data for the defined number of times (userDefinedClickCount).
2. It captures the event type, random timestamps within a specified range, and click count.3. If includeLocalCustomData or includeGlobalCustomData is true, the respective custom data is also included.
4. Optionally, the event data is passed to the provided callback function.
- ๋ชฉ์ :
1. ์ฌ์ฉ์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ถ์ ํ๊ณ ๊ด๋ จ ๋ฐ์ดํฐ๋ฅผ ์์งํฉ๋๋ค.
2. ํ์ค ๋ฐ ์ปค์คํ ๋ฐ์ดํฐ๋ฅผ ์บก์ฒํ๋ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค.
3. ์ฝ๋ฐฑ์ ํตํด ์ด ๋ฐ์ดํฐ์ ์ฌํ ์ฒ๋ฆฌ ๋๋ ์ฒ๋ฆฌ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- Purpose:
1. Tracks user click events and collects related data.
2. Provides flexibility in capturing standard and custom data.
3. Enables post-processing or handling of this data through a callback.
### ์ฌ์ฉ๋ฒ: How To Use
```javascript
import { trackClickEvent } from 'dataherd-raika';
document.getElementById('elementA').addEventListener('click', (event) => {
trackClickEvent(event, 'clickEventCategoryA', true, false);
});document.getElementById('elementB').addEventListener('click', (event) => {
trackClickEvent(event, 'clickEventCategoryB', false, true);
});```
### ์์ ๊ฒฐ๊ณผ: Expected Results
- elementA ํด๋ฆญ ์
1. ๋ก์ปฌ ์ปค์คํ ๋ฐ์ดํฐ(clickEventCategoryA ๊ทธ๋ฃน์ ์ ์๋ ๋ฐ์ดํฐ)๊ฐ ํด๋ฆญ ์ด๋ฒคํธ ๋ฐ์ดํฐ์ ํฌํจ๋์ด ์ ์ก๋ฉ๋๋ค.
2. ์ด ๋ฐ์ดํฐ๋ trackClickEvent ํจ์์ ์ธ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ก true๋ฅผ ์ง์ ํ์ฌ ๋ก์ปฌ ์ปค์คํ ๋ฐ์ดํฐ๋ฅผ ํฌํจํ๋๋ก (์ ์ญ ์ปค์คํ ๋ฐ์ดํฐ ํฌํจ ์ฌ๋ถ: false) ์ค์ ํฉ๋๋ค.
- On Clicking elementA
1. Local custom data (defined in the clickEventCategoryA group) is included and sent with the click event data.
2. This data is set to be included (with global custom data set to false) by specifying true as the third parameter in the trackClickEvent function.
```json
{
"eventType": "click",
"elementId": "elementA",
"timestamp": "2024-01-01T02:30:00.000Z",
"clickCount": 1,
"localCustomData": {
"categoryA-specific": "Option1"
}
}
```
- elementB ํด๋ฆญ ์
1. ์ ์ญ ์ปค์คํ ๋ฐ์ดํฐ(GlobalUserDefinedItems์ ์ ์๋ ๋ฐ์ดํฐ)๊ฐ ํด๋ฆญ ์ด๋ฒคํธ ๋ฐ์ดํฐ์ ํฌํจ๋์ด ์ ์ก๋ฉ๋๋ค.
2. ์ด ๋ฐ์ดํฐ๋ trackClickEvent ํจ์์ ๋ค ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ก true๋ฅผ ์ง์ ํ์ฌ ์ ์ญ ์ปค์คํ ๋ฐ์ดํฐ๋ฅผ ํฌํจํ๋๋ก (์ง์ญ ์ปค์คํ ๋ฐ์ดํฐ ํฌํจ ์ฌ๋ถ: false) ์ค์ ํฉ๋๋ค.
- On Clicking elementB
1. Global custom data (defined in GlobalUserDefinedItems) is included and sent with the click event data.
2. This data is set to be included (with local custom data set to false) by specifying true as the fourth parameter in the trackClickEvent function.
```json
{
"eventType": "click",
"elementId": "elementB",
"timestamp": "2024-01-01T03:45:00.000Z",
"clickCount": 1,
"globalCustomData": {
"age": 30,
"job": "accountant",
"salary": 55000,
"drinks": ["Cappuccino"],
"hobbies": {"hobby1": "coding", "hobby2": "hiking"}
}
}
```
### 6. ํค์๋ ์ด๋ฒคํธ ์ถ์ ํจ์ ์ฌ์ฉ: Using Keyword Event Tracking Function
```javascript
trackKeywordEvent(keyword, 'search', true, true, 1, sendKeywordEventToServer);
```
- ๋งค๊ฐ๋ณ์:
1. keyword: ์ด๋ฒคํธ์ ๊ด๋ จ๋ ํค์๋.
2. eventType: ์ด๋ฒคํธ๋ฅผ ๋ถ๋ฅํ๋ ๋ฌธ์์ด (์: 'search_keyword').
3. includeLocalCustomData: ์ด ์ด๋ฒคํธ ์ ํ์ ํน์ ํ ๋ก์ปฌ ์ปค์คํ ๋ฐ์ดํฐ๋ฅผ ํฌํจํ ์ง ๊ฒฐ์ ํ๋ ์ฌ๋ถ. (true/false)
4. includeGlobalCustomData: ์ ์ญ์ ์ผ๋ก ์ ์๋ ์ปค์คํ ๋ฐ์ดํฐ๋ฅผ ํฌํจํ ์ง ๊ฒฐ์ ํ๋ ์ฌ๋ถ. (true/false)
5. repeatCount: ํค์๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ ์ง์ง ํ์. (ํด๋น ๊ฐ๊ณผ ํค์๋ ์ด๋ฒคํธ ์นด์ดํธ ๊ฐ์ ๋น๊ต ๋ถ์ํ์ฌ, ๋๋ฐฐ๊ธ ์์ฑ๊ณผ ๊ฐ์ด ํน์ ํค์๋๊ฐ ๋น์ ์์ ์ผ๋ก ๋ฐ๋ณต๋๋ ์ฌํญ์ ํํฐ๋งํ ์ ์์ต๋๋ค.)
6. callback: ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ฅผ ์์งํ ํ ํธ์ถ๋ ํจ์. ์ต์ ์ผ๋ก ์ ํ ๊ฐ๋ฅ.
- Parameters:
1. keyword: The keyword associated with the event.
2. eventType: String categorizing the event (e.g., 'search_keyword').
3. includeLocalCustomData: Whether to include local custom data specific to this event type. (true/false)
4. includeGlobalCustomData: Whether to include globally defined custom data. (true/false)
5. repeatCount: The actual number of times the keyword event occurs. (This can be used to filter out abnormal repetitions of specific keywords, like spamming.)
6. callback: An optional function to be called after collecting event data.
- ์๋ ๋ฐฉ์:
1. ํจ์๋ ์ง์ ๋ ํ์(userDefinedKeywordCount)๋งํผ ํค์๋ ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ฅผ ์์ฑํฉ๋๋ค.
2. ํค์๋, ์ด๋ฒคํธ ์ ํ, ๋๋ค ํ์์คํฌํ, ํค์๋ ๋ฐ์ ํ์๋ฅผ ์บก์ฒํฉ๋๋ค.
includeLocalCustomData ๋๋ includeGlobalCustomData๊ฐ ์ ํ๋๋ฉด ์ถ๊ฐ ์ปค์คํ ๋ฐ์ดํฐ๊ฐ ํฌํจ๋ฉ๋๋ค.
3. ์์ง๋ ๋ฐ์ดํฐ๋ ์ ๊ณต๋ callback ํจ์์ ์ ๋ฌ๋ฉ๋๋ค.
- How It Works:
1. The function generates keyword event data for the specified number of times (userDefinedKeywordCount).
2. It captures the keyword, event type, random timestamp, and the occurrence count of the keyword. If includeLocalCustomData or includeGlobalCustomData is selected, additional custom data is included.
3. The collected data is passed to the provided callback function.
- ๋ชฉ์ :
1. ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ํค์๋์ ๊ด๋ จ๋ ์ด๋ฒคํธ๋ฅผ ์ถ์ ํฉ๋๋ค.
2. ์ด๋ฌํ ์ด๋ฒคํธ์ ๋ํ ์์ธํ ๋ฐ์ดํฐ๋ฅผ ์์งํฉ๋๋ค.
3. ์ฝ๋ฐฑ์ ํตํด ์ด๋ฒคํธ ์ฌํ ์ฒ๋ฆฌ ๋๋ ์์ ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- Purpose:
1. Tracks events related to keywords entered by users.
2. Collects detailed data on these events.
3. Enables post-event processing or tasks through a callback.
### ์ฌ์ฉ๋ฒ: How To Use
```javascript
import { trackKeywordEvent } from 'dataherd-raika';
function simulateKeywordEvent() {
const keyword = "exampleKeyword";
trackKeywordEvent(keyword, 'search', true, true, 1);
}simulateKeywordEvent();
```
### ์์ ๊ฒฐ๊ณผ: Expected Results
- ํค์๋ ์ด๋ฒคํธ๊ฐ ์ถ์ ๋๋ฉฐ, ํด๋น ์ด๋ฒคํธ์ ๊ด๋ จ๋ ๋ฐ์ดํฐ๊ฐ ํฌํจ๋ฉ๋๋ค.
- The keyword event is tracked, and data related to the event is included.
```json
{
"keyword": "exampleKeyword",
"eventType": "search",
"timestamp": "2024-01-01T04:00:00.000Z",
"keywordCount": 1,
"repeatCount": 1,
"age": 32,
"job": "developer",
"salary": 30000,
"drinks": ["Green Tea Latte"],
"hobbies": {"hobby1": "gaming"}
}
```
### 7. ์๋ฒ ๋ฐ์ดํฐ ์ ์ฅ: Saving Data to Server
์ด๋ฒคํธ ์ถ์ ํจ์(trackClickEvent ๋๋ trackKeywordEvent)์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ ๋ฌํ์ฌ, ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ๋ก ์ ์กํ ์ ์์ต๋๋ค.
์ด ์ฝ๋ฐฑ ํจ์๋ ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์ ์๋ฒ API ์๋ํฌ์ธํธ๋ก ์ ์กํ๋ ๋ก์ง์ ํฌํจํฉ๋๋ค.
Event tracking functions (trackClickEvent or trackKeywordEvent) can send event data to the server by passing a callback function. This callback function includes logic for sending event data to a server API endpoint.
### ์ฌ์ฉ๋ฒ: How To Use
```typescript
//ํค์๋ ์ด๋ฒคํธ๋ฅผ ์๋ฒ๋ก ๋ณด๋ด๊ธฐ ์ํ ์ฝ๋ฐฑ ํจ์ ์ ์
// Define a callback function to send keyword events to the server
const sendKeywordEventToServer = async (eventData: { [key: string]: KeywordEventData }) => {
try {
await fetch('/api/save-event-data', {
method: 'POST',
body: JSON.stringify(eventData),
headers: {'Content-Type': 'application/json'}
});
} catch (error) {
console.error('Error sending eventdata', error);
}
}//ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์๋ฒ๋ก ๋ณด๋ด๊ธฐ ์ํ ์ฝ๋ฐฑ ํจ์ ์ ์
// Define a callback function to send click events to the server
const sendClickEventToServer = async (eventData: { [key: string]: ClickEventData }) => {
try {
await fetch('/api/save-event-data', {
method: 'POST',
body: JSON.stringify(eventData),
headers: {'Content-Type': 'application/json'}
});
} catch (error) {
console.error('Error sending eventdata', error);
}
}```
### ์์ ๊ฒฐ๊ณผ: Expected Results
- ์์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฒคํธ ์ถ์ ์, ๋ค์๊ณผ ๊ฐ์ ํ๋ฆ์ผ๋ก ๋ฐ์ดํฐ๊ฐ ์ฒ๋ฆฌ๋ฉ๋๋ค:
1. ์ฌ์ฉ์์ ํด๋ฆญ ๋๋ ํค์๋ ์ ๋ ฅ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํฉ๋๋ค.
2. trackClickEvent ๋๋ trackKeywordEvent ํจ์๊ฐ ํธ์ถ๋๋ฉฐ, ์ด๋ฒคํธ ๋ฐ์ดํฐ๊ฐ ์์ฑ๋ฉ๋๋ค.
3. ์์ฑ๋ ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ ์ฝ๋ฐฑ ํจ์ sendEventToServer๋ก ์ ๋ฌ๋ฉ๋๋ค.
4. sendEventToServer ํจ์๋ ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ฅผ JSON ํ์์ผ๋ก ๋ณํํ์ฌ ์๋ฒ์ API ์๋ํฌ์ธํธ(/api/save-event-data)๋ก POST ์์ฒญ์ ๋ณด๋ ๋๋ค.
5. ์๋ฒ๋ ์์ฒญ์ ๋ฐ์ ์ฒ๋ฆฌํ๊ณ , ๋ฐ์ดํฐ๋ฅผ db.json ํ์ผ์ด๋ ๋ค๋ฅธ ๋ฐ์ดํฐ ์คํ ๋ฆฌ์ง์ ์ ์ฅํฉ๋๋ค.
์ด๋ฌํ ํ๋ก์ธ์ค๋ ์ฌ์ฉ์์ ์ํธ์์ฉ์ ์ค์๊ฐ์ผ๋ก ์ถ์ ํ๊ณ , ๋ฐ์ดํฐ๋ฅผ ์ค์ ์๋ฒ์ ์ ์ฅํ์ฌ ๋ถ์ํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ์น์ฌ์ดํธ ์ฌ์ฉ์ฑ ๊ฐ์ , ์ฌ์ฉ์ ๊ฒฝํ ๋ถ์, ์ฌ์ฉ์ ํ๋์ ๋ํ ์ธ์ฌ์ดํธ ํ๋ ๋ฑ์ ํ์ฉํ ์ ์์ต๋๋ค.๋ฐ์ดํฐ๋ JSON ํ์์ผ๋ก ์ ์ฅ๋๋ฏ๋ก, ๋ฐ์ดํฐ ๋ถ์ ๋๊ตฌ๋ ๋์๋ณด๋์ ์ฝ๊ฒ ํตํฉํ์ฌ ์๊ฐํํ๊ณ ๋ถ์ํ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, Google Analytics, Google BigQuery, AWS QuickSight ๋ฑ ๋ค์ํ ํ๋ซํผ๊ณผ์ ํตํฉ์ด ๊ฐ๋ฅํฉ๋๋ค.
- Using the above callback functions for event tracking, the data is processed as follows:
1. A user click or keyword input event occurs.
2. The trackClickEvent or trackKeywordEvent function is called, generating event data.
3. The generated event data is passed to the callback function sendEventToServer.
4. The sendEventToServer function converts the event data into JSON format and sends a POST request to the server's API endpoint (/api/save-event-data).
5. The server receives and processes the request, storing the data in a db.json file or other data storage.
This process can be used to track user interactions in real-time, store data in a central server for analysis, and can be utilized for various purposes such as improving website usability, analyzing user experience, and gaining insights into user behavior.
Since the data is stored in JSON format, it can be easily integrated, visualized, and analyzed with data analysis tools or dashboards. For example, it can be integrated with various platforms such as Google Analytics, Google BigQuery, AWS QuickSight, etc.
### ๐บ Ver 1.2.0: Shotgun Mode ๐บ
```javascript
import { setShotgunMode } from 'dataherd-raika';
setShotgunMode(true, 3000);
// 3์ด์ ์๊ฐ๋์ ๊ฑธ์ณ์, ์ด๋ฒคํธ ์ถ์ ํจ์๊ฐ ์ค์ ํ ํ์๋งํผ ๋ถ์ฐ์ ์ผ๋ก ๋ฐ๋๋จ.
// Event tracking functions are triggered in a distributed manner over a period of 3 seconds.```
1. ์ด(seconds) ๋จ์ ์๊ฐ๋ ์ค์
2. ์ค์ ์๊ฐ๋ ๋ด์์, ์ด๋ฒคํธ ์ถ์ ํจ์๊ฐ ์ค์ ํ ํ์๋งํผ ๋ถ์ฐ์ ์ผ๋ก ๋ฐ๋๋จ.
1. Timeframe set in seconds
2. Within the set timeframe, event tracking functions are triggered in a distributed manner as many times as set.
๏ผ ํ์ค์ ์ธ ์๋๋ฆฌ์ค ๋ชจ์ฌ:
- ์ค์ ์ฌ์ฉ์ ํ๋์ ๋์์ ์ผ์ด๋๊ธฐ๋ณด๋ค๋, ํน์ ์๊ฐ๋์ ๊ฑธ์ณ ๋ถ์ฐ๋์ด ๋ฐ์ํฉ๋๋ค.
- ์ท๊ฑด ๋ชจ๋๋ฅผ ํตํด ์ด๋ฌํ ํ์ค์ ์ธ ์ฌ์ฉ์ ํ๋ ํจํด์ ๋ชจ์ํ ์ ์์ด,
๋ ํ์ค์ ์ธ ํ ์คํธ ํ๊ฒฝ์ ๊ตฌ์ฑํ๋ ๊ฒ์ด ๊ฐ๋ฅํฉ๋๋ค.
* ์ฑ๋ฅ ํ ์คํธ ๊ฐํ:
- ๋ถ์ฐ๋ ์ด๋ฒคํธ ๋ฐ์์ ์๋ฒ์ ํด๋ผ์ด์ธํธ ์ธก ์ฑ๋ฅ์ ๋ํ ๋ณด๋ค ์ ํํ ํ ์คํธ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ์ด๋ ํผํฌ ์๊ฐ ๋์์ ์๋ฒ ๋ถํ ๋ฐ ํด๋ผ์ด์ธํธ ์ธก ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ ํ๊ฐํ๋ ๋ฐ ์ ์ฉํ ์ ์์ต๋๋ค.
* Realistic Scenario Simulation:
- Real user activities occur distributed over a certain period of time rather than simultaneously.
- Shotgun mode allows for the simulation of these realistic user activity patterns, enabling the creation of a more realistic testing environment.
* Enhanced Performance Testing:
- The distributed occurrence of events allows for more accurate testing of server and client-side performance.
- This can be useful for evaluating server load and client-side processing capabilities during peak times.
#### โโโ ์ฃผ์ โโโ
- ์ท๊ฑด ๋ชจ๋๋ก ์ธํด ์ค์ ์ด๋ฒคํธ ์ฒ๋ฆฌ์ ์ง์ฐ์ด ์๊ฒจ, ์ฌ์ฉ์ ์ด๋ฒคํธ ๋ฐ์ดํฐ๊ฐ ์ ๋๋ก ์ ์ฅ๋์ง ์์ ์๋ ์์ต๋๋ค.
- ์ท๊ฑด ๋ชจ๋๋ฅผ ์ฌ์ฉํ ์, ์ด ์ ์ ๋ ํ์ฌ ์ ์คํ๊ฒ ์ฌ์ฉํ์๊ธธ ๋ฐ๋๋๋ค.
- ์ท๊ฑด ๋ชจ๋์์๋ ์ด๋ฒคํธ ์ฒ๋ฆฌ๊ฐ ๋น๋๊ธฐ์ ์ผ๋ก ์ด๋ฃจ์ด์ง๊ธฐ ๋๋ฌธ์, ์ด๋ฒคํธ๊ฐ ์์๋๋ก ์์ฐจ์ ์ผ๋ก ์ฒ๋ฆฌ๋์ง ์๊ฑฐ๋, ๋ค๋ฅธ ๋น๋๊ธฐ ํ๋ก์ธ์ค์์ ํ์ด๋ฐ ๋ฌธ์ ๋ก ์ธํด ๋ฐ์ดํฐ๊ฐ ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ฅ๋์ง ์์ ์ ์์ต๋๋ค.
#### โโโ Caution โโโ
- The use of shotgun mode may cause delays in actual event processing, leading to user event data not being properly saved.
- Please use caution when using shotgun mode, keeping this in mind.
- In shotgun mode, event processing occurs asynchronously, meaning events may not be processed sequentially as expected or data may not be saved correctly due to timing issues with other asynchronous processes.
### ์ข ํฉ: Summary
์ด๋ฌํ ๋ฐฉ์์ผ๋ก ์ฌ์ฉ์ ์ด๋ฒคํธ ๋ฐ์ดํฐ๋ฅผ ์ถ์ ํ๊ณ ๊ด๋ จ ๋ฐ์ดํฐ๋ฅผ ์์ง ๋ฐ ๋ถ์ํ ์ ์์ต๋๋ค.
ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์น์ฌ์ดํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์ฑ ๊ฐ์ , ์ฌ์ฉ์ ๊ฒฝํ ์ต์ ํ ๋ฑ์ ํ์ฉ๋ ์ ์์ต๋๋ค.
This approach allows for the tracking and analysis of user event data. The library can be used to improve usability and optimize user experience in websites and applications.