Instantly share code, notes, and snippets.
Last active
May 26, 2018 00:16
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save simonfranzen/8d832e2bc02dc6716aaf05c15fe34ca9 to your computer and use it in GitHub Desktop.
Plain HTML Cookie Acceptor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Plain template from https://github.com/zauberware/acceptcookies --> | |
<div id='js_cookieNotice' class='cookieNotice'> | |
<div class='cookieNotice__container'> | |
<p>We use cookies to personalize content and ads, to offer features for social media and to analyze the access to our website. We also share information about your use of our website with our social media, weaving and analytics partners. Our partners may combine this information with other information that you have provided to them or that they have collected as part of your use of the Services. You accept our cookies when you click "Allow cookies" and continue to use this website.</p> | |
<a id='js_cookieNotice_accept' href='#'>Allow cookies</a> | |
<a id='js_cookieNotice_refuse' href='#'>Refuse</a> | |
<a href='/privacy-policy'>Privacy Policy</a> | |
</div> | |
</div> | |
<style type='text/css'> | |
.cookieNotice { | |
background: #444444; | |
display: none; | |
font-family: Helvetica Neue, sans-serif; | |
font-size: 100%; | |
line-height: 1.5; | |
left: 0; | |
padding: 12px 60px 12px 0; | |
position: fixed; | |
right: 0; | |
bottom: 0; | |
width: 100%; | |
border-bottom: 3px solid #999999; | |
color: #999999; | |
z-index: 100; | |
} | |
.cookieNotice__container { | |
margin: 0 auto; | |
max-width: 1140px; | |
width: 90%; | |
} | |
.cookieNotice__container * { | |
margin: 0 0.5em; | |
} | |
.cookieNotice__container > a{ | |
text-align: center; | |
text-decoration: none; | |
margin-top: 10px; | |
float: left; | |
background-color: #ff0000; | |
border: 0; | |
color: #ffffff; | |
display: inline-block; | |
padding: 14px 18px; | |
font-size: 13px; | |
font-weight: 600; | |
line-height: 1; | |
letter-spacing: 1.5px; | |
text-transform: uppercase; | |
background-image: #cccccc; | |
} | |
#js_cookieNotice_refuse, | |
.cookieNotice__container > a:last-child{ | |
background: #ffffff; | |
color: #16161f; | |
} | |
</style> | |
<script type='text/javascript'> | |
var elNotice = document.getElementById('js_cookieNotice') | |
var elAccept = document.getElementById('js_cookieNotice_accept') | |
var elRefuse = document.getElementById('js_cookieNotice_refuse') | |
// adding possibility to opt out only for analytics | |
var gaProperty = 'UA-XXX'; | |
var disableStr = 'ga-disable-' + gaProperty; | |
if (document.cookie.indexOf(disableStr + '=true') > -1) { | |
window[disableStr] = true; | |
} | |
function gaOptout() { | |
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'; | |
window[disableStr] = true; | |
} | |
function setCookie(name, value, days) { | |
var expiry = new Date() | |
expiry.setTime(expiry.getTime() + (days * 24 * 60 * 60 * 1000)) | |
var expires = 'expires=' + expiry.toUTCString() | |
document.cookie = name + '=' + value + ';' + expires + ';' + 'path=/' | |
} | |
function getCookie(name) { | |
var name = name + '=' | |
var decodedCookie = decodeURIComponent(document.cookie) | |
var ca = decodedCookie.split(';') | |
for(var i = 0; i < ca.length; i++) { | |
var c = ca[i] | |
while (c.charAt(0) == ' ') { | |
c = c.substring(1) | |
} | |
if (c.indexOf(name) == 0) return c.substring(name.length, c.length) | |
} | |
return false | |
} | |
function cookieIsSet() { | |
return getCookie('acceptCookies') | |
} | |
function showNotice() { | |
elNotice.style.display = 'block' | |
} | |
function hideNotice() { | |
elNotice.style.display = 'none' | |
} | |
function setAcceptCookie() { | |
setCookie('acceptCookies', '1', 365) | |
} | |
function loadExternalScripts() { | |
// load analytics | |
// your analytics code here... | |
// load iframes after accept | |
// convert data-src to src for iframes | |
var externalContents = document.querySelectorAll('[iframe-src]'); | |
if(externalContents[0]){ | |
for (var i = 0; i < externalContents.length; i++) { | |
var iframe = document.createElement('iframe'); | |
iframe.src = externalContents[i].getAttribute('iframe-src'); | |
iframe.frameborder = externalContents[i].getAttribute('frameborder'); | |
iframe.allowfullscreen = externalContents[i].getAttribute('allowfullscreen'); | |
// TODO convert more attribute or find better way to append all setted attributes and class to that element | |
externalContents[i].parentNode.replaceWith(iframe, externalContents[i]); | |
} | |
} | |
// Custom content | |
// ... your custom script here | |
} | |
window.onload = function() { | |
if (!cookieIsSet()) setTimeout(function() { showNotice() }, 2000); | |
else loadExternalScripts(); | |
elAccept.onclick = elAccept.ontouch = function(e) { | |
e.preventDefault(); | |
hideNotice(); | |
setAcceptCookie(); | |
loadExternalScripts(); | |
} | |
if(elRefuse){ | |
elRefuse.onclick = elRefuse.ontouch = function(e) { | |
e.preventDefault(); | |
hideNotice(); | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment