cead-consent
Version:
A simple, extremely lightweight cookie and tracking consent manager
52 lines (43 loc) • 1.41 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Document</title>
<!-- inline tracking script -->
<script type="text/plain" data-cead>
console.log('inline tracking script');
</script>
<!-- external tracking script -->
<script data-src="https://example.com/tracking.js" data-cead></script>
</head>
<body>
<!-- image tracking pixel -->
<img data-src="https://example.com/tracking.jpg" data-cead alt="" class="display:none">
<!-- if you use a skip link it will go here -->
<!-- cead consent mananger after skip link -->
<div class="cead" role="region" aria-label="Cookie consent">
<p>Hi! Could we please enable some services and cookies to improve your experience and our website?</p>
<div class="cead__btns">
<button class="cead__btn cead__btn--decline">No, thanks.</button>
<button class="cead__btn cead__btn--accept">Okay!</button>
</div>
</div>
<!-- your page content-->
<main></main>
<!-- including browser package (simple) -->
<script>
window.cead = {
cookieName: 'consent'
};
</script>
<script src="dist/browser.js"></script>
<!-- importing using ES6 module (advanced) -->
<script type="module">
import Cead from 'dist/module.js';
new Cead({
cookieName: 'consent'
});
</script>
</body>
</html>