Custom Consent Management for Web Beta

The JavaScript SDK seamlessly integrates with your custom consent management provider and lets you map the user’s consent categories to specific RudderStack destinations.

RudderStack fetches the consent settings specified in the RudderStack dashboard and processes the destinations and events accordingly.

Setup

The following sections highlight the steps to set up the JavaScript SDK integration with a custom consent management provider.

Step 1: Configure consent categories

Configure the consent categories in your consent manager’s dashboard.

Step 2: Specify consent category IDs

Specify the consent category IDs defined above for each destination connected to your JavaScript source. You can specify multiple consent purpose IDs by pressing the Enter key after each ID.

The consent category IDs are case-sensitive.

Note that the settings for specifying multiple consent IDs vary slightly for some destinations. Click Add more after specifying each consent category ID.

Step 3: Set up your website

You can set up your website depending on the following use cases:

Post-consent user tracking

Note that:

• In this approach, you must load the JavaScript SDK after the user has provided consent.
• If the user updates their consent preferences, you must refresh the web page for the changes to take effect in the SDK (for both cloud and device mode destinations).

Use the consentManagement object in the load API, as shown:

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  consentManagement: {
    enabled: true,
    provider: "custom",

    // Provide the consent IDs obtained from your consent provider.
    allowedConsentIds: ['<category_id_1>', '<category_id_2>', .....], // Required
    deniedConsentIds: ['<category_id_3>', '<category_id_4>', .....] // Required
  },
  // Other options
});

Note that:

• RudderStack requires the allowedConsentIds and deniedConsentIds fields to successfully filter events based on user’s consent.
• The consent IDs specified in the allowedConsentIds and deniedConsentIds must be the union of all the consent category IDs specified in the consent settings for the destination. Otherwise, the consent setup will not work as expected.

Pre-consent user tracking

Note that:

• With this approach, you can choose to track users as fully anonymous, or persist only the information you need, for example, their sessions or the anonymousId identifier. This minimizes any data loss related to attribution, acquisition, and the overall user journey.
• Unlike post-consent user tracking, there is no restriction on the loading order of the JavaScript SDK for this use case.
• If the user updates their consent preferences, you must invoke the consent API again for the changes to take effect for the cloud mode destinations. For the device mode destinations tied to the consent preferences, reload the web page for the changes to take effect.

Step 1: Configure the preConsent object

Use the preConsent object while loading the JavaScript SDK to enable pre-consent mode and define the SDK’s events delivery behavior. Set preConsent.storage.enabled to true and use the storage load option to define what the SDK persists before the user provides consent.

rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  consentManagement: { // Optional
    enabled: true,
    provider: "custom"
  },
  storage: { // Optional; defines what the SDK persists
    entries: {
      sessionInfo: {
        type: "cookieStorage" // Other supported values are "localStorage", "sessionStorage", "memoryStorage", and "none"
      }
    }
  },
  preConsent: { // Optional
    enabled: true, // Optional; false by default
    storage: { // Optional
      enabled: true, // Optional; false by default; applies the storage option before consent
    },
    events: { // Optional
      delivery: "buffer", // Optional; other accepted value is "immediate"
    },
  },
  ...
  // Other load options
});

The preConsent.storage.strategy option is deprecated and will be removed in the next major version. If your instrumentation still sets it, see Migrate from the cookie storage strategy.

In the above example, the JavaScript SDK is configured to load in the pre-consent mode. Note that:

• The SDK persists only the session information, as sessionInfo is the only entry with a storage type. It does not persist any other user data before consent.
• Any events instrumented to the SDK are buffered till the user provides consent.
• The SDK does not load any device mode destination connected to the source.

Step 2: Invoke consent API once user provides consent

Once the user consent is available, invoke the SDK’s consent API with the consent data obtained from your provider. The SDK then comes out of the pre-consent mode and resumes normal functioning.

rudderanalytics.consent({
  consentManagement: {
    // Provide the consent IDs obtained from your consent provider.
    allowedConsentIds: ["<category_id_1>", "<category_id_2>"], // Required for custom provider
    deniedConsentIds: ["<category_id_3>", "<category_id_4>"], // Required for custom provider
  },
  trackConsent: true,
  discardPreConsentEvents: true, // Optional; default value is false
  storage: {
    type: "localStorage"
  }
});

Note that:

• RudderStack requires the allowedConsentIds and deniedConsentIds fields to successfully filter events based on user’s consent.
• The consent IDs specified in the allowedConsentIds and deniedConsentIds must be the union of all the consent category IDs specified in the consent settings for the destination. Otherwise, the consent setup will not work as expected.

In the above snippet, SDK does the following:

• Loads device mode integrations based on the consent data.
• Stores information like the user ID, anonymous user ID, user traits, etc. in the local storage henceforth.
• Discards the buffered pre-consent events, if any.
• Sends a track event named Consent Management Interaction, indicating the consent interaction has happened.