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 | undefined
  analytics: boolean | undefined
  preferences: boolean | undefined
  marketing: boolean | undefined

  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>

Configure your Cookie Banner

Cookie Manager Setup Guide

Cookie Banner - Shopify Advanced

Content Blocking

Facebook Pixel Integration