Introduction

The Enzuzo Cookie Banner provides additional capabilities that can be configured manually, giving full control to the behaviour of the website. One of the main features is the ability to automatically block and categorize third party scripts.

Enabling Auto Blocking

Setting up the cookie banner is the same as usual with the following requirements:

the cookie banner script should be in the <head> section of the HTML and that it should be placed before any scripts that you want to block. The cookie banner cannot block scripts that are run before the cookie banner itself.
the script attribute auto-blocking is added to the script tag. Here is an example.
```
<script auto-blocking="true" src="https://app.enzuzo.com/scripts/cookiebar/c4b59d26-1d9c-11ed-bef4-6b8ef0dd69e3"></script>
```
- Setting auto-blocking="true" will block all scripts by default, unless their category has been allowed.
- Setting auto-blocking="allow" will allow uncategorized scripts to run without being blocked.

Categorizing Third-Party Scripts

For each script, you can define their category, description, and translations. The following is a list of attributes that can be defined for each script.

Attribute Name	Description
ez-type	The type - should always be "cb" for the cookie banner.
ez-cb-id	Script ID - can be anything unique
ez-cb-cat	The category of the script. Should be one of "functional", "marketing", "analytics", or "preferences". We may support additional categories in the future.
ez-cb-desc	The description for this script
ez-cb-desc-{{locale}}	Locale specific description, such as ez-cb-desc-fr for French.

Here are is an example of loading Google Analytics.

<script async ez-type="cb" ez-cb-id="ga" ez-cb-cat="analytics" ez-cb-desc="Google Analytics is a web analytics service offered by Google that tracks and reports website traffic" src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic.

Running JS Code on Consent

You can configure the cookie banner to run custom JS code to handle consent lifecycles, by adding a script before our cookie banner is loaded. The following script is an example where the cookie cookie-status-analytics reflects the consent status of the analytics category.

<script>
  function onAnalyticsConsentChange({ analytics, functional, marketing, preferences }) {
    const expiry = new Date(Date.now() + 365 * 864e5)

    document.cookie = `cookie-status-analytics=${analytics};
    expires=${expiry}; path=/; domain=${location.hostname}`
  }

  function onAcceptSelected({ analytics, functional, marketing, preferences }) {
    console.debug('[Enuzuzo API]: callbacks.onAcceptSelected', { analytics, functional, marketing, preferences })
    onAnalyticsConsentChange({ analytics, functional, marketing, preferences })
  }

  function onAcceptAll({ analytics, functional, marketing, preferences }) {
    console.debug('[Enuzuzo API]: callbacks.onAcceptAll', { analytics, functional, marketing, preferences })
    onAnalyticsConsentChange({ analytics, functional, marketing, preferences })
}

  function onDecline({ analytics, functional, marketing, preferences }) {
    console.debug('[Enuzuzo API]: callbacks.onDecline', { analytics, functional, marketing, preferences })
    onAnalyticsConsentChange({ analytics, functional, marketing, preferences })
  }

  function onInit({ analytics, functional, marketing, preferences }) {
    console.debug('[Enuzuzo API]: callbacks.onInit', { analytics, functional, marketing, preferences })
    onAnalyticsConsentChange({ analytics, functional, marketing, preferences })
  }

  window.__enzuzoConfig = {
    callbacks: {
      acceptSelected: onAcceptSelected,
      acceptAll: onAcceptAll,
      decline: onDecline,
      init: onInit
    }
  }
</script>

<script src="https://app.stage.enzuzo.com/scripts/cookiebar/aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeeeee"></script>

The c argument passed to each callback contains information about the categories consented to by the user, in the following structure:

{
  functional: boolean | null
  analytics: boolean | null
  preferences: boolean | null
  marketing: boolean | null

  hostname: string
}

Override Banner Mode

You can use the following script to override the banner mode determined by your regional settings. The script must be included before the cookie banner embed code.

<script>
  window.__enzuzoConfig = window.__enzuzoConfig ?? {}
  window.__enzuzoConfig.bannerMode = 'dontshow' // or 'optin' or 'optout'
</script>

Custom Button Configurations Based on Banner Mode

Using the following script, you will be able to configure the consent button options depending on the banner consent mode. The script must be included before the cookie banner embed code. You can define what buttons to hide based on which consent mode. The following script will hide the accept and decline buttons when the consent mode is set to opt-out or don't show.

<script> 
    window.__enzuzo = window.__enzuzo ?? {}; 
    window.__enzuzo.hideButtons = window.__enzuzo.hideButtons ?? {};
    window.__enzuzo.hideButtons = { accept: ['optout', 'dontshow'], decline: ['optout', 'dontshow'] }; 
</script>

Custom Cookie Preferences Button

Adding the data-ez-show-preferences attribute to a DOM element will open the cookie preferences when that element is clicked.

<div class="btn btn-primary" ez-show-preferences>
  Show Preferences
</div>

Region-Based Script/Cookie Blocking

Cookie blocking, script blocking, banner mode, and banner appearance can be defined per-region via the regions property of the window.__enzuzoConfig configuration object, which should conform to the following interface:

type Stroolean = boolean | 'true' | 'false'

type BlockingOpts = {
  scripts?: 'allow' | 'deny' | Stroolean
    // 'false' | false: No script blocking (default)
    // 'allow': Allow uncategorized scripts to run without being blocked
    // 'true' | true | 'deny': Block scripts unless their category has been allowed
  cookies?: 'allow' | 'deny' | Stroolean
    // 'false': No cookie blocking
    // 'allow': Allow uncategorized cookies (default)
    // 'true' | true | 'deny': Block cookies unless their category has been allowed
  bodyLock?: Stroolean
    // 'true' | true: Prevent scrolling until user accepts or declines cookies
    // 'false' | false: Allow scrolling (default)
}

type RegionOpts = {
  default?: Stroolean
    // Treat this as a default "fallback" region
  worldwide?: Stroolean
    // Applies if no other region applies
  area?: 'EU'
    // Applies if user is in this area and there is no more specific applicable country
  country?: string // 'US', 'CA', etc...
    // Applies if user is in this country and there is no more specific applicable state
  state?: string // 'NJ', 'QC', etc...
    // Applies if user is in this state and the above country
  mode?: 'optin' | 'optout' | 'dontshow' | 'tcf'
    // Banner mode
  managerIcon?: Stroolean
    // Whether or not to show the floating consent options button
  blocking?: BlockingOpts
    // Blocking options for this region
}

window.__enzuzoConfig.regions: RegionOpts[]

Note: A RegionOpts object should be a superset of exactly ONE of the types { default: true | 'true' }, { worldwide: true | 'true' }, { area: 'EU' }, and { country: string; state?: string }. If the provided object contains any two subobjects each satisfying distinct types in this set, the provided object is invalid.

If there is an object in the regions list with default: true or default: 'true' set, all other regions will inherit any options set in that object that they do not define themselves.

Also, note that a global banner mode set via window.__enzuzoConfig.bannerMode will override all banner modes set per-region.

Example: Blocking Scripts and Cookies

The BlockingOpts interface defines cookie blocking, script blocking, and scroll lock behaviour for the object's containing region. For example, the following script will set the banner mode to opt-in for all regions that do not specify their own banner mode, and, for Quebec, enable script blocking, enable cookie blocking while allowing uncategorized cookies, and prevent interacting with the website until the user has interacted with the banner:

<script>
  window.__enzuzoConfig = {
    regions: [
      {
        default: true,
        mode: 'optin',
      },
      {
        country: 'CA',
        state: 'QC',
        blocking: {
          scripts: 'deny',
          cookies: 'allow',
          bodyLock: true,
        },
      },
    ],
  }
</script>

Configure your Cookie Banner

Cookie Manager Setup Guide

Setting up Cookie Banner Regions

Content Blocking

Facebook Pixel Integration (GTM)