From d2c458913791581c0e30c591ae44fe33633e1020 Mon Sep 17 00:00:00 2001 From: Emil Miler Date: Mon, 27 Mar 2023 11:47:14 +0200 Subject: [PATCH] Add cookie modal and FB Pixel tracking This is a dirty and bloaty solution, but is faster than writing my own code for this. The tracking is not enabled unless our user accepts the cookie modal. --- index.html | 28 +++++++++-- static/js/cookieconsent-init.js | 89 +++++++++++++++++++++++++++++++++ static/js/cookieconsent.js | 7 +++ 3 files changed, 119 insertions(+), 5 deletions(-) create mode 100644 static/js/cookieconsent-init.js create mode 100644 static/js/cookieconsent.js diff --git a/index.html b/index.html index e704277..6c563f7 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,25 @@ + + + +
@@ -396,10 +412,12 @@
- - - - - + + + + + + + diff --git a/static/js/cookieconsent-init.js b/static/js/cookieconsent-init.js new file mode 100644 index 0000000..bf56566 --- /dev/null +++ b/static/js/cookieconsent-init.js @@ -0,0 +1,89 @@ +// obtain plugin +var cc = initCookieConsent(); + +// run plugin with your configuration +cc.run({ + current_lang: 'cs', + autoclear_cookies: true, // default: false + page_scripts: true, // default: false + + // mode: 'opt-in' // default: 'opt-in'; value: 'opt-in' or 'opt-out' + // delay: 0, // default: 0 + // auto_language: null // default: null; could also be 'browser' or 'document' + // autorun: true, // default: true + // force_consent: false, // default: false + // hide_from_bots: true, // default: true + // remove_cookie_tables: false // default: false + // cookie_name: 'cc_cookie', // default: 'cc_cookie' + // cookie_expiration: 182, // default: 182 (days) + // cookie_necessary_only_expiration: 182 // default: disabled + // cookie_domain: location.hostname, // default: current domain + // cookie_path: '/', // default: root + // cookie_same_site: 'Lax', // default: 'Lax' + // use_rfc_cookie: false, // default: false + // revision: 0, // default: 0 + + onFirstAction: function(user_preferences, cookie){ + // callback triggered only once + }, + + onAccept: function (cookie) { + // ... + }, + + onChange: function (cookie, changed_preferences) { + // ... + }, + + languages: { + 'cs': { + consent_modal: { + title: 'Cookies', + description: 'Tato stránka využívá analytické cookies, kterými sledujeme způsob využívání obsahu a návštěvnost. Zvolte, prosím, zda s jejich využitím souhlasíte.', + primary_btn: { + text: 'Souhlasím', + role: 'accept_all' // 'accept_selected' or 'accept_all' + }, + secondary_btn: { + text: 'Odmítám', + role: 'accept_necessary' // 'settings' or 'accept_necessary' + } + }, + settings_modal: { + title: 'Cookie preferences', + save_settings_btn: 'Save settings', + accept_all_btn: 'Accept all', + reject_all_btn: 'Reject all', + close_btn_label: 'Close', + cookie_table_headers: [ + {col1: 'Name'}, + {col2: 'Domain'}, + {col3: 'Expiration'}, + {col4: 'Description'} + ], + blocks: [ + { + title: 'Cookie usage 📢', + description: 'I use cookies to ensure the basic functionalities of the website and to enhance your online experience. You can choose for each category to opt-in/out whenever you want. For more details relative to cookies and other sensitive data, please read the full privacy policy.' + }, { + title: 'Strictly necessary cookies', + description: 'These cookies are essential for the proper functioning of my website. Without these cookies, the website would not work properly', + toggle: { + value: 'necessary', + enabled: true, + readonly: true // cookie categories with readonly=true are all treated as "necessary cookies" + } + }, { + title: 'Performance and Analytics cookies', + description: 'These cookies allow the website to remember the choices you have made in the past', + toggle: { + value: 'analytics', // your cookie category + enabled: false, + readonly: false + } + } + ] + } + } + } +}); diff --git a/static/js/cookieconsent.js b/static/js/cookieconsent.js new file mode 100644 index 0000000..3c0f2b4 --- /dev/null +++ b/static/js/cookieconsent.js @@ -0,0 +1,7 @@ +/*! + * CookieConsent v2.8.9 + * https://www.github.com/orestbida/cookieconsent + * Author Orest Bida + * Released under the MIT License + */ +!function(){'use strict';var n='initCookieConsent';'undefined'!=typeof window&&'function'!=typeof window[n]&&(window[n]=function(n){var t,e,o,i,r,c,a,u,f,d,v,s,l,b,p,m,y,w,g,h,_,k,x,O,j,S,T,J,N,D,C,I,E={mode:'opt-in',current_lang:'en',auto_language:null,autorun:!0,page_scripts:!0,hide_from_bots:!0,cookie_name:'cc_cookie',cookie_expiration:182,cookie_domain:window.location.hostname,cookie_path:'/',cookie_same_site:'Lax',use_rfc_cookie:!1,autoclear_cookies:!0,revision:0,script_selector:'data-cookiecategory'},U={},z={},R=null,A=!0,G=!1,L=!1,M=!1,P=!1,q=!1,B=!0,F=[],H=!1,K=[],Q=[],V=[],W=!1,X=[],Y=[],Z=[],$=[],nn=[],tn=document.documentElement,en=function(n){'number'==typeof(t=n).cookie_expiration&&(E.cookie_expiration=t.cookie_expiration),'number'==typeof t.cookie_necessary_only_expiration&&(E.cookie_necessary_only_expiration=t.cookie_necessary_only_expiration),'boolean'==typeof t.autorun&&(E.autorun=t.autorun),'string'==typeof t.cookie_domain&&(E.cookie_domain=t.cookie_domain),'string'==typeof t.cookie_same_site&&(E.cookie_same_site=t.cookie_same_site),'string'==typeof t.cookie_path&&(E.cookie_path=t.cookie_path),'string'==typeof t.cookie_name&&(E.cookie_name=t.cookie_name),'function'==typeof t.onAccept&&(u=t.onAccept),'function'==typeof t.onFirstAction&&(d=t.onFirstAction),'function'==typeof t.onChange&&(f=t.onChange),'opt-out'===t.mode&&(E.mode='opt-out'),'number'==typeof t.revision&&(t.revision>-1&&(E.revision=t.revision),q=!0),'boolean'==typeof t.autoclear_cookies&&(E.autoclear_cookies=t.autoclear_cookies),!0===t.use_rfc_cookie&&(E.use_rfc_cookie=!0),'boolean'==typeof t.hide_from_bots&&(E.hide_from_bots=t.hide_from_bots),E.hide_from_bots&&(W=navigator&&(navigator.userAgent&&/bot|crawl|spider|slurp|teoma/i.test(navigator.userAgent)||navigator.webdriver)),E.page_scripts=!0===t.page_scripts,'browser'===t.auto_language||!0===t.auto_language?E.auto_language='browser':'document'===t.auto_language&&(E.auto_language='document'),E.auto_language,E.current_lang=vn(t.languages,t.current_lang)},on=function(n){for(var t='accept-',e=a('c-settings'),o=a(t+'all'),i=a(t+'necessary'),r=a(t+'custom'),c=0;c0?Object.prototype.hasOwnProperty.call(t,E.current_lang)?E.current_lang:hn(t)[0]:void 0},cn=function(n){if(!0===t.force_consent&&_n(tn,'force--consent'),!m){m=dn('div');var e=dn('div'),o=dn('div');m.id='cm',e.id='c-inr-i',o.id='cm-ov',m.setAttribute('role','dialog'),m.setAttribute('aria-modal','true'),m.setAttribute('aria-hidden','false'),m.setAttribute('aria-labelledby','c-ttl'),m.setAttribute('aria-describedby','c-txt'),p.appendChild(m),p.appendChild(o),m.style.visibility=o.style.visibility='hidden',o.style.opacity=0}var i=t.languages[n].consent_modal.title;i&&(y||((y=dn('div')).id='c-ttl',y.setAttribute('role','heading'),y.setAttribute('aria-level','2'),e.appendChild(y)),y.innerHTML=i);var r=t.languages[n].consent_modal.description;q&&(r=B?r.replace('{{revision_message}}',''):r.replace('{{revision_message}}',t.languages[n].consent_modal.revision_message||'')),w||((w=dn('div')).id='c-txt',e.appendChild(w)),w.innerHTML=r;var c,a=t.languages[n].consent_modal.primary_btn,u=t.languages[n].consent_modal.secondary_btn;a&&(g||((g=dn('button')).id='c-p-bn',g.className='c-bn','accept_all'===a.role&&(c='all'),gn(g,'click',(function(){U.hide(),U.accept(c)}))),g.innerHTML=t.languages[n].consent_modal.primary_btn.text),u&&(h||((h=dn('button')).id='c-s-bn',h.className='c-bn c_link','accept_necessary'===u.role?gn(h,'click',(function(){U.hide(),U.accept([])})):gn(h,'click',(function(){U.showSettings(0)}))),h.innerHTML=t.languages[n].consent_modal.secondary_btn.text);var f=t.gui_options;k||((k=dn('div')).id='c-inr',k.appendChild(e)),_||((_=dn('div')).id='c-bns',f&&f.consent_modal&&!0===f.consent_modal.swap_buttons?(u&&_.appendChild(h),a&&_.appendChild(g),_.className='swap'):(a&&_.appendChild(g),u&&_.appendChild(h)),(a||u)&&k.appendChild(_),m.appendChild(k)),G=!0,on(k)},an=function(n){if(x)(J=dn('div')).id='s-bl';else{x=dn('div');var e=dn('div'),o=dn('div'),i=dn('div');O=dn('div'),j=dn('div');var r=dn('div');S=dn('button');var u=dn('div');T=dn('div');var f=dn('div');x.id='s-cnt',e.id='c-vln',i.id='c-s-in',o.id='cs',j.id='s-ttl',O.id='s-inr',r.id='s-hdr',T.id='s-bl',S.id='s-c-bn',f.id='cs-ov',u.id='s-c-bnc',S.className='c-bn',x.setAttribute('role','dialog'),x.setAttribute('aria-modal','true'),x.setAttribute('aria-hidden','true'),x.setAttribute('aria-labelledby','s-ttl'),j.setAttribute('role','heading'),x.style.visibility=f.style.visibility='hidden',f.style.opacity=0,u.appendChild(S),gn(e,'keydown',(function(n){27===(n=n||window.event).keyCode&&U.hideSettings(0)}),!0),gn(S,'click',(function(){U.hideSettings(0)}))}S.setAttribute('aria-label',t.languages[n].settings_modal.close_btn_label||'Close'),a=t.languages[n].settings_modal.blocks,c=t.languages[n].settings_modal.cookie_table_headers;var d=a.length;j.innerHTML=t.languages[n].settings_modal.title;for(var v=0;v-1?(L.checked=!0,!J&&Z.push(!0)):!J&&Z.push(!1),!J&&$.push(F),b.readonly?(L.disabled=!0,_n(M,'c-ro'),!J&&nn.push(!0)):!J&&nn.push(!1),_n(h,'b-acc'),_n(k,'b-bn'),_n(g,'b-ex'),h.id=E,h.setAttribute('aria-hidden','true'),G.appendChild(L),G.appendChild(M),G.appendChild(P),k.appendChild(G),w&&function(n,t,e){gn(R,'click',(function(){xn(t,'act')?(kn(t,'act'),e.setAttribute('aria-expanded','false'),n.setAttribute('aria-hidden','true')):(_n(t,'act'),e.setAttribute('aria-expanded','true'),n.setAttribute('aria-hidden','false'))}),!1)}(h,g,R)}else if(s){var H=dn('div');H.className='b-tl',H.setAttribute('role','heading'),H.setAttribute('aria-level','3'),H.insertAdjacentHTML('beforeend',s),k.appendChild(H)}if(s&&g.appendChild(k),l&&h.appendChild(_),!y&&void 0!==m){for(var K=document.createDocumentFragment(),Q=0;Q-1;if(!Z[++e]&&Object.prototype.hasOwnProperty.call(f,'cookie_table')&&(n||d)){var v=f.cookie_table,s=hn(c[0])[0],l=v.length;'on_disable'===f.toggle.reload&&d&&(H=!0);for(var b=0;b-1&&y.push(o[x])}y.length>0&&(wn(y,_,p),'on_clear'===f.toggle.reload&&(H=!0))}}}}},fn=function(n,t){return n.indexOf(t)},dn=function(n){var t=document.createElement(n);return'button'===n&&t.setAttribute('type',n),t},vn=function(n,t){return'browser'===E.auto_language?rn(sn(),n):'document'===E.auto_language?rn(document.documentElement.lang,n):'string'==typeof t?E.current_lang=rn(t,n):(E.current_lang,E.current_lang)},sn=function(){var n=navigator.language||navigator.browserLanguage;return n.length>2&&(n=n[0]+n[1]),n.toLowerCase()};U.allowedCategory=function(n){if(A&&'opt-in'!==E.mode)t=V;else var t=JSON.parse(yn(E.cookie_name,'one',!0)||'{}').categories||[];return fn(t,n)>-1},U.run=function(t){if(!document.getElementById('cc_div')){if(en(t),W)return;z=JSON.parse(yn(E.cookie_name,'one',!0)||'{}');var c=void 0!==(i=z.consent_uuid);if((e=z.consent_date)&&(e=new Date(e)),(o=z.last_consent_update)&&(o=new Date(o)),R=void 0!==z.data?z.data:null,q&&z.revision!==E.revision&&(B=!1),G=A=!(c&&B&&e&&o&&i),function(){(b=dn('div')).id='cc--main',b.style.position='fixed',b.style.zIndex='2147483647',b.innerHTML='\x3c!--[if lt IE 9 ]>
\x3c!--\x3e
\x3c!---1&&(_n(n,i),('bar'!==i||'middle'!==r[0])&&fn(e,r[0])>-1))for(var a=0;a-1&&_n(n,c)}}(t.gui_options),on(),E.autorun&&G&&U.show(t.delay||0),setTimeout((function(){_n(b,'c--anim')}),30),setTimeout((function(){var n,t;n=!1,t=!1,gn(document,'keydown',(function(e){'Tab'===(e=e||window.event).key&&(r&&(e.shiftKey?document.activeElement===r[0]&&(r[1].focus(),e.preventDefault()):document.activeElement===r[1]&&(r[0].focus(),e.preventDefault()),t||P||(t=!0,!n&&e.preventDefault(),e.shiftKey?r[3]?r[2]?r[2].focus():r[0].focus():r[1].focus():r[3]?r[3].focus():r[0].focus())),!t&&(n=!0))})),document.contains&&gn(b,'click',(function(n){n=n||window.event,M?O.contains(n.target)?P=!0:(U.hideSettings(0),P=!1):L&&m.contains(n.target)&&(P=!0)}),!0)}),100),A)'opt-out'===E.mode&&(E.mode,ln(V));else{var a='boolean'==typeof z.rfc_cookie;(!a||a&&z.rfc_cookie!==E.use_rfc_cookie)&&(z.rfc_cookie=E.use_rfc_cookie,mn(E.cookie_name,JSON.stringify(z))),v=pn(bn()),ln(),'function'==typeof u&&u(z)}}},U.showSettings=function(n){setTimeout((function(){_n(tn,'show--settings'),x.setAttribute('aria-hidden','false'),M=!0,setTimeout((function(){L?l=document.activeElement:s=document.activeElement,0!==Y.length&&(Y[3]?Y[3].focus():Y[0].focus(),r=Y)}),200)}),n>0?n:0)};var ln=function(n){if(E.page_scripts){var t=document.querySelectorAll('script['+E.script_selector+']'),e=n||z.categories||[],o=function(n,t){if(t-1){i.type='text/javascript',i.removeAttribute(E.script_selector);var c=i.getAttribute('data-src');c&&i.removeAttribute('data-src');var a=dn('script');if(a.textContent=i.innerHTML,function(n,t){for(var e=t.attributes,o=e.length,i=0;i0)for(var r=0;r0?n:t?30:0)},U.hide=function(){G&&(kn(tn,'show--consent'),m.setAttribute('aria-hidden','true'),L=!1,setTimeout((function(){s.focus(),r=null}),200))},U.hideSettings=function(){kn(tn,'show--settings'),M=!1,x.setAttribute('aria-hidden','true'),setTimeout((function(){L?(l&&l.focus(),r=X):(s&&s.focus(),r=null),P=!1}),200)},U.accept=function(n,t){var r=n||void 0,c=t||[],a=[];if(r)if('object'==typeof r&&'number'==typeof r.length)for(var s=0;s=1)for(s=0;s0)for(var r=0;r0&&un(),e||(e=new Date),i||(i=([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(n){try{return(n^(window.crypto||window.msCrypto).getRandomValues(new Uint8Array(1))[0]&15>>n/4).toString(16)}catch(n){return''}}))),z={categories:n,level:n,revision:E.revision,data:R,rfc_cookie:E.use_rfc_cookie,consent_date:e.toISOString(),consent_uuid:i},(A||F.length>0)&&(B=!0,o=o?new Date:e,z.last_consent_update=o.toISOString(),v=pn(bn()),mn(E.cookie_name,JSON.stringify(z)),ln()),A&&(E.autoclear_cookies&&un(!0),'function'==typeof d&&d(U.getUserPreferences(),z),'function'==typeof u&&u(z),A=!1,'opt-in'===E.mode)||('function'==typeof f&&F.length>0&&f(z,F),H&&window.location.reload())}(a)},U.eraseCookies=function(n,t,e){var o=[],i=e?[e,'.'+e]:[E.cookie_domain,'.'+E.cookie_domain];if('object'==typeof n&&n.length>0)for(var r=0;r-1&&(i+=' Domain='+E.cookie_domain+';'),'https:'===window.location.protocol&&(i+=' Secure;'),document.cookie=i},yn=function(n,t,e){var o;if('one'===t){if((o=(o=document.cookie.match('(^|;)\\s*'+n+'\\s*=\\s*([^;]+)'))?e?o.pop():n:'')&&n===E.cookie_name){try{o=JSON.parse(o)}catch(n){try{o=JSON.parse(decodeURIComponent(o))}catch(n){o={}}}o=JSON.stringify(o)}}else if('all'===t){var i=document.cookie.split(/;\s*/);o=[];for(var r=0;r