This package provides a generic JavaScript library for data consent management.
Integrations for TYPO3 and Contao are available.
$ npm install --save @qbus/data-consent
# For composer TYPO3 installations:
$ composer require qbus/data-consent
# For classic mode TYPO3 installations:
$ git submodule add \
https://github.com/qbus-agentur/data-consent-typo3.git \
typo3conf/ext/data_consent
# For Contao installations:
$ composer require qbus/contao-data-consent-bundle
Add the following contents to your style.less file:
@import (inline) "npm://@qbus/data-consent";
dialog.data-consent {
--primary-color: #64c5e2;
--btn-border-radius: 2em;
--box-background: #ededed;
}
Adapt your less-css pipeline to include the npm-import
plugin.
$ npm install --save-dev less-plugin-npm-import
$ lessc --npm-import style.less stlye.css
To bundle @qbus/data-consent
into a javascript bundle created with browserify,
the esmify
plugin is required to support the ES6 module import/export syntax
used by @qbus/data-consent
.
$ npm install --save-dev esmify
Add the following contents to your index.js file:
import DataConsent from '@qbus/data-consent';
var consent = new DataConsent({
banner: false,
functional: false
});
consent.isAccepted('marketing').then(function(type) {
$.getScript('https://www.googletagmanager.com/gtag/js?id=' + window.gatid);
});
consent.launch();
Adapt your browserify pipeline to include the esmify
plugin.
The plugin will be enabled by passing -p esmify
to the browserify command:
$ browserify -p esmify index.js -o bundle.js
import DataConsent from '@qbus/data-consent'
Webpack will bundle the es6-promise
polyfill and dialog-polyfill
automatically.
If you do not need support for IE11, you may exclude the es6-promise
polyfill
from being bundled:
// webpack.config.js
module.exports = {
// …
externals: {
'es6-promise': 'Promise'
}
}
⚠️ HEADS UP!You should not use unpkg.com as CDN in production to avoid transatlantic exchanges of personal data. You may use it for testing, but please download the assets and host them directly for production.
Serve the file data-content.css
and data-content.js
from your server or include them from
UNPKG.
You should include a Promise
polyfill if you need support for Internet Explorer 11:
<link rel="stylesheet" href="https://unpkg.com/@qbus/data-consent@0.2.2/data-consent.css">
<script src="https://unpkg.com/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script src="https://unpkg.com/@qbus/data-consent@0.2.2/data-consent.min.js"></script>
DataConsent
is provided as global class by data-consent
and can be instantiated with new
:
var consent = new DataConsent({
banner: false,
functional: false
});
consent.isAccepted('marketing').then(function(type) {
$.getScript('https://www.googletagmanager.com/gtag/js?id=' + window.gatid);
});
consent.launch();
import DataConsent from '@qbus/data-consent'
import Cookies from 'js-cookie'
var consent = new DataConsent({
storage: Cookies.withAttributes({ path: '/', domain: '.example.com', expires: 3650, secure: true })
});