# Consent Management in JavaScript SDK


This guide explains the consent management functionality and the various consent tracking approaches supported by the JavaScript SDK.

## Overview

The JavaScript SDK supports RudderStack's [consent management]({{< ref "data-governance/consent-management/" >}}) functionality and lets you manage data sent to downstream destinations based on user consent. This feature is crucial for respecting user privacy preferences and complying with data protection regulations.

With this functionality, you can:

- Seamlessly integrate with popular consent management providers like [OneTrust]({{< ref "data-governance/consent-management/onetrust/javascript.md" >}}), [Ketch]({{< ref "data-governance/consent-management/ketch.md" >}}), and [iubenda]({{< ref "data-governance/consent-management/iubenda.md" >}}). You can also set up a [custom consent management provider]({{< ref "data-governance/consent-management/custom-consent-manager/_index.md" >}}).
- Configure consent settings for multiple providers for your web source.
- Unlock advanced use cases like [pre-consent user tracking](#pre-consent-user-tracking) where you can track user activity and control the SDK's behavior before and after the user provides their consent.

See [Consent filtering requirements]({{< ref "data-governance/consent-management/overview.md#consent-filtering-requirements" >}}) for more information on the consent filtering settings at destination and event payload levels.

## Consent management approaches

There are two primary approaches to implementing consent management with the RudderStack JavaScript SDK:

### Post-consent user tracking

Post-consent user tracking is the most common implementation where you load the JavaScript SDK only after the user has provided consent. This approach is straightforward but has limitations:

- It ensures that no tracking occurs before consent is given
- You cannot control SDK behavior before consent is provided
- It may result in loss of some initial user activity data

See the [OneTrust post-consent user tracking setup]({{< ref "data-governance/consent-management/onetrust/javascript.md#post-consent-user-tracking" >}}) for a sample implementation.

### Pre-consent user tracking

Pre-consent user tracking allows you to track some user activity and control SDK behavior both [before](#the-preconsent-object) and [after](#consent-api) the user provides consent. This approach offers more flexibility because of the following reasons:

- It minimizes data loss related to attribution, acquisition, and the overall user journey
- You can choose to track users as fully anonymous, track only their sessions, or track only with `anonymousId` identifier
- It allows for a more nuanced approach to data collection based on consent status
- There is no particular restriction on the loading order of the SDKs

See the [OneTrust pre-consent user tracking setup]({{< ref "data-governance/consent-management/onetrust/javascript.md#pre-consent-user-tracking" >}}) for a sample implementation.

{{< info >}}
The presence of consent management object in the event's context (`context.consentManagement`) helps you differentiate between the pre- and post-consent events.

RudderStack does not add any other extra property to differentiate these events.
{{< /info >}}

## Key components of pre-consent user tracking

This section explains the key components of pre-consent user tracking in the JavaScript SDK.

### The `preConsent` object

You can use the `preConsent` object while loading the JavaScript SDK to define the SDK's [cookie storage](#cookie-storage-strategy) and [events delivery behavior](#events-delivery-strategy) in pre-consent mode.

1. Pass the consent management platform's information in the `consentManagement` object as a `load` API option.
2. Add the `preConsent` object, as shown:

```javascript
rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  consentManagement: {
    enabled: true,
    provider: "oneTrust" / "ketch" / "iubenda" / "custom"
  },
  preConsent: {
    enabled: true, // false by default
    storage: { // Optional
      strategy: "none" / "session" / "anonymousId", // Default is "none"
    },
    events: { // Optional
      delivery: "immediate" / "buffer", // Default is "immediate"
    },
  },
  ...
  // Other load options
});
```

{{< info >}}
If you set `preConsent.enabled` to `true`, the JavaScript SDK does **not** load the device mode integrations.
{{< /info >}}

#### Cookie storage strategy

The SDK stores information in the pre-consent mode based on the following cookie storage strategies:

| Value | <div style="width:350px">Description</div> |
| :----| :----|
| `none` | Fully anonymous tracking where RudderStack does not store any cookies.  <br /><br />For this value, note that:<br /><br /><ul><li>Each event contains a new `anonymousId`.</li><li>If [automatic session tracking]({{< ref "sources/event-streams/sdks/session-tracking/_index.md#automatic-session-tracking" >}}) is enabled, each event will contain a new `sessionId`.</li><li>The SDK does not persist any data from the previous API calls, that is, `userId`, `groupId`, `traits`, etc. are not included in the future events.</li></ul> |
| `session` | Fully anonymous tracking where RudderStack stores only the session tracking cookie ([manual]({{< ref "sources/event-streams/sdks/session-tracking/manual-session-tracking.md" >}}) or [automatic]({{< ref "sources/event-streams/sdks/session-tracking/_index.md#automatic-session-tracking" >}})), if it is active. <br /><br />For this value, note that:<br /><br /><ul><li>Each event contains a new `anonymousId`.</li><li>The SDK does not persist any data from the previous API calls, that is, `userId`, `groupId`, `traits`, etc. are not included in the future events.</li></ul> |
| `anonymousId` | RudderStack persists only the anonymous ID (`anonymousId`). <br /><br />For this value, note that:<br /><br /><ul><li>If [automatic session tracking]({{< ref "sources/event-streams/sdks/session-tracking/_index.md#automatic-session-tracking" >}}) is enabled, each event will contain a new `sessionId`.</li><li>The SDK does not persist any data from the previous API calls, that is, `userId`, `groupId`, `traits`, etc. are not included in the future events.</li></ul> |

#### Events delivery strategy

{{< info >}}
As the SDK does not load any device mode destinations in pre-consent mode, you can control the events delivery strategy for the cloud mode destinations only.
{{< /info >}}

The SDK delivers events in the pre-consent mode based on the following values:

| Value | Description |
| :----| :------|
| `immediate` | RudderStack sends the events to the RudderStack backend (data plane) immediately as they occur.  |
| `buffer` | This option is applicable only if the cookie storage strategy is set to `none` or `session`. The SDK buffers the events in the local storage. You can use the [`consent` API](#consent-api) to decide what to do with these buffered events. |

The SDK decides the delivery for preload events (events instrumented to the SDK before it is loaded), [ad-blocked page view]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/detecting-adblocked-pages.md" >}}) events, and [Query string API]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/supported-api.md#query-string-api" >}}) events, based on the above options (`immediate`/`buffer`) set in the pre-consent mode.

### The `consent` API {#consent-api}

{{< customreadfile "/includes/consent-api.md" >}}

## Set different pre-consent and post-consent storage options

You can configure different [storage options]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk.md#storage" >}}) for pre-consent and post-consent user tracking that let you:

- Ensure data is stored appropriately based on the consent status and reduce unnecessary data collection.
- Maintain seamless user experience while respecting users' privacy preferences.

Follow these steps to set different storage options for pre-consent and post-consent user tracking:

1. Configure the [storage options]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk.md#storage" >}}) while loading the JavaScript SDK.
2. Set [`preConsent.enabled`](#the-preconsent-object) to `true`. You can also define the SDK's [cookie storage]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/consent-management.md#cookie-storage-strategy" >}}) and [events delivery strategy]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/consent-management.md#events-delivery-strategy" >}}) here.

```javascript
rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
    storage: {
        encryption: {
            version: "v3" / "legacy"
        },
        type: "cookieStorage", // Other available options are "localStorage", "sessionStorage", "memoryStorage", and "none".
        
        // Other storage options
    },
  consentManagement: {
    enabled: true,
    provider: "oneTrust" / "ketch" / "iubenda" / "custom" // Specify your consent management provider
  },
  preConsent: {
    enabled: true,
    storage: { // Optional; defines SDK's cookie storage strategy
      strategy: "session" // Optional; other accepted values are "none", "session"
    },
    events: { // Optional; defines SDK's events delivery behavior
      delivery: "buffer" // Optional; other accepted value is "immediate"
    },
  },
  // Other load options
});
```

3. Invoke the `consent` API **after** the user provides consent. You can also define the SDK's post-consent [storage options]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk.md#storage" >}}) here.

```javascript
rudderanalytics.consent({
  trackConsent: true,
  discardPreConsentEvents: true, // Optional; default value is false
  storage: {
    type: "localStorage" // Other available options are "cookieStorage", "sessionStorage", "memoryStorage", and "none".
  }
});
```

## Integration with consent management platforms

RudderStack's JavaScript SDK integrates with various consent management platforms:

- [OneTrust]({{< ref "data-governance/consent-management/onetrust/javascript.md#set-up-website" >}})
- [Ketch]({{< ref "data-governance/consent-management/ketch.md" >}})
- [iubenda]({{< ref "data-governance/consent-management/iubenda.md" >}})
- [Custom providers]({{< ref "data-governance/consent-management/custom-consent-manager/javascript.md#setup" >}})

These integrations enable:
- Flexibility to use the consent management tool that best fits your needs
- Seamless coordination between consent decisions and data collection
- Compliance with privacy regulations across different jurisdictions

<br />