# Event Tracking

The Hackle SDK provides the ability to send user events to Hackle. By using this feature at every point where a user action occurs, you can collect meaningful data about user behavior and use it for user behavior analysis.

## track

You can send user events by passing the **Event Key** to the `track()` method.

<table><thead><tr><th width="150">Parameter</th><th width="120">Type</th><th width="110">Required</th><th>Constraints</th></tr></thead><tbody><tr><td>Event name (key)</td><td><code>string</code></td><td>Required</td><td><ul><li>Character limit is 128 characters.</li></ul></td></tr></tbody></table>

#### Example

Assume an event key called `purchase` is defined to collect an event when the user clicks the "Buy" button.

```jsx
import { useTrack } from '@hackle/react-sdk';

function PurchaseButton() {
  const track = useTrack();

  const handleClick = () => {
    track({ key: "purchase" });
  };

  return <button onClick={handleClick}>구매하기</button>;
}
```

### Property

The Hackle SDK supports adding properties to Event objects.

* Properties must be sent as key-value pairs (Property Key and Property Value).
* The maximum number of properties that can be added to an event object is 64.

<table><thead><tr><th width="133.04296875">Category</th><th width="127.60546875">Type</th><th>Constraints</th></tr></thead><tbody><tr><td>Property Key</td><td><code>string</code></td><td><ul><li>Character limit is 128 characters.</li><li>Case-insensitive.</li><li>For example, AGE and age are recognized as the same Property Key.</li></ul></td></tr><tr><td>Property Value</td><td><code>boolean</code>, <code>string</code>, <code>number</code>, <code>array</code></td><td><ul><li>For string type, the character limit is 1024 characters.</li><li>String type is case-sensitive.</li><li>For example, APPLE and apple are recognized as different Property Values.</li><li>For number type, up to 15 integer digits and up to 6 decimal places are supported.</li></ul></td></tr></tbody></table>

#### Example

In the example below, three properties (`pay_method`, `discount_amount`, `is_discount`) are added.

```jsx
import { useTrack } from '@hackle/react-sdk';

function PurchaseButton() {
  const track = useTrack();

  const handleClick = () => {
    track({
      key: "purchase",
      properties: {
        pay_method: "CARD",
        discount_amount: 800,
        is_discount: true
      }
    });
  };

  return <button onClick={handleClick}>구매하기</button>;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/en/development-guide/react/event-tracking.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.