Cookie Consent Bar

Stay organized with collections Save and categorize content based on your preferences.

European laws require that we give visitors to our sites information about the use of cookies and other forms of local storage, if we are using them (read more at cookiechoices.org). So depending on what countries will be looking at our site, and if using cookies, it maybe we need to show a Cookie Consent Bar.

This even includes the use of Google Analytics (which does drop cookies). For further clarification see the Cookie Law GDPR explainer.

This component can be used for sites that do not use cookies for personalization and advertising. Googlers can find more information at go/cookiebar.

Implementation

This will automatically render a cookie bar if the user is located in a country that requires this being shown and has not yet given consent. For more control over the content and more details about the intlCode option, see the Localization guides below.

  1. Ask your Google contact to register your use at go/mktg-ccb-users.

  2. Add the script below before your closing body tag and set/remove the localization option (by default we will use the lang attribute from the website).

    <script
        data-autoload-cookie-consent-bar="true"
        data-autoload-cookie-consent-bar-intl-code="TODO: Add language code (see below) or remove attribute"
        src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js">
    </script>
    
  3. You may wish to use a nonce depending on your CSP setup.

Localization

This version of the cookie consent bar will cater (automatically localize) for:

Arabic (ar), Basque (eu), Bulgarian (bg), Catalan (ca), Croatian (hr), Czech (cs), Danish (da), Dutch (nl), English (en), English - United Kingdom (en-GB), Estonian (et), Finnish (fi), French (fr), Galician (gl), German (de), Greek (el), Hebrew (iw), Hungarian (hu), Icelandic (is), Italian (it), Latvian (lv), Lithuanian (lt), Maltese (mt), Norwegian (no), Polish (pl), Portuguese - Brazil (pt-BR), Portuguese - Portugal (pt-PT), Romanian (ro), Russian (ru), Serbian (sr), Slovak (sk), Slovenian (sl), Spanish (es), Swedish (sv), Turkish (tr) and Ukrainian (uk).

Load a specific locale

From version 3, we've added the option to override the automatic localization, for situations where a user may have chosen a different market (eg. via a language switcher) or a specific language is currently not supported by the component but there is a preferred fallback language (other than English).

The value of this will be the language code (the first after /intl/ in an url), with the supported values shown above. If using Bracket, you should be able to use g.page.locale.lang_code as the value.

To set this, add the data-autoload-cookie-consent-bar-intl-code attribute with the required language code as the value.

<script
    data-autoload-cookie-consent-bar="true"
    data-autoload-cookie-consent-bar-intl-code="TODO: Add locale (eg. en-GB)"
    src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js">
</script>

Custom content

If your site will be launching in other countries it's important localized content is added. You can do this by setting a configuration object and adding it to the component (let your ATL know about this as they can add the localized content to the component itself).

  1. Add the script tag below, as per the basic implementation above. This time you do not need the data-autoload-cookie-consent-bar, as you are manually calling it.

    <script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js"></script>
    
  2. Create a configuration object (or objects) with the text with your localized versions.

    const configEn = {
      mainText: 'This site uses cookies from Google to deliver and enhance the quality of its services and to analyse traffic.',
      moreText: 'Learn more',
      moreUrl: 'https://policies.google.com/technologies/cookies',
      consentText: 'OK, got it',
    };
    
    const configDe = {
      mainText: 'Auf dieser Website werden Google eigene Cookies verwendet, um Google-Dienste bereitzustellen, deren Qualität zu verbessern und Datenverkehr zu analysieren.',
      moreText: 'Weitere Informationen',
      moreUrl: 'https://policies.google.com/technologies/cookies',
      consentText: 'Ok',
    };
    
  3. Deploy server side logic in your application to detect both user language preference and location.

    The App Engine Language and Country header will be useful here.

  4. If the Cookie Consent Bar is needed for the user’s location (i.e the EU or Europe), then initialize the component with the appropriate language preference.

    new google.CookieConsentBar(configDe);
    

Style

The default bar style (the same style you’ll see on cookiechoices.org) can be overridden to fall in line with the look and feel of your site. The DOM elements have been structured with this in mind.

<div id="cookieBar">
  <div class="cookieBarInner">
    <span class="cookieBarText"></span>
    <span class="cookieBarButtons">
      <a class="cookieBarButton"></a>
      <a class="cookieBarButton"></a>
    </span>
  </div>
</div>

Marketing Web Standards

If your site follows MWS (Marketing Web Standards), please see the Glue Docs for information on how to apply the relevant styles.

Location within the DOM

By default the Cookie Consent Bar will load into the body element, if needed it is possible to load it into an element of your choice by passing it as a parameter on initialization.

<script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js"></script>
<script> new google.CookieConsentBar(config, parent); </script>

Bugs/questions?

If you encounter any issues with the component please ask your Google contact to open a support request at go/mktg-ccb-bug.

Externs

If building with closure and using custom content, the following externs file is available to add to your project.

/** @fileoverview @externs */

/**
 * @typedef {{
 *   mainText: string,
 *   moreText: string,
 *   moreUrl: string,
 *   consentText: string,
 * }}
 */
let CookieConsentBarRequiredConfig;

/** @typedef {{display: boolean}} */
let CookieConsentBarNotRequiredConfig;

/** @typedef {{intlCode: string}} */
let CookieConsentBarIntlOptions;

/**
 * @constructor
 * @param {(!CookieConsentBarIntlOptions | !CookieConsentBarRequiredConfig |
 *     !CookieConsentBarNotRequiredConfig | null)=} config
 * @param {(!Element)=} parent
 */
google.CookieConsentBar = function(config, parent) {};

/**
 * @param {(!goog.storage.mechanism.HTML5LocalStorage)=} storage
 * @return {boolean}
 */
google.CookieConsentBar.isLocalStorageAvailable = function(storage) {};