gedepiar

v0.5.7

Published

3 years ago

A dependency-free JavaScript-Tool for managing your cookies of your website/webapp. Based on GDPR-Guidelines.

Downloads

0High
0Medium
0Low

jaybee111

Gedepiar

A dependency-free Cookie-Banner for managing your website/webapp cookies and external resources. Based on GDPR-Guidelines

Installation

Installation via npm

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

Installation via cloning repo

Recommended step for projects without a task-runner or module bundler.

Open your shell and clone the repo git clone [email protected]:jaybee111/gedepiar.git
Execute npm run build
Switch to the newly created directory dist and copy gedepiar.min.js and gedepiar.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>

Usage

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 Maps gmap, PHP-Session Cookie phpsess, Matomo matomo, Youtube yt, Vimeo vimeo. 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.

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:

Google Maps

<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>

Google Analytics / Tag Manager

<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>

Matomo

<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>

Youtube

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>

Vimeo

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>

Individual service

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&#39;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&amp;ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>
    &mdash; 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>

Options

| 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.

Callbacks

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]
});

Translation

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',
        }
    }
});

Service translation

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',
        }
    }
});

Notes

The tool does not claim legal certainty. Please contact a lawyer for a legally compliant check of your web application.

License

This project is available under the MIT license.