Example for library Gdpr cookies 1.1.0 beta
https://github.com/ipatate/gdpr-cookies
Link
Vidéo FaceBook
Vidéo YouTube
Open modal cookies settings
diff --git a/README.md b/README.md index 2e5561e..b3f1e4e 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ gdpr-cookies.js 69ko (~19ko gzip) ## Add style in page ```html - + ``` ## Init Gdpr Cookie @@ -31,6 +31,7 @@ Set this code in the head of your page ```js ``` + Add your script service (see example google tag bellow ) ```js @@ -40,8 +41,8 @@ _gdpr.push([.....]); And use global function for init GdprCookie (footer) ```js -document.addEventListener('DOMContentLoaded', function() { - window.initGdprCookie.default('fr'); +document.addEventListener('DOMContentLoaded', function () { + window.initGdprCookie.default('fr'); }); ``` @@ -73,7 +74,7 @@ import sass files ## Declare external script -Push array in _gdpr array. +Push array in \_gdpr array. ```js _gdpr.push([ @@ -87,6 +88,7 @@ _gdpr.push([ ``` First element is object: + - name : string (unique and required) - type : string (type of service) required, default: Stats | Ads | Others - description : string (text for describe service) optional @@ -96,9 +98,10 @@ Second element is Array of Functions All the callback function called if service is allowed You can use argument helpers in function. -- ```createScript(src)``` for create script tag in head -- ```createStyle(href)``` for create style tag in head -- ```createIframe('id', {href: '', width: '200px'});``` for create iframe tag in target element. Add attribute for iframe with second argument options object + +- `createScript(src)` for create script tag in head +- `createStyle(href)` for create style tag in head +- `createIframe('id', {href: '', width: '200px'});` for create iframe tag in target element. Add attribute for iframe with second argument options object #### Example for google tag @@ -148,7 +151,6 @@ myCB.push(function(helpers){ return true;}); ``` - # Options for init Gdpr Cookie ## language @@ -162,12 +164,13 @@ var _gdpr_lang = 'fr'; ## options Gdpr Service ```js - var _gdpr_options = { - name: 'gdpr_cookie', // name of cookie gdpr - keepCookies: ['TEST'], // cookie not to delete - types: ['ads', 'stats', 'others'], // type of services - expires: 395, // cookie duration (in days) - }; +var _gdpr_options = { + name: 'gdpr_cookie', // name of cookie gdpr + keepCookies: ['TEST'], // cookie not to delete + types: ['ads', 'stats', 'others'], // type of services + expires: 395, // cookie duration (in days) + optout: true, // default undefined. If true, the services is optout. +}; ``` ## i18n messages @@ -177,7 +180,7 @@ If you want to add or define your messages, you can create a messages in your ht ```js var _gdpr_messages = { - fr: { + fr: { banner_title: "Information sur l'utilisation de cookies sur le site", alert_text: "En poursuivant votre navigation, vous acceptez l'utilisation de services tiers pouvant installer des cookies", @@ -199,7 +202,7 @@ var _gdpr_messages = { activate: 'activer', deactivate: 'désactiver', }, -} +}; ``` ## Add link for open modal (sorry for the onclick 😅) @@ -207,6 +210,7 @@ var _gdpr_messages = { ```js window._gdpr_showModal(); ``` + ex: ```html @@ -218,19 +222,23 @@ ex: Add just class (gdpr-mask) and name of service with data-gdpr. Ex: ```html -
+ ``` - # 🤓 Dev The code use : + - ES2018 - Webpack - Flow - Babel - For UI : - Preact @@ -241,6 +249,7 @@ For UI : # Browsers Compatibility - Desktop: + - Chrome 🆗 - Firefox 🆗 - Edge 🆗 diff --git a/dist/gdpr-cookies.js b/dist/gdpr-cookies.js index dc5b302..e7cd5c4 100644 --- a/dist/gdpr-cookies.js +++ b/dist/gdpr-cookies.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.initGdprCookie=e():t.initGdprCookie=e()}(self,(function(){var t={4746:function(t){t.exports=function(t,e,n){var r=e.content,o=e.attributes;return function(e){return t("svg",Object.assign({dangerouslySetInnerHTML:{__html:r}},o,e),e&&e.children)}}},1277:function(t,e,n){var r=n(4746);n=n(6400).h,t.exports=r.bind(null,n)},4794:function(t,e,n){n(9826),n=n(2649),t.exports=n("Array","find")},4370:function(t,e,n){n(8783),n(1038),n=n(857),t.exports=n.Array.from},3662:function(t,e,n){n(6992),n(1532),n(1539),n(8783),n=n(857),t.exports=n.Map},9116:function(t,e,n){n(9601),n=n(857),t.exports=n.Object.assign},8188:function(t,e,n){n(6992),n(1539),n(189),n(8783),n=n(857),t.exports=n.Set},9266:function(t,e,n){n(2222),n(1539),n(2526),n(2443),n(1817),n(2401),n(8722),n(2165),n(9007),n(6066),n(3510),n(1840),n(6982),n(2159),n(6649),n(9341),n(543),n(3706),n(408),n(1299),n=n(857),t.exports=n.Symbol},9662:function(t,e,n){var r=n(614),o=n(6330);t.exports=function(t){if(r(t))return t;throw TypeError(o(t)+" is not a function")}},6077:function(t,e,n){var r=n(614);t.exports=function(t){if("object"==typeof t||r(t))return t;throw TypeError("Can't set "+String(t)+" as a prototype")}},1223:function(t,e,n){var r=n(5112),o=n(30),i=(n=n(3070),r("unscopables")),c=Array.prototype;null==c[i]&&n.f(c,i,{configurable:!0,value:o(null)}),t.exports=function(t){c[i][t]=!0}},5787:function(t){t.exports=function(t,e,n){if(t instanceof e)return t;throw TypeError("Incorrect "+(n?n+" ":"")+"invocation")}},9670:function(t,e,n){var r=n(111);t.exports=function(t){if(r(t))return t;throw TypeError(String(t)+" is not an object")}},8457:function(t,e,n){"use strict";var r=n(9974),o=n(7908),i=n(3411),c=n(7659),a=n(4411),u=n(7466),s=n(6135),l=n(8554),f=n(1246);t.exports=function(t){var e=o(t),n=a(this),p=1<(t=arguments.length)?arguments[1]:void 0,d=void 0!==p;d&&(p=r(p,2