rc-consent
Version:
Cookie consent a Vanilla JS plugin which meets General Data Protection Regulations (GDPR).
319 lines (281 loc) • 13 kB
HTML
<html class="no-js" lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Angular Directive Cookie.</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation-float.css"/>
<script type="text/javascript" src="dist/rc-consent.min.js"></script>
<script type="text/javascript" id="rcc_consent_GA">
window.addEventListener("DOMContentLoaded", function() {
window.rcc.addProvider({
id: 'ga',
trackingId: 'UA-128378883-1',
anonymizeIp: true,
load: function() {
if (typeof ga === 'undefined') {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
}
},
onInitialise: function (rcc, status) {
console.log('GA Consent init');
if (rcc.hasConsented(this.category)) {
console.log('hasConsented: true');
this.load();
ga('create', this.trackingId, 'auto');
ga('set', 'anonymizeIp', this.anonymizeIp);
ga('send', 'pageview');
}
else {
console.log('hasConsented: false');
}
},
onAllow: function (rcc) {
console.log('GA consent allow:' + this.category);
this.load();
ga('create', this.trackingId, 'auto');
ga('set', 'anonymizeIp', this.anonymizeIp);
ga('send', 'event', 'Cookie Consent', 'Accepted');
ga('send', 'pageview');
},
onRevoke: function (rcc) {
console.log('GA consent revoke:' + this.category);
this.load();
ga('create', this.trackingId, {'storage': 'none'});
ga('send', 'event', 'Cookie Consent', 'Declined');
}
});
});
</script>
<script type="text/javascript" id="rcc_consent_ADS">
window.addEventListener("DOMContentLoaded", function() {
window.rcc.addProvider({
id: 'ads',
category: 'marketing',
onInitialise: function (rcc, status) {
console.log('ADS Consent init');
if (rcc.hasConsented(this.category)) {
console.log('hasConsented: true');
}
else {
console.log('hasConsented: false');
}
},
onAllow: function (rcc) {
console.log('ADS consent allow:' + this.category);
},
onRevoke: function (rcc) {
console.log('ADS consent revoke:' + this.category);
}
});
});
</script>
<script type="text/javascript" id="rcc_consent_hotjar">
window.addEventListener("DOMContentLoaded", function() {
window.rcc.addProvider({
id: 'hotjar',
category: 'required',
trackingId: 1070708,
load: function () {
if (typeof hj === 'undefined') {
(function(h,o,t,j,a,r,i){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:i,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=', undefined, undefined, this.trackingId);
}
},
onInitialise: function (rcc, status) {
console.log('HOTJAR Consent init');
if (rcc.hasConsented(this.category)) {
console.log('hasConsented: true');
this.load();
}
else {
console.log('hasConsented: false');
}
},
onAllow: function (rcc) {
console.log('HOTJAR consent allow:' + this.category);
this.load();
},
onRevoke: function (rcc) {
console.log('HOTJAR consent revoke:' + this.category);
}
});
});
</script>
<script>
window.addEventListener("DOMContentLoaded", function() {
window.rcc.initialise({cookie: {name: 'consent'}, defaultStatus: {required: true}});
});
</script>
<style>
/* Switch: source from https://materializecss.com/switches.html */
.switch, .switch * {
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.switch label {
cursor: pointer;
}
.switch label input[type=checkbox] {
opacity: 0;
width: 0;
height: 0;
}
.switch label input[type=checkbox]:checked + .lever {
background-color: #84c7c1;
}
.switch label input[type=checkbox]:checked + .lever:before, .switch label input[type=checkbox]:checked + .lever:after {
left: 18px;
}
.switch label input[type=checkbox]:checked + .lever:after {
background-color: #26a69a;
}
.switch label .lever {
content: "";
display: inline-block;
position: relative;
width: 36px;
height: 14px;
background-color: rgba(0, 0, 0, 0.38);
border-radius: 15px;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
margin: 0 16px;
}
.switch label .lever:before, .switch label .lever:after {
content: "";
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
left: 0;
top: -3px;
transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
}
.switch label .lever:before {
background-color: rgba(38, 166, 154, 0.15);
}
.switch label .lever:after {
background-color: #F1F1F1;
box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
transform: scale(2.4);
background-color: rgba(38, 166, 154, 0.15);
}
input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
transform: scale(2.4);
background-color: rgba(0, 0, 0, 0.08);
}
.switch input[type=checkbox][disabled] + .lever {
cursor: default;
background-color: rgba(0, 0, 0, 0.12);
}
.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
background-color: #949494;
}
</style>
</head>
<body data-ng-app="app" >
<!--[if lt IE 9]>
<div class="alert alert-warning browserupgrade">
You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
</div>
<![endif]-->
<main>
<div>
<br>
<div class="row">
<div class="small-12 medium-6 columns medium-centered">
<div class="reveal" id="consentModal" data-reveal data-close-on-click="false" data-close-on-esc="false">
<header class="row column">
<h4 class="page-header">This website uses cookies</h4>
</header>
<section class="row column">
<p>
We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. You consent to our cookies if you continue to use our website.
</p>
<form id="consent_form" novalidate name="consentForm" class="row cookie-form" >
<div class="small-4 column">
<strong>Necessary</strong>
<div class="switch">
<label>
Deny
<input type="checkbox" name="required" disabled>
<span class="lever"></span>
Allow
</label>
</div>
</div>
<div class="small-4 column">
<strong>Analytics</strong>
<div class="switch">
<label>
Deny
<input type="checkbox" name="analytics">
<span class="lever"></span>
Allow
</label>
</div>
</div>
<div class="small-4 column">
<strong>Marketing</strong>
<div class="switch">
<label>
Deny
<input type="checkbox" name="marketing">
<span class="lever"></span>
Allow
</label>
</div>
</div>
<input type="submit" class="button hollow float-right" value="Accept">
</form>
</section>
</div>
<p><button class="button float-center" data-open="consentModal" >Cookie Policy</button></p>
</div>
</div>
</div>
</main>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/js/foundation.js"></script>
<script type="text/javascript">
(function($, rcc) {
"use strict";
var $consentModal = $('#consentModal');
var $consentModalInstance = new Foundation.Reveal($consentModal);
//Check has consented
$( document ).ready(function() {
if (!rcc.hasConsented()) {
$consentModal.foundation('open');
}
});
//On Submit close modal
$('#consent_form').submit(function (e) {
rcc.setConsent($consentModal.get(0));
$consentModal.foundation('close');
return false;
});
//Init form field on Modal Open
$consentModal.on('open.zf.reveal', function () {
rcc.setForm($consentModal.get(0));
});
})(jQuery, rcc);
</script>
</body>
</html>