# Data collection

Learn how to collect information for personalization.

This guide provides practical examples of using the React SDK to enrich user profiles and sessions with information relevant to your business.

## User data

You can persist user-related information in one of the two ways described below depending on whether it is related to the user's profile or their current session.

### Profile data

You can enrich user profiles with details collected via forms, surveys, or other means.

These pieces of information, called *attributes*, are categorized as *standard* or *custom* depending on whether it is generic or specific to your organization.

#### Standard attributes

These are [predefined attributes](/reference/user/standard-attributes) that are common most businesses, such as the user's name, email, and interests.

You can set standard attributes using the [`user.edit`](/reference/sdk/javascript/api/user/edit) method. For example, let's say you have a newsletter subscription form, and you want to add the email address to the user profile on Croct.

This is what it would look like:

**Updating user profiles**

**JavaScript**

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

export function NewsletterForm() {
const croct = useCroct();
const subscribe = event => {
  const form = new FormData(event.currentTarget);
  const email = form.get('email');

  // Your logic to persist the email
  api.subscribe(email);

  croct.user.edit()
    .set('email', email)
    .save();
};

return (
  <form onSubmit={subscribe}>
    📫 Subscribe to our newsletter!
    <input type="email" placeholder="Email"/>
    <button type="submit">Subscribe</button>
  </form>
);
}
```

**TypeScript**

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

export function NewsletterForm(): ReactElement {
const croct = useCroct();
const subscribe = (event: FormEvent<HTMLFormElement>): void => {
  const form = new FormData(event.currentTarget);
  const email = String(form.get('email'));

  // Your logic to persist the email
  api.subscribe(email);

  croct.user.edit()
    .set('email', email)
    .save();
};

return (
  <form onSubmit={subscribe}>
    📫 Subscribe to our newsletter!
    <input type="email" placeholder="Email"/>
    <button type="submit">Subscribe</button>
  </form>
);
}
```

The [`user.edit`](/reference/sdk/javascript/api/user/edit) method returns a [`Patch`](/reference/sdk/javascript/api/patch) instance that allows you to chain multiple operations together.

You could alternatively write:

```tsx
const patch = croct.user.edit();
patch.set('email', email);

await patch.save();
```

When you call [`save`](/reference/sdk/javascript/api/patch/save), it saves changes to the user profile and returns a promise that confirms the operation.

You can then access standard attributes in your queries using the [`user`](/reference/cql/context#user) variable:

```cql
user's email ends with "@croct.com"
```

For a complete list of attributes, see [User profile reference](/reference/cql/data-types/user/user).

#### Custom attributes

In addition to the standard attributes, you can add [custom attributes](/reference/user/custom-attributes) to enrich user profiles with information relevant to your business.

For example, let's say you have a SaaS application and you want to ask your users about their area of expertise so you can personalize the onboarding experience.

This is what it would look like:

**JavaScript**

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

export function ExpertiseSelector() {
const croct = useCroct();

const onChange = event => {
  croct.user.edit()
    .set('custom.expertise', event.target.value)
    .save();
};

return (
  <select onChange={onChange}>
    <option value="Engineering">Engineering</option>
    <option value="Design">Design</option>
    <option value="Marketing">Marketing</option>
  </select>
);
}
```

**TypeScript**

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

export function ExpertiseSelector(): ReactElement {
const croct = useCroct();

const onChange = (event: ChangeEvent<HTMLSelectElement>): void => {
  croct.user.edit()
    .set('custom.expertise', event.target.value)
    .save();
};

return (
  <select onChange={onChange}>
    <option value="Engineering">Engineering</option>
    <option value="Design">Design</option>
    <option value="Marketing">Marketing</option>
  </select>
);
}
```

Note that custom attributes are prefixed with `custom` to avoid conflicts with standard attributes. However, you do not need to include the prefix in your queries:

```cql
user's expertise is "Engineering"
```

### Session data

Besides user profiles, you can also store information relevant to the user's current session.

Storing session information can help you keep track of important the user's current session that may not be relevant to their profile. For example, you can store the plan the user selected on the pricing page, or any other information you want to record during the user's visit.

To store session information, use the [`session.edit`](/reference/sdk/javascript/api/session/edit) method:

**Saving session data**

**JavaScript**

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

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

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

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

**TypeScript**

```tsx
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('plan', plan)
    .save();
};

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

In the same way as with user profiles, the [`session.edit`](/reference/sdk/javascript/api/session/edit) method returns a [`Patch`](/reference/sdk/javascript/api/patch) instance that allows you to chain multiple operations together.

```tsx
const patch = croct.session.edit();
patch.set('plan', plan);

await patch.save();
```

When you call [`save`](/reference/sdk/javascript/api/patch/save), it saves changes to the session and returns a promise that confirms the operation. You can then access session information in your queries using the [`session`](/reference/cql/context#session) variable:

```cql
session's plan is "premium"
```

For a complete list of attributes, see [Session reference](/reference/cql/data-types/session/web-session).

## User identity

By default, all users are considered anonymous. However, if your application has logged-in areas, you may want to link the Croct user profile with your application's user ID. This allows you to personalize the user experience consistently across devices and sessions.

To associate a user profile with an identifier, use the [`identify`](/reference/sdk/javascript/api/plug/identify) method:

**Identifying users**

**JavaScript**

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

export function LoginForm() {
const croct = useCroct();

const login = async event => {
  const form = new FormData(event.currentTarget);
  const email = form.get('email');
  const password = form.get('password');

  // Your logic to authenticate the user
  const userId = await auth.login(email, password);

  if (userId !== null) {
      croct.identify(userId);
  }
};

return (
  <form onSubmit={login}>
    <input type="email" placeholder="Email"/>
    <input type="password" placeholder="Password"/>
    <button type="submit">Login</button>
  </form>
);
}
```

**TypeScript**

```tsx
import type {FormEvent, ReactElement} from 'react';
import auth from '@/services/auth';
import {useCroct} from '@croct/plug-react';

export function LoginForm(): ReactElement {
const croct = useCroct();

const login = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
  const form = new FormData(event.currentTarget);
  const email = String(form.get('email'));
  const password = String(form.get('password'));

  // Your logic to authenticate the user
  const userId = await auth.login(email, password);

  if (userId !== null) {
    croct.identify(userId);
  }
};

return (
  <form onSubmit={login}>
    <input type="email" placeholder="Email"/>
    <input type="password" placeholder="Password"/>
    <button type="submit">Login</button>
  </form>
);
}
```

You usually call `identify` when the user logs in or registers. Similarly, you can call [`anonymize`](/reference/sdk/javascript/api/plug/anonymize) when the user logs out:

**Logging out users**

**JavaScript**

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

export function LogoutButton() {
const croct = useCroct();

const logout = () => {
  // Your logic to logout the user
  auth.logout();
  croct.anonymize();
};

return (<button onClick={logout}>Logout</button>);
}
```

**TypeScript**

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

export function LogoutButton(): ReactElement {
const croct = useCroct();

const logout = (): void => {
  // Your logic to logout the user
  auth.logout();
  croct.anonymize();
};

return (<button onClick={logout}>Logout</button>);
}
```

If your application keeps the user logged in between sessions, you should specify the user's identifier during the initialization of the SDK:

**JavaScript**

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

export default function App({userId}) {
  return (
    <CroctProvider appId="APPLICATION_ID" userId={userId}>
      <div>
        <h1>My first personalized app 🚀</h1>
      </div>
    </CroctProvider>
  );
}
```

**TypeScript**

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

type AppProps = {
  userId: string|null,
}

export default function App({userId}: AppProps): ReactElement {
  return (
    <CroctProvider appId="APPLICATION_ID" userId={userId}>
      <div>
        <h1>My first personalized app 🚀</h1>
      </div>
    </CroctProvider>
  );
}
```

This will prevent the SDK from sending anonymous events before you call [`identify`](/reference/sdk/javascript/api/plug/identify) or [`anonymize`](/reference/sdk/javascript/api/plug/anonymize) resulting in two sessions — one anonymous and one identified. For more information, see the [`userId`](/reference/sdk/javascript/api/plug/plug#configuration-userid-prop) documentation.

## Explore

- [Audiences](/explanation/audience): Understand how to delivery content to specific groups of users.
- [CQL](/reference/cql/syntax): Get the basics on how to write conditions to define audiences.