# Session attributes changed

Learn how to track changes to session attributes.

This event tracks changes to session attributes.

> **Automatically tracked**
>
> We track this event for you, so no action is needed on your side.

## Implementation

Here is an example of how to track this event:

**JavaScript**

```javascript
import croct from '@croct/plug';

const patch = croct.session.edit();

const promise = patch
  .set('selectedPlan', 'Premium')
  .save();
```

**HTML**

```html
<!DOCTYPE html>
<html>
<head>
  <title>My awesome application</title>
  <script src="https://cdn.croct.io/js/v1/lib/plug.js"></script>
  <script>croct.plug({appId: 'APPLICATION_ID'});</script>
</head>
<body>
  <script>
  function updateSession() {
    croct.session.edit();
      .set('selectedPlan', 'Premium')
      .save();
    }
  </script>
  <button onclick="updateSession()">Trigger</button>
</body>
</html>
```

**React — JavaScript**

```jsx
import {useCroct} from '@croct/plug-react';

export function PlanCard({plan, price}) {
const croct = useCroct();

const onSelect = () => {
  croct.session.edit()
    .set('selectedPlan', plan)
    .save();
};

return (
  <div>
    <strong>{plan}</strong>
    <p>${price}</p>
    <button onClick={onSelect}>Select</button>
  </div>
);
}
```

**React — TypeScript**

```typescript
import type {ReactElement} from 'react';
import {useCroct} from '@croct/plug-react';

type PlanCardProps = {
plan: string,
price: number,
}

export function PlanCard({plan, price}: PlanCardProps): ReactElement {
const croct = useCroct();

const onSelect = (): void => {
  croct.session.edit()
    .set('selectedPlan', plan)
    .save();
};

return (
  <div>
    <strong>{plan}</strong>
    <p>${price}</p>
    <button onClick={onSelect}>Select</button>
  </div>
);
}
```

**Next — JavaScript**

```jsx
import {useCroct} from '@croct/plug-next';

export function PlanCard({plan, price}) {
const croct = useCroct();

const onSelect = () => {
  croct.session.edit()
    .set('selectedPlan', plan)
    .save();
};

return (
  <div>
    <strong>{plan}</strong>
    <p>${price}</p>
    <button onClick={onSelect}>Select</button>
  </div>
);
}
```

**Next — TypeScript**

```tsx
import type {ReactElement} from 'react';
import {useCroct} from '@croct/plug-next';

type PlanCardProps = {
plan: string,
price: number,
}

export function PlanCard({plan, price}: PlanCardProps): ReactElement {
const croct = useCroct();

const onSelect = (): void => {
  croct.session.edit()
    .set('selectedPlan', plan)
    .save();
};

return (
  <div>
    <strong>{plan}</strong>
    <p>${price}</p>
    <button onClick={onSelect}>Select</button>
  </div>
);
}
```

**Vue — JavaScript**

```vue
import {useCroct} from '@croct/plug-vue';

const croct = useCroct();

const onSelect = (): void => {
croct.session.edit()
  .set('selectedPlan', plan)
  .save();
};
```

**Vue — TypeScript**

```vue
<script setup lang="ts">
import {useCroct} from '@croct/plug-vue';

const croct = useCroct();

const onSelect = (): void => {
  croct.session.edit()
    .set('selectedPlan', plan)
    .save();
};
</script>
```

**Nuxt — JavaScript**

```vue
const croct = useCroct();

const onSelect = (): void => {
croct.session.edit()
  .set('selectedPlan', plan)
  .save();
};
```

**Nuxt — TypeScript**

```vue
<script setup lang="ts">
const croct = useCroct();

const onSelect = (): void => {
  croct.session.edit()
    .set('selectedPlan', plan)
    .save();
};
</script>
```

## Input properties

This event has no input properties.

## Processed properties

These properties are automatically tracked:

- `patch`: `object`

  A set of operations performed on the session attributes.

## Payload examples

Below are some payload examples for this event:

**Processed payload**

```json
{
  "type": "sessionAttributesChanged",
  "patch": {
    "operations": [
      {
        "type": "set",
        "path": "selectedPlan",
        "value": "Premium"
      }
    ]
  }
}
```

## Explore

- [Analytics](/reference/analytics): Learn how to analyze your dashboards.
- [CQL](/explanation/audience/examples/session-activity): Learn how to create audiences based on the session details.
