# Event tracking
Learn how to track events for analysis and personalization.
Events track user interactions with your application, such as button clicks, content views, purchases, and more. They feed the personalization engine and help you measure how users interact with your application and track conversions.
The following sections provide examples of how you can use the JavaScript SDK to track these events in your application
## Basic usage
To track an event, you need to call the [`track`](api/plug/track) method of the SDK.
This method takes two parameters, the event name and the event properties, as shown in the following example:
**Tracking events**
**JavaScript**
```js
import croct from '@croct/plug';
async function onCheckoutCompleted() {
croct.track('goalCompleted', {
goalId: 'paymentApproved',
});
}
const button = document.getElementById('checkout-button');
button.addEventListener('click', onCheckoutCompleted);
```
**TypeScript**
```ts
import croct from '@croct/plug';
async function onCheckoutCompleted(): void {
croct.track('goalCompleted', {
goalId: 'paymentApproved',
});
}
const button = document.getElementById('checkout-button');
button.addEventListener('click', onCheckoutCompleted);
```
**HTML**
```html
My awesome application
```
For a list of all available events, see the [Events reference](/reference/event/overview#event-types).
## Recommended events
Tracking events can unlock valuable features in the platform, like measuring conversion rates. Although optional, it's recommended to track certain events in your application for better results.
The following sections describe some recommended events and why they are important.
### Goal completion
Perhaps the most important event to track is the completion of a goal. It's the event that allows you to measure conversion rates and other metrics.
To track goal completion, you need to call the [`track`](/reference/sdk/javascript/api/plug/track) method with the [`goalCompleted`](/reference/event/types/engagement/goal-completed) event name whenever a user completes a goal that is relevant to your business.
For example, if you have a newsletter subscription form, you might want to track when a user subscribes to your newsletter:
```js
croct.track('goalCompleted', {
goalId: 'newsletter-subscription',
});
```
For more information, see the [Goal completed](/reference/event/types/engagement/goal-completed) event reference.
### User signup
Tracking user signups allows you to link an identifier to a user profile, enabling you to recognize users across devices and sessions.
To track user signup, you need to call the track method with the [`userSignedUp`](/reference/event/types/user-account/user-signed-up) event name, passing the user identifier and any other relevant information:
```js
croct.track('userSignedUp', {
userId: '123',
profile: {
firstName: 'John',
lastName: 'Doe',
email: 'john@example.com',
}
});
```
For more information, see the [User signed up](/reference/event/types/user-account/user-signed-up) event reference.
### Order confirmation
If you have an e-commerce or subscription service, tracking orders allows you monitor revenue and other important metrics.
To track orders, you need to call the [`track`](/reference/sdk/javascript/api/plug/track) method with the [`orderPlaced`](/reference/event/types/ecommerce/order-placed) event name, passing the details of the order:
```js
croct.track('orderPlaced', {
order: {
orderId: '6ZT6J',
currency: 'USD',
total: 776.49,
items: [
{
index: 0,
total: 699.00,
quantity: 1,
product: {
productId: 'U42P8',
name: 'Smartphone 9',
displayPrice: 699.00
}
},
{
index: 1,
total: 77.49,
quantity: 1,
product: {
productId: 'A2B4C',
name: 'Smartphone 9 case',
displayPrice: 77.49
}
}
]
}
});
```
For more information, see the [Order placed](/reference/event/types/ecommerce/order-placed) event reference.
### Cart interactions
If you have an e-commerce application, tracking shopping cart interactions allows you to create user segments based on their cart contents and checkout stage. For more information on how to use this information, see the [Shopping variables](/reference/cql/context#shopping) reference.
There are three events that you can track to monitor shopping cart interactions: [`cartViewed`](/reference/event/types/ecommerce/cart-viewed), [`cartModified`](/reference/event/types/ecommerce/cart-modified), and [`checkoutStarted`](/reference/event/types/ecommerce/checkout-started). They all take a [`cart`](/reference/event/types/ecommerce/cart-modified#cart-prop) property that describes the contents of the shopping cart.
#### Cart viewed
This event tracks the contents of the shopping cart whenever a user views it.
Here is an example of how to track this event:
```js
croct.track('cartViewed', {
cart: {
currency: 'USD',
total: 699.00,
items: [
{
index: 0,
total: 699.00,
quantity: 1,
product: {
productId: 'U42P8',
name: 'Smartphone 9',
displayPrice: 699.00
}
}
]
}
});
```
For more information, see the [Cart viewed](/reference/event/types/ecommerce/cart-viewed) event reference.
#### Cart modified
The [`cartModified`](/reference/event/types/ecommerce/cart-modified) event tracks changes made to the shopping cart, such as adding items, applying coupons, or changing quantities.
Building upon the previous example, if the user adds a phone case to the shopping cart that already includes a smartphone, you can track the following event:
```js
croct.track('cartModified', {
cart: {
currency: 'USD',
total: 776.49,
items: [
{
index: 0,
total: 699.00,
quantity: 1,
product: {
productId: 'U42P8',
name: 'Smartphone 9',
displayPrice: 699.00
}
},
{
index: 1,
total: 77.49,
quantity: 1,
product: {
productId: 'A2B4C',
name: 'Smartphone 9 case',
displayPrice: 77.49
}
}
]
}
});
```
Note that you do not need to track the exact changes made to the shopping cart, such as adding or removing items, changing quantities, etc. All you need to do is provide the current state and we will automatically update the context accordingly.
For more information, see the [Cart modified](/reference/event/types/ecommerce/cart-modified) event reference.
#### Checkout started
The [`checkoutStarted`](/reference/event/types/ecommerce/checkout-started) event tracks when a user starts the checkout process, usually by clicking on the button that takes them to the checkout page.
Here is an example of how to track this event:
```js
croct.track('checkoutStarted', {
cart: {
currency: 'USD',
total: 776.49,
items: [
{
index: 0,
total: 699.00,
quantity: 1,
product: {
productId: 'U42P8',
name: 'Smartphone 9',
displayPrice: 699.00
}
},
{
index: 1,
total: 77.49,
quantity: 1,
product: {
productId: 'A2B4C',
name: 'Smartphone 9 case',
displayPrice: 77.49
}
}
]
}
});
```
For more information, see the [Checkout started](/reference/event/types/ecommerce/checkout-started) event reference.
## Explore
- [Event reference](/reference/event/overview): Learn more about the available events and their properties.
- [Track reference](api/plug/track): Explore the track method and the available options.