cookie-consent-js
A simple dialog and framework to handle the German and EU law (as written by EuGH, 1.10.2019 – C-673/17) about cookies in a website
Note We made a new version with more detailed cookie settings, which works with Bootstrap 4. You find it at https://github.com/shaack/bootstrap-cookie-consent-settings
Usage
Follow these easy steps to integrate the cookie settings in your page.
npm install cookie-consent-js
1. Install cookie-consent-js in your project with Alternatively you can download the git repository.
cookie-consent.css
2. Include
This should be done before any bootstrap or other frameworks css. You can overwrite styling in your projects css, take a look at cookie-consent.scss.
cookie-consent.js
3. Include
In your <head>
or at the bottom of your <body>
.
4. Initialize the Script
var cookieConsent = privacyPolicyUrl: "/privacy-policy.html"
In props
you should at least define privacyPolicyUrl
.
See below "Configuration properties".
5. Enable "Cookie settings" in your service navigation
Cookie settings
So the user can anytime reconfigure, if he wants tracking or not.
6. Enable or disable tracking depending on configuration
Client side JavaScript: Surround your tracking code with
ifcookieConsent // Google Analytics code and/or other tracking code
Server side PHP: Surround your tracking code with
if($_COOKIE['cookie-consent-tracking-allowed'] === 'true') { // do some tracking}
All other languages: Just read, if the cookie cookie-consent-tracking-allowed
is "true"
...that's all! Contact me, if you have questions.
API
This framework writes a cookie (it's default name is cookie-consent-tracking-allowed
)
with the value "true"
, if the user has accepted tracking. You can read the value with the JavaScript
API (cookieConsent.trackingAllowed()
) or from any other language, server or client side, which can read cookies.
JavaScript API
Show the settings dialog again
cookieConsent
Use this to allow the user to reconfigure the cookie settings, for example, in your service navigation as "Cookie settings".
Read the status
cookieConsent
Returns true
if the user did accept tracking cookies.
Use this function to disable tracking. Surround tracking code, like the Google Analytics code with
ifcookieConsent // Google Analytics code and/or other tracking code
Read the status from PHP
Read the cookie from a PHP server with
if($_COOKIE['cookie-consent-tracking-allowed'] === 'true') { // do some tracking}
Configuration properties
With default values.
thisprops = buttonPrimaryClass: "btn btn-primary" // the "accept all" buttons class, only used for styling buttonSecondaryClass: "btn btn-secondary" // the "accept necessary" buttons class, only used for styling privacyPolicyUrl: "privacy-policy.html" autoShowModal: true // disable autoShowModal on the privacy policy page, to make that page readable lang: navigatorlanguage // the language, in which the modal is shown blockAccess: false // set "true" to block the access to the website _before_ choosing a cookie configuration position: "right" // position ("left" or "right"), if blockAccess is false postSelectionCallback: undefined // callback, after the user has made his selection content: // the content in all needed languages de: title: "Cookie-Einstellungen" body: "Wir nutzen Cookies, um Inhalte zu personalisieren und die Zugriffe auf unsere Website zu analysieren. " + "Sie können wählen, ob Sie nur für die Funktion der Website notwendige Cookies akzeptieren oder auch " + "Tracking-Cookies zulassen möchten. Weitere Informationen finden Sie in unserer --privacy-policy--." privacyPolicy: "Datenschutzerklärung" buttonAcceptAll: "Alle Cookies akzeptieren" buttonAcceptTechnical: "Nur technisch notwendige Cookies akzeptieren" en: title: "Cookie settings" body: "We use cookies to personalize content and analyze access to our website. " + "You can choose whether you only accept cookies that are necessary for the functioning of the website " + "or whether you also want to allow tracking cookies. For more information, please refer to our --privacy-policy--." privacyPolicy: "privacy policy" buttonAcceptAll: "Accept all cookies" buttonAcceptTechnical: "Only accept technically necessary cookies" cookieName: "cookie-consent-tracking-allowed" // the name of the cookie, the cookie is `true` if tracking was accepted modalId: "cookieConsentModal" // the id of the modal dialog element
Disable autoShow
You can disable autoShowModal
, for instance, in the privacy policy and legal notice pages to make these pages (better) readable.
var cookieConsent = linkPrivacyPolicy: "privacy-policy.html" autoShowModal: false
Styling
See ./src/cookie-consent.scss
and overwrite values as you need in your projects stylesheet.
Disclaimer
cookie-consent-js is a project of shaack.com. If you use anything from this project, do so under the MIT-License.