Cookie Consent / Javascript

Hello everyone,

I have developed a modal cookie consent.

That works more or less well. Unfortunately, I have no idea about Javascript and therefore need a good tip from you or, even better, a solution.

What works is that when the homepage is started, the cookie modal is loaded. A cookie is set after everything is confirmed.

So far so good, but I would like to be able to activate and deactivate “google analytics” using the checkbox. The cookie should be deleted.

the google opt-out is stored in the head, see picture:


and here is my script …

$(window).on('load',function(){
  "use strict";

  var cookieName = 'Cookie-Banner'; // The cookie name
  var cookieLifetime = 30; // Cookie expiry in days

  /**
   * Set a cookie
   * @param cname - cookie name
   * @param cvalue - cookie value
   * @param exdays - expiry in days
   */
  var _setCookie = function (cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  };

  /**
   * Get a cookie
   * @param cname - cookie name
   * @returns string
   */
  var _getCookie = function (cname) {
    var name = cname + "=";
    var ca = document.cookie.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 "";
  };
  
  /**
   * Should the cookie popup be shown?
   */
  var _shouldShowPopup = function () {
    if (_getCookie(cookieName)) {
      return false;
    } else {
      return true;
    }
  };

  // Show the cookie popup on load if not previously accepted
  if (_shouldShowPopup()) {
    $('#cookieModal').modal('show');
      
  }
    
  // Modal dismiss btn - consent settings
  $('#cookieModalConsentSettings').on('click', function () {
    _setCookie(cookieName, 1, cookieLifetime);

      
  });
  // Modal dismiss btn - consent
  $('#cookieModalConsent').on('click', function () {
    _setCookie(cookieName, 1, cookieLifetime);
              (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'); 

    ga('create', 'UA-7305457-13', 'auto'); 
    ga('set', 'anonymizeIp', true); 
    ga('send', 'pageview');
      
      
  });


var formValues = JSON.parse(localStorage.getItem('formValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");
var $button = $("#checkbox-container button");

function allChecked(){
  return $checkboxes.length === $checkboxes.filter(":checked").length;
}

function updateButtonStatus(){
  $button.text(allChecked()? "Uncheck all" : "Check all");
}

function handleButtonClick(){
  $checkboxes.prop("checked", allChecked()? false : true)
}

function updateStorage(){
  $checkboxes.each(function(){
    formValues[this.id] = this.checked;
  });

  formValues["buttonText"] = $button.text();
  localStorage.setItem("formValues", JSON.stringify(formValues));
}


$button.on("click", function() {
  handleButtonClick();
  updateButtonStatus();
  updateStorage();
    
});

$checkboxes.on("change", function(){
  updateButtonStatus();
  updateStorage();

});


// On page load
$.each(formValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

$button.text(formValues["buttonText"]);

});

I Hope someone can help me.

greetings Phil

This looks like a job for @kuligaposten :man_superhero:

that would be great

:slight_smile: