# Event tracking

Learn how Croct collects storefront analytics and respects visitor consent.

Once the [provider](/reference/sdk/hydrogen/api/components/croct-provider) is in place inside Shopify's [`<Analytics.Provider>`](https://shopify.dev/docs/api/hydrogen/latest/components/analytics/analytics-provider), the SDK automatically forwards your storefront's analytics events to Croct. No manual instrumentation is required for the standard storefront events.

## Automatic events

The bundled analytics bridge subscribes to Shopify's storefront analytics and forwards each event to Croct, mapping it to the corresponding Croct event:

- Product views map to the [product viewed event](/reference/event/types/ecommerce/product-viewed).
- Cart views map to the [cart viewed event](/reference/event/types/ecommerce/cart-viewed).
- Cart updates map to the [cart modified event](/reference/event/types/ecommerce/cart-modified).
- Collection and search views map to the [interest shown event](/reference/event/types/engagement/interest-shown).

These fire automatically as Hydrogen publishes the corresponding analytics events, so adding Shopify's standard analytics components to your storefront is all it takes.

## Consent

By default, automatic tracking follows Shopify's [Customer Privacy](https://shopify.dev/docs/api/customer-privacy) consent. The provider's [tracking option](/reference/sdk/hydrogen/api/components/croct-provider#track-prop) controls this behavior, and you can also set it through an [environment variable](/reference/sdk/hydrogen/api/environment-variables).

> **Consent-aware by default**
>
> With the default `auto` mode, the SDK never tracks a visitor until Shopify's Customer Privacy API reports that tracking is allowed, so your storefront stays compliant out of the box.

To opt out of the consent alignment, set the [tracking option](/reference/sdk/hydrogen/api/components/croct-provider#track-prop) to `always`, typically through the [environment variable](/reference/sdk/hydrogen/api/environment-variables):

**.env**

```bash
PUBLIC_CROCT_TRACK=always
```

## Custom events

For events beyond the standard storefront set, use the [hook that exposes the SDK instance](/reference/sdk/hydrogen/api/hooks/use-croct) to [track custom events](/reference/sdk/javascript/api/plug/track):

**JavaScript**

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

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

  const handleSubscribe = () => croct.track('goalCompleted', {goalId: 'newsletter-signup'});

  return <button onClick={handleSubscribe}>Subscribe</button>;
}
```

**TypeScript**

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

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

  const handleSubscribe = () => croct.track('goalCompleted', {goalId: 'newsletter-signup'});

  return <button onClick={handleSubscribe}>Subscribe</button>;
}
```

For the list of standard events you can track, see the [recommended events](/reference/sdk/javascript/event-tracking#recommended-events) reference.

## Explore

- [CroctProvider](api/components/croct-provider): Explore the provider and its consent-related options.
- [Data collection](data-collection): Learn how to identify visitors and enrich their profiles.