Skip to main content

CookieFirst

Installation​

npm install @walkeros/web-source-cmp-cookiefirst

Usage​

import { startFlow } from '@walkeros/collector';
import { sourceCookieFirst } from '@walkeros/web-source-cmp-cookiefirst';

await startFlow({
  sources: {
    consent: {
      code: sourceCookieFirst,
    },
  },
});

Settings​

SettingTypeDefaultDescription
categoryMapRecord<string, string>See belowMaps CookieFirst categories to walkerOS consent groups
explicitOnlybooleantrueOnly process explicit consent (user made a choice)
globalNamestring'CookieFirst'Custom name for window.CookieFirst object

Default category mapping​

{
  necessary: 'functional',
  functional: 'functional',
  performance: 'analytics',
  advertising: 'marketing',
}

When multiple CookieFirst categories map to the same walkerOS group (e.g., both necessary and functional to functional), the source uses OR logic: if ANY source category is true, the target group is true.

Custom mapping example​

await startFlow({
  sources: {
    consent: {
      code: sourceCookieFirst,
      config: {
        settings: {
          categoryMap: {
            performance: 'statistics', // Use 'statistics' instead of 'analytics'
          },
          explicitOnly: true,
        },
      },
    },
  },
});

How it works​

  1. Initialization: Checks if CookieFirst is already loaded and processes existing consent state from window.CookieFirst.consent.

  2. cf_init event: Listens for the cf_init event fired when CookieFirst banner initializes.

  3. cf_consent event: Listens for the cf_consent event fired when user changes consent preferences.

  4. Consent mapping: Translates CookieFirst categories to walkerOS consent groups and calls elb('walker consent', state).

Reference​

💡 Need Professional Support?
Need professional support with your walkerOS implementation? Check out our services.