"Osano Cookie Consent" for opt-in registration of cookies (Google Analytics, YouTube, Pardot)

cookieconsent-config.js

// *********************************
// 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>