Skip to content

Latest commit

 

History

History
141 lines (102 loc) · 3.34 KB

README.md

File metadata and controls

141 lines (102 loc) · 3.34 KB
Raw

Cookie Consent (Opt-In)

A cookie consent opt-in implementation script

Watch Demo

Feel free to customize it for your own needs.

Features

  • So far, it works for the scripts from Google Analytics, Pardot (Salesforce), and YouTube/Vimeo.
  • Cookie providers that are not required can be commented out or deleted.
  • Extendable for other cookies.
  • YouTube/Vimeo can either be confirmed by the cookie banner or directly on the overlay of the videos (HTML structure has to be adjusted - see below).
  • CSS for Consent Banner and for YouTube Video overlay.
  • Cookie settings can be changed via checkboxes on the banner.
  • Cookies in the banner settings are grouped as "Essential Cookies", "Marketing/Analysis", "YouTube" but can be changed easily.
  • Multilanguage support by reading out the lang attribute.

Requirement for Google Analytics and Pardot

  • Replace IDs in CookieConsent.js:
  googlesitetag: {
    gt_id: 'UA-XXXXXXXXXX-X'
  },
  pardot: {
    piAId: 'xxxxx',
    piCId: 'xxxx'
  },

Requirement for YouTube (or Vimeo)

  • The HTML structure has to be adapted for YouTube/Vimeo:
<div id="video_wrapper-id" class="video" data-yt_video_src="https://www.youtube-nocookie.com/embed/{VIDEO_ID}?controls=0">
  <div class="video_container">
    <iframe height="343" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="cc_video-overlay js-video-overlay">
    <div class="cc_video-overlay_container">
      <div class="cc_video-overlay_text">By loading the video, you accept YouTube's privacy policy.</div>
      <button onclick="showVideo('video_wrapper-id')">load video</button>
    </div>
  </div>
</div>

(Replace {VIDEO_ID} with YouTube video ID.)


Customization

  • Clone repository via git.
  • Run npm install
  • Customize files src/js/CookieConsent.js and src/css/CookieConsent.css.
  • Run gulp
  • Use the new generated lib-files

Define custom cookies

Change the CookieConsent.js file in src folder

Add custom cookie functions to cookieconsent_cookie_fn

const cookieconsent_cookie_fn = {
  ...
  '{CUSTOM_COOKIE_NAME}': {
    allow: {ENABLE_COOKIE_FUNCTION},
    deny: {DISABLE_COOKIE_FUNCTION}
  },
} 

function {ENABLE_COOKIE_FUNCTION} () {
  // custom code
}
function {DISABLE_COOKIE_FUNCTION} () {
  // custom code
}

Extend cookieconsent.options

  1. Add cookie to an existing option or define a new option
window.cookieconsent = {
  ...
  options: {
    option1: {
      cookies: ['googlesitetag', 'pardot', {CUSTOM_COOKIE_NAME}],
  ...
  1. Define a custom option
window.cookieconsent = {
  ...
  options: {
    {CUSTOM_OPTION}: {
      cookies: [{CUSTOM_COOKIE_NAME}],
      text_en `{CUSTOM_TEXT_EN_FOR_OPTION}`
      text_de `{CUSTOM_TEXT_DE_FOR_OPTION}`
  ...

Then run command gulp and use the new created scripts in lib folder


Remove deny button

Remove the following line in all languages in src/js/CookieConsent.js and change the styles.

<button class="cc-banner_btn-deny" onclick='denyAll()'>Deny</button>

Not happy with the layout?

Define your own CSS-Layout. Adapt file src/scss/CookieConsent.scss to your needs.


Any recommendations or bugs?

Please open an issue. Thank you.