A dependency-free Cookie-Banner for managing your website/webapp cookies and external resources. Based on GDPR-Guidelines
Recommended step for projects with integrated module bundler (e.g. Webpack) or task-runner (e.g. Gulp).
npm install gedepiar --save
- Integrate it via the import statement
import Gedepiar from 'gedepiar'
- Import
[PATH_TO_NODE_MODULES]/gedepiar/dist/gedepiar.min.css
to your stylesheets / workflow
Recommended step for projects without a task-runner or module bundler.
- Open your shell and clone the repo
git clone git@github.com:jaybee111/gedepiar.git
- Execute
npm install
- Execute
npm run build
- Switch to the newly created directory
dist
and copygedepiar.min.js
andgedepiar.min.css
to your projects assets folder. - Add the CSS-File to your projects head-Tag:
<link rel="stylesheet" href="/path/to/css/gedepiar.min.css">
- Add the JS-File to the bottom of your projects body-Tag:
<script type="text/javascript" src="/path/to/js/gedepiar.min.js"></script>
-
Add
lang
- Attribute to html-Tag. Otherwise english or the defined fallback language is used as default language.<html lang="en">
-
Add init-function to your JavaScript-File:
// yourCustom.js gedepiar.init({ services : ['phpsess','ga','gmap','yt'] });
Options
Attribute Type Default Description services array [] Services to be managed by the cookie banner. Possible options: Google Analytics ga
, Google Mapsgmap
, PHP-Session Cookiephpsess
, Matomomatomo
, Youtubeyt
, Vimeovimeo
. Need other services? No Problem! Add your own service. Look at Services.i18n object {} Override default translation. Look at Translation for further information. fallbackLang string en If the translation is not available, the defined language is loaded showModalBtn boolean true A Button will be shown in the left corner on every website to open the cookie settings modal. -
Add data-attributes to HTML-Tags. For further information go to Services.
Every service has an unique alias (e.g. Google Analytics = ga). This alias is used to identify the related HTML-Tags data-gedepiar-service="[SERVICE-ALIAS]"
.
data-attributes
Attribute | Description |
---|---|
data-gedepiar-service | This alias is used to identify the related HTML-Tags data-gedepiar-service="[SERVICE-ALIAS]" |
data-gedepiar-overlay | Adds a html-Wrapper which includes explanatory service text and an activation button. This wrapper will be present until the user clicked the activation button. After clicking the activation button the external resource will be loaded (e.g. Youtube) |
data-gedepiar-overlay-img | Adds a html-Wrapper which includes explanatory service text, an activation button and a background image. This wrapper will be present until the user clicked the activation button. After clicking the activation button the external resource will be loaded (e.g. Youtube) |
The html elements must be marked as follows:
<div id="map" class="gmap" data-gedepiar-service="gmap" data-gedepiar-overlay></div>
<script data-gedepiar-service="gmap" type="text/plain">
const map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
initMap();
</script>
<script data-gedepiar-service="gmap" type="text/plain" src="https://maps.googleapis.com/maps/api/js?key=[YOUR-API-KEY]" async defer></script>
<script data-gedepiar-service="ga" async src="https://www.googletagmanager.com/gtag/js?id=[YOUR-IDENTIFIER]" type="text/plain"></script>
<script data-gedepiar-service="ga" type="text/plain">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[YOUR-IDENTIFIER]');
</script>
<script type="text/plain" data-gedepiar-service="matomo">
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://my.domain.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', 'XXX']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
Text-Overlay
<iframe data-gedepiar-service="yt" data-gedepiar-overlay width="560" height="315" src="" data-src="https://www.youtube-nocookie.com/embed/O4Z0o1cxAsw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Image-Overlay
<iframe data-gedepiar-service="yt" data-gedepiar-overlay-img="/absolute/path/to/your/image.jpg" width="560" height="315" src="" data-src="https://www.youtube-nocookie.com/embed/O4Z0o1cxAsw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Text-Overlay
<iframe data-gedepiar-service="vimeo" data-gedepiar-overlay width="560" height="315" src="" data-src="https://player.vimeo.com/video/305151042" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Image-Overlay
<iframe data-gedepiar-service="vimeo" data-gedepiar-overlay-img="/absolute/path/to/your/image.jpg" width="560" height="315" src="" data-src="https://player.vimeo.com/video/305151042" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Do you need other services? Add an individual service object to the init-Function (e. g. twitter).
const twitterService = {
alias : 'twitter',
category: 'comfort',
};
gedepiar.init({
services : ['phpsess','ga','gmap','yt',twitterService]
});
<blockquote class="twitter-tweet" data-gedepiar-service="twitter" data-gedepiar-overlay>
<p lang="en" dir="ltr">Sunsets don't get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>
— US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a>
</blockquote>
<script data-gedepiar-service="twitter" async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Attribute | Type | Default | Description |
---|---|---|---|
alias | string | Your unique service alias | |
category | string | Possibile options: comfort , mandatory , analyze |
Don't forget to add translations for your individual service. Look at translation section.
Do you need additional behavior? You can hook into the processes of the lib with callbacks:
onInit(elements,settings)
Executed once on page load
const twitterService = {
alias : 'twitter',
category: 'comfort',
onInit: function(elements,settings){
console.log('Execute onInit');
},
};
gedepiar.init({
services : ['phpsess','ga','gmap','yt',twitterService]
});
onActivate(elements,settings)
Executed on activation of service
const twitterService = {
alias : 'twitter',
category: 'comfort',
onActivate: function(elements,settings){
console.log('Execute onActivate');
},
};
gedepiar.init({
services : ['phpsess','ga','gmap','yt',twitterService]
});
onDisable(elements,settings)
Executed on deactivation of service
const twitterService = {
alias : 'twitter',
category: 'comfort',
onDisable: function(elements,settings){
console.log('Execute onDisable');
},
};
gedepiar.init({
services : ['phpsess','ga','gmap','yt',twitterService]
});
Would you like to overwrite a default translation entry? Add the i18n-Option to the init-Function.
Look at [PATH_TO_NODE_MODULES]/gedepiar/src/js/i18n/
for all possible entries.
gedepiar.init({
services : ['phpsess','ga','gmap','yt'],
i18n: {
de : {
ytHeadline: 'Lorem Ipsum',
},
{
en : {
ytHeadline: 'Lorem Ipsum',
}
}
});
Do you need another link for your imprint and data privacy?
gedepiar.init({
services : ['phpsess','ga','gmap','yt'],
i18n: {
de : {
dataPrivacyTarget: '/datenschutz-test',
dataPrivacyLabel: 'Datenschutz Test',
imprintTarget: '/impressum-test',
imprintLabel: 'Impressum Test',
},
{
en : {
dataPrivacyTarget: '/data-privacy-test',
dataPrivacyLabel: 'Data privacy test',
imprintTarget: '/imprint-test',
imprintLabel: 'Imprint test',
}
}
});
Following translation keys are mandatory if you add an individual service:
[INDIVIDUAL-SERVICE-ALIAS]Headline
[INDIVIDUAL-SERVICE-ALIAS]OverlayHeadline
(optional, is only needed if overlay is present)[INDIVIDUAL-SERVICE-ALIAS]OverlayContent
(optional, is only needed if overlay is present)[INDIVIDUAL-SERVICE-ALIAS]OverlayBtnLabel
(optional, is only needed if overlay is present)
The custom translation entries are merged with the default translation entries.
Twitter-Example:
gedepiar.init({
services : ['phpsess','ga','gmap','yt',twitterService],
i18n: {
de : {
twitterHeadline: 'Twitter',
twitterOverlayHeadline: 'Twitter is deaktiviert',
twitterOverlayContent: 'Das ist eine Beschreibung zum Twitter-Plugin',
twitterOverlayBtnLabel: 'Aktivieren',
},
{
en : {
twitterHeadline: 'Twitter',
twitterOverlayHeadline: 'Twitter',
twitterOverlayContent: 'A description about the Twitter-Plugin',
twitterOverlayBtnLabel: 'Activate',
}
}
});
The tool does not claim legal certainty. Please contact a lawyer for a legally compliant check of your web application.
This project is available under the MIT license.