> For the complete documentation index, see [llms.txt](https://docs.dfinery.ai/developer-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dfinery.ai/developer-guide/platform/web/event.md).

# 이벤트

DFINERY SDK를 사용하여 사용자 이벤트를 기록하는 방법입니다. [SDK 연동](/developer-guide/platform/web/integration.md)이 선행되어야 합니다.

## 시작하기 전에

이벤트 연동하기 전에 [DFINERY 콘솔](https://console.dfinery.ai/)에서 이벤트 등록이 필요합니다. 이벤트 등록은 콘솔의 부가 설정 > 데이터 연동 > 이벤트 관리 > 이벤트 목록 페이지로 이동 후 이벤트 생성 버튼을 눌러 표준 & 커스텀 이벤트를 생성할 수 있습니다.

{% hint style="warning" %}
등록되지 않은 이벤트, 이벤트 속성, 잘못된 타입의 이벤트 속성이 기록될 경우, 혹은 등록된 이벤트 속성이 누락될 경우 이벤트가 기록되지 않습니다.
{% endhint %}

## 이벤트 기록

`logEvent` 메소드를 사용하여 유저의 이벤트를 기록합니다. [표준 이벤트](#predefinded_event)는 상수를 제공합니다.

```javascript
Dfinery.logEvent(eventName);

Dfinery.logEvent(eventName, properties);
```

각각의 매개변수는 다음을 의미합니다.

* `eventName` : 이벤트 이름
* `properties` : 이벤트 속성

{% hint style="warning" %}
표준이벤트 마다 필수 값이 다릅니다. 확인 후 사용하세요.
{% endhint %}

### 이벤트 기록 예시

{% tabs %}
{% tab title="JavaScript" %}

```javascript
// 이벤트만 기록할 경우 ex) 상수 사용시
Dfinery.logEvent(DFEvent.LOGIN);

// 또는 이벤트 속성명을 직접 입력해도 됩니다.
Dfinery.logEvent("df_login");

// 이벤트 속성과 함께 기록할 경우 ex) 회원가입
const properties = {};
properties[DFEventProperty.SIGN_CHANNEL] = "Kakao";
Dfinery.logEvent(DFEvent.SIGN_UP, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

// 이벤트만 기록할 경우 ex) 상수 사용시
void Dfinery.logEvent(DFEvent.LOGIN);

// 또는 이벤트 속성명을 직접 입력해도 됩니다.
void Dfinery.logEvent("df_login");

// 이벤트 속성과 함께 기록할 경우 ex) 회원가입
const properties: Record<string, unknown> = {};
properties[DFEventProperty.SIGN_CHANNEL] = "Kakao";
void Dfinery.logEvent(DFEvent.SIGN_UP, properties);
```

{% endtab %}
{% endtabs %}

## 표준 이벤트 & 상품 속성

표준 이벤트와 표준 이벤트 속성, 상품 속성은 아래와 같습니다. 이벤트 이름으로도 사용가능합니다.

### 표준 이벤트 <a href="#predefinded_event" id="predefinded_event"></a>

표준 이벤트 이름은 다음과 같이 사전 정의된 정적 상수로 제공됩니다.

| 상수                             | 이벤트명                       | 표기명      |
| ------------------------------ | -------------------------- | -------- |
| `DFEvent.LOGIN`                | df\_login                  | 로그인      |
| `DFEvent.LOGOUT`               | df\_logout                 | 로그아웃     |
| `DFEvent.SIGN_UP`              | df\_sign\_up               | 회원가입     |
| `DFEvent.PURCHASE`             | df\_purchase               | 구매       |
| `DFEvent.VIEW_HOME`            | df\_view\_home             | 홈 화면 조회  |
| `DFEvent.VIEW_PRODUCT_DETAILS` | df\_view\_product\_details | 상품 상세보기  |
| `DFEvent.ADD_TO_CART`          | df\_add\_to\_cart          | 장바구니 담기  |
| `DFEvent.ADD_TO_WISHLIST`      | df\_add\_to\_wishlist      | 관심상품 추가  |
| `DFEvent.REFUND`               | df\_refund                 | 주문취소하기   |
| `DFEvent.VIEW_SEARCH_RESULT`   | df\_view\_search\_result   | 상품 검색하기  |
| `DFEvent.SHARE_PRODUCT`        | df\_share\_product         | 상품 공유하기  |
| `DFEvent.VIEW_LIST`            | df\_view\_list             | 상품 목록 조회 |
| `DFEvent.VIEW_CART`            | df\_view\_cart             | 장바구니 조회  |
| `DFEvent.ADD_PAYMENT_INFO`     | df\_add\_payment\_info     | 구매 정보 입력 |
| `DFEvent.REMOVE_CART`          | df\_remove\_cart           | 장바구니 삭제  |

### 표준 이벤트 속성

표준 이벤트의 속성 명의 경우 다음과 같이 이벤트 속성 명이 사전 정의된 정적 상수로 제공됩니다.

| 상수                                      | 이벤트 속성명                     | 표기명       |
| --------------------------------------- | --------------------------- | --------- |
| `DFEventProperty.ITEMS`                 | df\_items                   | 상품        |
| `DFEventProperty.TOTAL_REFUND_AMOUNT`   | df\_total\_refund\_amount   | 환불(취소) 총액 |
| `DFEventProperty.ORDER_ID`              | df\_order\_id               | 주문 번호(ID) |
| `DFEventProperty.DELIVERY_CHARGE`       | df\_delivery\_charge        | 배송료       |
| `DFEventProperty.PAYMENT_METHOD`        | df\_payment\_method         | 결제 방법     |
| `DFEventProperty.TOTAL_PURCHASE_AMOUNT` | df\_total\_purchase\_amount | 주문 총액     |
| `DFEventProperty.SHARING_CHANNEL`       | df\_sharing\_channel        | 상품공유 채널   |
| `DFEventProperty.SIGN_CHANNEL`          | df\_sign\_channel           | 회원가입 채널   |
| `DFEventProperty.KEYWORD`               | df\_keyword                 | 검색 키워드    |

### 상품 속성 <a href="#item_property" id="item_property"></a>

DFEventProperty.ITEMS 내에 배열로 적재되는 상품에 대한 기 정의된 속성 값에 대한 정보입니다. ITEM\_ID, ITEM\_NAME, ITEM\_PRICE, ITEM\_QUANTITY, ITEM\_DISCOUNT는 필수 값으로 반드시 포함해야 합니다.

| 상수                               | 이벤트 속성명        | 타입     | 설명        | 필수 |
| -------------------------------- | -------------- | ------ | --------- | -- |
| `DFEventProperty.ITEM_ID`        | df\_item\_id   | String | 상품 번호(ID) | ✅  |
| `DFEventProperty.ITEM_NAME`      | df\_item\_name | String | 상품 명      | ✅  |
| `DFEventProperty.ITEM_PRICE`     | df\_price      | Number | 상품 단가     | ✅  |
| `DFEventProperty.ITEM_QUANTITY`  | df\_quantity   | Number | 상품 수량     | ✅  |
| `DFEventProperty.ITEM_DISCOUNT`  | df\_discount   | Number | 상품 할인가    | ✅  |
| `DFEventProperty.ITEM_CATEGORY1` | df\_category1  | String | 상품 카테고리1  |    |
| `DFEventProperty.ITEM_CATEGORY2` | df\_category2  | String | 상품 카테고리2  |    |
| `DFEventProperty.ITEM_CATEGORY3` | df\_category3  | String | 상품 카테고리3  |    |
| `DFEventProperty.ITEM_CATEGORY4` | df\_category4  | String | 상품 카테고리4  |    |
| `DFEventProperty.ITEM_CATEGORY5` | df\_category5  | String | 상품 카테고리5  |    |

## 표준 이벤트 사용 예시

### 로그인

유저가 로그인하는 동작을 나타내는 이벤트입니다.\
로그인 이벤트를 호출하기 전에 유저의 Identity를 설정하면 해당 유저의 Login이벤트로 측정할 수 있습니다. 비동기(async) 함수내에서 setIdentity 함수 실행 후에 logEvent 함수가 호출되어야 합니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
async function DfineryLogin() {
  // 유저 식별 정보 설정
  await Dfinery.setIdentity(DFIdentity.EXTERNAL_ID, "TestUserId");
  // 로그인 이벤트
  Dfinery.logEvent(DFEvent.LOGIN);
}
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFIdentity } from "@igaworks/dfinery-web-sdk";

async function DfineryLogin(): Promise<void> {
  // 유저 식별 정보 설정
  await Dfinery.setIdentity(DFIdentity.EXTERNAL_ID, "TestUserId");
  // 로그인 이벤트
  await Dfinery.logEvent(DFEvent.LOGIN);
}
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
`Dfinery.setIdentity` API를 기다리지 않고 Login을 실행할 경우 Identity를 설정한 유저의 Login이벤트로 측정 안 될 수 있으므로 반드시 await나 promise.then함수를 사용하여 Identity가 설정된 후 호출 되어야 합니다.
{% endhint %}

### 로그아웃

유저가 로그아웃하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
Dfinery.logEvent(DFEvent.LOGOUT);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent } from "@igaworks/dfinery-web-sdk";

void Dfinery.logEvent(DFEvent.LOGOUT);
```

{% endtab %}
{% endtabs %}

### 회원가입

유저가 회원으로 가입하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const properties = {};
properties[DFEventProperty.SIGN_CHANNEL] = "Kakao";
Dfinery.logEvent(DFEvent.SIGN_UP, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const properties: Record<string, unknown> = {};
properties[DFEventProperty.SIGN_CHANNEL] = "Kakao";
void Dfinery.logEvent(DFEvent.SIGN_UP, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                             | 타입     | 설명      | 필수 |
| ------------------------------ | ------ | ------- | -- |
| `DFEventProperty.SIGN_CHANNEL` | String | 회원가입 채널 | ✅  |

### 구매

유저가 상품이나 서비스를 구매하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 6;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;
properties[DFEventProperty.PAYMENT_METHOD] = "BankTransfer";
properties[DFEventProperty.ORDER_ID] = "Order-123";
properties[DFEventProperty.TOTAL_PURCHASE_AMOUNT] = 30000;
properties[DFEventProperty.DELIVERY_CHARGE] = 2500;
properties[DFEventProperty.DISCOUNT] = 3000;

Dfinery.logEvent(DFEvent.PURCHASE, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 6;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;
properties[DFEventProperty.PAYMENT_METHOD] = "BankTransfer";
properties[DFEventProperty.ORDER_ID] = "Order-123";
properties[DFEventProperty.TOTAL_PURCHASE_AMOUNT] = 30000;
properties[DFEventProperty.DELIVERY_CHARGE] = 2500;
properties[DFEventProperty.DISCOUNT] = 3000;

void Dfinery.logEvent(DFEvent.PURCHASE, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                                      | 타입     | 설명                      | 필수 |
| --------------------------------------- | ------ | ----------------------- | -- |
| `DFEventProperty.ITEMS`                 | Array  | [상품 속성](#item_property) | ✅  |
| `DFEventProperty.ORDER_ID`              | String | 주문 번호(ID)               | ✅  |
| `DFEventProperty.PAYMENT_METHOD`        | String | 결제 방법                   | ✅  |
| `DFEventProperty.TOTAL_PURCHASE_AMOUNT` | NUMBER | 주문 총액                   | ✅  |
| `DFEventProperty.DELIVERY_CHARGE`       | NUMBER | 배송료                     | ✅  |
| `DFEventProperty.DISCOUNT`              | NUMBER | 상품할인가                   | ✅  |

### 홈 화면 조회

유저가 앱의 홈 화면을 조회하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
Dfinery.logEvent(DFEvent.VIEW_HOME);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent } from "@igaworks/dfinery-web-sdk";

void Dfinery.logEvent(DFEvent.VIEW_HOME);
```

{% endtab %}
{% endtabs %}

### 상품 상세 보기

유저가 특정 상품의 상세 정보를 조회하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;
Dfinery.logEvent(DFEvent.VIEW_PRODUCT_DETAILS, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;
void Dfinery.logEvent(DFEvent.VIEW_PRODUCT_DETAILS, properties);
```

{% endtab %}
{% endtabs %}

### 장바구니 담기

유저가 상품을 장바구니에 담는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;
Dfinery.logEvent(DFEvent.ADD_TO_CART, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;
void Dfinery.logEvent(DFEvent.ADD_TO_CART, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                      | 타입    | 설명                      | 필수 |
| ----------------------- | ----- | ----------------------- | -- |
| `DFEventProperty.ITEMS` | Array | [상품 속성](#item_property) | ✅  |

### 관심 상품 추가

유저가 상품을 관심 목록에 추가하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;
Dfinery.logEvent(DFEvent.ADD_TO_WISHLIST, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;
void Dfinery.logEvent(DFEvent.ADD_TO_WISHLIST, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                      | 타입    | 설명                      | 필수 |
| ----------------------- | ----- | ----------------------- | -- |
| `DFEventProperty.ITEMS` | Array | [상품 속성](#item_property) | ✅  |

### 주문 취소하기

유저가 구매한 주문을 취소하고 환불하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;
properties[DFEventProperty.TOTAL_REFUND_AMOUNT] = 22500;
Dfinery.logEvent(DFEvent.REFUND, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;
properties[DFEventProperty.TOTAL_REFUND_AMOUNT] = 22500;
void Dfinery.logEvent(DFEvent.REFUND, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                                    | 타입     | 설명                      | 필수 |
| ------------------------------------- | ------ | ----------------------- | -- |
| `DFEventProperty.ITEMS`               | Array  | [상품 속성](#item_property) | ✅  |
| `DFEventProperty.TOTAL_REFUND_AMOUNT` | NUMBER | 환불 총액                   | ✅  |

### 상품 검색하기

유저가 상품을 검색하여 결과를 확인하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 16000;
item[DFEventProperty.ITEM_DISCOUNT] = 700;
item[DFEventProperty.ITEM_QUANTITY] = 10;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;
properties[DFEventProperty.KEYWORD] = "사또밥";

Dfinery.logEvent(DFEvent.VIEW_SEARCH_RESULT, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 16000;
item[DFEventProperty.ITEM_DISCOUNT] = 700;
item[DFEventProperty.ITEM_QUANTITY] = 10;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;
properties[DFEventProperty.KEYWORD] = "사또밥";

void Dfinery.logEvent(DFEvent.VIEW_SEARCH_RESULT, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                        | 타입     | 설명                      | 필수 |
| ------------------------- | ------ | ----------------------- | -- |
| `DFEventProperty.ITEMS`   | Array  | [상품 속성](#item_property) | ✅  |
| `DFEventProperty.KEYWORD` | String | 검색 키워드                  | ✅  |

### 상품 공유하기

유저가 상품을 공유하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;
properties[DFEventProperty.SHARING_CHANNEL] = "Facebook";

Dfinery.logEvent(DFEvent.SHARE_PRODUCT, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;
properties[DFEventProperty.SHARING_CHANNEL] = "Facebook";

void Dfinery.logEvent(DFEvent.SHARE_PRODUCT, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                                | 타입     | 설명                      | 필수 |
| --------------------------------- | ------ | ----------------------- | -- |
| `DFEventProperty.ITEMS`           | Array  | [상품 속성](#item_property) | ✅  |
| `DFEventProperty.SHARING_CHANNEL` | String | 상품 공유 채널                | ✅  |

### 상품 목록 조회

유저가 상품 목록을 조회하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;

Dfinery.logEvent(DFEvent.VIEW_LIST, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;

void Dfinery.logEvent(DFEvent.VIEW_LIST, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                      | 타입    | 설명                      | 필수 |
| ----------------------- | ----- | ----------------------- | -- |
| `DFEventProperty.ITEMS` | Array | [상품 속성](#item_property) | ✅  |

### 장바구니 조회

유저가 장바구니를 조회하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);
//itemList.push(item2); 아이템이 2개 이상인경우 추가로 입력

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;

Dfinery.logEvent(DFEvent.VIEW_CART, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];
// itemList.push(item2); 아이템이 2개 이상인경우 추가로 입력

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;

void Dfinery.logEvent(DFEvent.VIEW_CART, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                      | 타입    | 설명                      | 필수 |
| ----------------------- | ----- | ----------------------- | -- |
| `DFEventProperty.ITEMS` | Array | [상품 속성](#item_property) | ✅  |

### 구매 정보 입력

유저가 구매 정보를 입력하는 동작을 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const properties = {};
properties["key"] = "value"; //사용자 정의 속성 값(Optional)
Dfinery.logEvent(DFEvent.ADD_PAYMENT_INFO, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent } from "@igaworks/dfinery-web-sdk";

const properties: Record<string, unknown> = {};
properties["key"] = "value"; //사용자 정의 속성 값(Optional)
void Dfinery.logEvent(DFEvent.ADD_PAYMENT_INFO, properties);
```

{% endtab %}
{% endtabs %}

### 장바구니 삭제

유저가 장바구니에 담긴 상품을 제거하는 나타내는 이벤트입니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const item = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [];
itemList.push(item);

const properties = {};
properties[DFEventProperty.ITEMS] = itemList;
Dfinery.logEvent(DFEvent.REMOVE_CART, properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent, DFEventProperty } from "@igaworks/dfinery-web-sdk";

const item: Record<string, unknown> = {};
item[DFEventProperty.ITEM_ID] = "상품번호";
item[DFEventProperty.ITEM_NAME] = "상품이름";
item[DFEventProperty.ITEM_PRICE] = 5000;
item[DFEventProperty.ITEM_DISCOUNT] = 500;
item[DFEventProperty.ITEM_QUANTITY] = 5;
item[DFEventProperty.ITEM_CATEGORY1] = "식품";
item[DFEventProperty.ITEM_CATEGORY2] = "과자";

const itemList = [item];

const properties: Record<string, unknown> = {};
properties[DFEventProperty.ITEMS] = itemList;
void Dfinery.logEvent(DFEvent.REMOVE_CART, properties);
```

{% endtab %}
{% endtabs %}

#### 표준 이벤트 속성

| 이름                      | 타입    | 설명                      | 필수 |
| ----------------------- | ----- | ----------------------- | -- |
| `DFEventProperty.ITEMS` | Array | [상품 속성](#item_property) | ✅  |

## 커스텀 이벤트

사용자가 직접 임의의 이벤트 명칭과 속성을 입력하여 반영하는 이벤트입니다. 표준 이벤트에도 디파이너리 콘솔에서 커스텀 속성을 추가하여 사용할 수 있습니다.

**속성이 없을 경우**

{% tabs %}
{% tab title="JavaScript" %}

```javascript
Dfinery.logEvent("CUSTOM_EVENT_NAME", null);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery from "@igaworks/dfinery-web-sdk";

void Dfinery.logEvent("CUSTOM_EVENT_NAME", null);
```

{% endtab %}
{% endtabs %}

**속성이 있을 경우**

{% tabs %}
{% tab title="JavaScript" %}

```javascript
const properties = {};
properties["CUSTOM_PROPERTY_KEY"] = "CUSTOM_PROPERTY_VALUE"; //사용자 정의 속성 값(Optional)
Dfinery.logEvent("CUSTOM_EVENT_NAME", properties);
```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery from "@igaworks/dfinery-web-sdk";

const properties: Record<string, unknown> = {};
properties["CUSTOM_PROPERTY_KEY"] = "CUSTOM_PROPERTY_VALUE"; //사용자 정의 속성 값(Optional)
void Dfinery.logEvent("CUSTOM_EVENT_NAME", properties);
```

{% endtab %}
{% endtabs %}

## 날짜 및 시간 형식 속성 입력하기 <a href="#datetime_property" id="datetime_property"></a>

날짜 형식은 `yyyy-MM-dd` 포맷의 문자열 형태로 입력해야합니다. 날짜 및 시간 형식은 `yyyy-MM-dd'T'HH:mm:ss.SSS'Z'` 포맷의 문자열 형태나 Date 객체로 입력해야합니다. DFINERY 콘솔에서 property에 설정한 형식에 맞춰 입력해야합니다.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
// 날짜와 시간  
const currentDate = new Date(); //Date 객체
const currentDateISOString = currentDate.toISOString(); //UTC 기준 ISO 8601 형식

// 날짜
const currentDateFormatString = '2025-01-01' // 'yyyy-MM-dd' 형식

// 커스텀 속성 객체 생성
const properties = {};
properties["CUSTOM_PROPERTY_DATE_OBJECT"] = currentDate; 
properties["CUSTOM_PROPERTY_DATE_ISO_STRING"] = currentDateISOString; 
properties["CUSTOM_PROPERTY_DATE_FORMAT_STRING"] = currentDateFormatString; 

// Dfinery 이벤트 로깅 예제 
Dfinery.logEvent(DFEvent.SIGN_UP, properties);

```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
import Dfinery, { DFEvent } from "@igaworks/dfinery-web-sdk";

// 날짜와 시간
const currentDate = new Date(); //Date 객체
const currentDateISOString = currentDate.toISOString(); //UTC 기준 ISO 8601 형식

// 날짜
const currentDateFormatString = "2025-01-01"; // 'yyyy-MM-dd' 형식

// 커스텀 속성 객체 생성
const properties: Record<string, unknown> = {};
properties["CUSTOM_PROPERTY_DATE_OBJECT"] = currentDate;
properties["CUSTOM_PROPERTY_DATE_ISO_STRING"] = currentDateISOString;
properties["CUSTOM_PROPERTY_DATE_FORMAT_STRING"] = currentDateFormatString;

// Dfinery 이벤트 로깅 예제
void Dfinery.logEvent(DFEvent.SIGN_UP, properties);
```

{% endtab %}
{% endtabs %}

## 자동으로 수집되는 데이터

DFINERY SDK는 다음의 정보에 대해서 자동으로 수집합니다.

> 해당 값은 브라우저의 환경 및 종류에 따라 수집되지 않을 수 있습니다.

* 브라우저
* 브라우저의 버젼
* OS
* 설정된 언어
* 설정된 Time Zone Offset
* Url
* Referer
* utm 파라미터