Hackle SDK provides the ability to track and send user events to Hackle.
Data on user events is necessary for measuring the results of the experiment based on the metrics initially set for meaningful user behavior analysis.

track

User events can be tracked and sent by passing the event key to the track() method. In cases where you would also like to know the value, you can put a numeric value in value and send it together as user events.

• the value can only be in the form of numerical values.

Example

Suppose you have defined an event key called 'purchase' to collect an event when the user presses the purchase button. You may also want to simultaneously collect the exact purchase amount as well. In this case, you can receive the purchase amount together with value.

/* Example 1: Send only the event key */
const track = useTrack()
const event = { key: "purchase" }

<Button onClick={() => track(event)}>Purchase</Button>

/* Example 2: Send the event key and numeric value together */
const track = useTrack()
const event = {
  key: "purchase",
  value: 13200
}

<Button onClick={() => track(event)}>Purchase</Button>

From the above examples, example 1 is showing a case where only the event key is being sent for the purchase action, while example 2 shows a case where both the purchase event key and the purchase amount is being collected by putting in the 'value' to collect information on the exact purchase amount.

Property

Hackle SDK supports adding properties to event objects.

• Properties must be sent as a pair with a key and value.
• The key must be of string type.
• The value must be boolean, string, or number type.

Refer to the example code and add the desired properties.

Example

In the example below, you will be able to see that three properties (pay_method, discount_amount, is_discount) have been added.

const track = useTrack()
const event = {
  key: "purchase",
  value: 13200,
  properties: {
    pay_method: "CARD",
    discount_amount: 800,
    is_discount: true
  }
}

<Button onClick={() => track(event)}>Purchase</Button>