Skip to content

Commit

Permalink
refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@onza
onza committed Mar 28, 2023
1 parent 84c17c3 commit b0dd296
Show file tree
Hide file tree
Showing 13 changed files with 11,873 additions and 16,681 deletions.
77 changes: 42 additions & 35 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
# Cookie Consent (Opt-In)

### A cookie consent opt-in implementation script for websites
## A cookie consent opt-in implementation script

[Watch Demo](https://onza.github.io/CookieConsent)

Please note that this solution was created so that we ourselves could better understand the topic of cookie consents. However, the solution is actually used several times, works well and can also be expanded without any problems.
Feel free to customize it for your own needs.

If you are looking for a cookie consent solution that has many relevant services already integrated, you should take a look at [Klaro](https://github.com/kiprotect/klaro).
### Features

## Features
* Until now Google Analytics, Pardot (Salesforce), YouTube (just replace GA & Pardot ID...)
* 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 cookies can either be confirmed by the cookie banner or directly on the videos (HTML structure has to be adjusted - see below).
* YouTube/Vimeo cookies 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.
* Already accepted cookies are not deleted, Pardot scripts will be removed from the DOM. Google Analytics script will not be deleted. Instead it will be deactivated as described in Google Analytics Opt-Out. Further read [Google Developers Guide](https://developers.google.com/analytics/devguides/collection/gtagjs/user-opt-out).
* Multilanguage support by reading out the lang attribute.
* To support IE 11 (not tested below IE11) include lib/js/polyfills.js before CookieConsent.js.
* Kicked out! (March 2023): To support IE 11 (not tested below IE11) include lib/js/polyfills.js before CookieConsent.js.

<br>

## Requirement for Google Analytics and Pardot
### Requirement for Google Analytics and Pardot

* Replace IDs in **CookieConsent.js**:
```

```js
googlesitetag: {
gt_id: 'UA-XXXXXXXXXX-X'
},
Expand All @@ -34,42 +35,47 @@ If you are looking for a cookie consent solution that has many relevant services
},
```

<br>
<br>

## Requirement for YouTube
* The HTML structure has to be adapted for YouTube:
```
<div id="video__wrapper-id" class="youtubevideo" data-yt_video_src="https://www.youtube-nocookie.com/embed/{YOUTUBE-VIDEO_ID}?controls=0">
<div class="youtubevideo__container">
## Requirement for YouTube (or Vimeo)

* The HTML structure has to be adapted for YouTube/Vimeo:

```html
<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="youtubevideo__consentbanner js-ytbanner">
<div class="youtubevideo__consentbanner-wrapper">
<div class="youtubevideo__consentbanner-text">By loading the video, you accept YouTube's privacy policy.</div>
<button onclick="showYoutubeVideo('video__wrapper-id')">load video</button>
<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 `{YOUTUBE-VIDEO_ID}` with YouTube video ID.

(Replace `{VIDEO_ID}` with YouTube video ID.)

<br>

## Customization

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

<br>

### Define custom cookies

Change the `CookieConsent.js` file in src folder

#### Add custom cookie functions to `cookieconsent_cookie_fn`
```

```js
const cookieconsent_cookie_fn = {
...
'{CUSTOM_COOKIE_NAME}': {
Expand All @@ -85,11 +91,12 @@ function {DISABLE_COOKIE_FUNCTION} () {
// custom code
}
```
#### Extend `cookieconsent.options`:

a) Add cookie to an existing option or define a new option
#### Extend `cookieconsent.options`

```
1) Add cookie to an existing option or define a new option

```js
window.cookieconsent = {
...
options: {
Expand All @@ -98,8 +105,9 @@ window.cookieconsent = {
...
```
b) Define a custom option
```
2) Define a custom option
```js
window.cookieconsent = {
...
options: {
Expand All @@ -114,11 +122,12 @@ Then run command `gulp` and use the new created scripts in lib folder
<br>
### Remove deny button
### Add a deny button
remove following line in all languages in `src/js/CookieConsent.js`
```
<button class="cookieconsent-banner__button--deny" onclick='denyAll()'>Deny</button>
Activate the following line in all languages in `src/js/CookieConsent.js` and add some styles.
```html
<!--<button class="cc-banner-btn-deny" onclick='denyAll()'>Deny</button>-->
```
<br>
Expand All @@ -129,8 +138,6 @@ Define your own CSS-Layout. Adapt file `src/scss/CookieConsent.scss` to your nee
<br>
## Any recommendations, questions or bugs?

Please open an issue.
## Any recommendations or bugs?
Thank you.
Please open an issue. Thank you.
41 changes: 16 additions & 25 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,39 @@
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="lib/css/CookieConsent.css">
<link rel="stylesheet" href="lib/css/CookieConsent.min.css">
<style>
* { box-sizing: border-box; }
html,
body {
margin: 0;
padding: 0;
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
.container {
margin: 20px auto;
padding: 20px;
width: 100%;
max-width: 1200px;
background-color: #fff;
}
h1 { margin: 100px 0 60px; text-align: center; }
body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #f0f3f5; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; }
.demo_container { transform: translateY(15%); margin: auto; padding: 2rem; width: 100%; max-width: 75rem; background-color: #fff; }
.demo_h1 { margin: 3rem 0 1.5rem; text-align: center; }
.demo_p { text-align: center; margin: 0 0 3rem; }
.gh-buttons { text-align: center; }
.youtubevideo { display: block; margin: auto; }
.video { display: block; margin: auto; }
</style>
</head>
<body>
<div class="container">
<div class="demo_container">
<div class="gh-buttons">
<a class="github-button" href="https://github.com/onza/CookieConsent" aria-label="Watch onza/CookieConsents on GitHub">Watch</a>
<a class="github-button" href="https://github.com/onza/CookieConsent/archive/master.zip" aria-label="Download onza/CookieConsent on GitHub">Download</a>
</div>
<h1>CookieConsent opt-in script demo</h1>
<div id="video__wrapper-id" class="youtubevideo" data-yt_video_src="https://www.youtube-nocookie.com/embed/7f8GVcgYzqs?controls=0">
<div class="youtubevideo__container">
<h1 class="demo_h1">CookieConsent script demo</h1>
<p class="demo_p">With Opt-in for Google Analytics, Pardot & YouTube.</p>
<div id="video_wrapper-id" class="video" data-video_src="https://www.youtube-nocookie.com/embed/ERXpyZe483o?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="youtubevideo__consentbanner js-ytbanner">
<div class="youtubevideo__consentbanner-wrapper">
<div class="youtubevideo__consentbanner-text">By loading the video, you accept YouTube's privacy policy.</div>
<button onclick="showYoutubeVideo('video__wrapper-id')">load video</button>
<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>
</div>
<script src="lib/js/polyfills.js"></script>
<!-- <script src="lib/js/polyfills.js"></script> -->
<script src="lib/js/CookieConsent.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
Expand Down
Loading

0 comments on commit b0dd296

Please sign in to comment.