Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
"Osano Cookie Consent" for opt-in registration of cookies (Google Analytics, YouTube, Pardot)
// *********************************
// Because of some drawbacks wrote everything from scratch w/out Osano: github.com/onza/CookieConsent
// *********************************
// head -------
// osano cookie banner css
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
// body -------
// youtube video button
<button onclick="showYoutubeVideo('c{data.uid}')">show video</button>
// c{data.uid} as example for video id for typo3 cms, any id is possible
// also add video overlay for this button and some explanatory text
// osano cookie consent script
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
// youtube banner overlay functions (can be outsourced to file)
function showYoutubeVideo(contentElementId) {
var yt_parent_div = document.getElementById(contentElementId)
var yt_iframe = yt_parent_div.querySelector('iframe');
var yt_overlay_div = yt_parent_div.querySelector('.js-ytbanner');
yt_iframe.src = yt_parent_div.dataset.yt_video_src;
yt_overlay_div.style.visibility = "hidden";
}
function hideYoutubeVideo(contentElementId) {
var yt_parent_div = document.getElementById(contentElementId)
var yt_iframe = yt_parent_div.querySelector('iframe');
var yt_overlay_div = yt_parent_div.querySelector('.js-ytbanner');
yt_iframe.src = "";
yt_overlay_div.style.visibility = "visible";
}
function showAllYoutubeVideos() {
var yt_divs = Array.from(document.getElementsByClassName("youtubevideo"));
yt_divs.forEach(function (yt_parent_div) {
showYoutubeVideo(yt_parent_div.id);
});
}
function hideAllYoutubeVideos() {
var yt_divs = Array.from(document.getElementsByClassName("youtubevideo"));
yt_divs.forEach(function (yt_parent_div) {
hideYoutubeVideo(yt_parent_div.id);
});
}
// google analytics script
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXXX-X"></script>
// cookies opt-in
<script>
function deletePardotScripts () {
deleteScriptIncluding("pardot.com");
}
function deleteScriptIncluding(includeText) {
let htmlCollection = document.getElementsByTagName('script');
let scriptElements = Array.prototype.slice.call( htmlCollection );
scriptElements.forEach(sc => {
if (sc.src.includes(includeText)) {
sc.remove();
}
})
}
function loadPardotScript () {
piAId = 'xxxxx';
piCId = 'xxxx';
piHostname = 'pi.pardot.com';
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = ('https:' == document.location.protocol ? 'https://pi' : 'http://cdn') + '.pardot.com/pd.js';
var c = document.getElementsByTagName('script')[0];
c.parentNode.insertBefore(s, c);
}
function loadGoogleAnalytics () {
window['ga-disable-UA-XXXXXXXXXXX-X'] = false;
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXXXX-X', { 'anonymize_ip': true });
}
function disableGoogleAnalytics () {
// disable google analytics, existing cookies will not be deleted
// existing cookies will neither be updated nor sent to google
// see: https://developers.google.com/analytics/devguides/collection/gtagjs/user-opt-out
window['ga-disable-UA-XXXXXXXXXXX-X'] = true;
// if we remove the script and then the user activates the cookies, the script will not be added to dom
// we have to add the script manually. Therefore we don't delete the script
// deleteScriptIncluding("google-analytics");
}
let cookieconsent_status = false;
function hasStatusChanged(newStatus) {
return newStatus !== cookieconsent_status;
}
window.cookieconsent.initialise({
onInitialise: function (status) {
if (!this.hasConsented()) {
hideAllYoutubeVideos();
disableGoogleAnalytics();
} else {
loadPardotScript();
showAllYoutubeVideos();
loadGoogleAnalytics();
cookieconsent_status = true;
}
},
onStatusChange: function(status, chosenBefore) {
let consented = this.hasConsented();
if (!hasStatusChanged(consented)) {
if (!consented) {
// because when user clicked on youtube banner button
// video might be already shown although cookieconsent status was not consented
// but we always want to hide the video again, if user denies the cookieconsent
hideAllYoutubeVideos();
}
return;
}
cookieconsent_status = consented;
if (consented) {
showAllYoutubeVideos();
loadGoogleAnalytics();
loadPardotScript();
} else {
hideAllYoutubeVideos();
disableGoogleAnalytics();
deletePardotScripts();
}
},
onRevokeChoice: function() {
// do nothing, just show panel
},
// Initialise cookie consent banner
"palette": {
"popup": {
"background": "#000000",
"text": "#ffffff"
},
"button": {
"background": "#f1d600",
"text": "#ffffff"
}
},
"theme": "edgeless",
"position": "bottom-right",
"type": "opt-in",
"content": {
"message": "Wir nutzen Cookies auf unserer Website. Diese Cookies helfen uns, diese Website zu verbessern.",
"dismiss": "verstanden",
"allow": "akzeptieren",
"deny": "ablehnen",
"link": "weitere Informationen",
"href": "http://kunde.com/datenschutz",
"policy": "Cookie Einstellungen"
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment