JS - use cookie to store state on Google Ad Manager, hide element when close button is clicked

0 votes
5,971 views
added Apr 17, 2023 in Javascript by lcjr First Warrant Officer (11,930 points)
// To maintain the state of the 'ads-side-slide' element when the page is refreshed, you can use cookies to store the last state of the element that was clicked by the user. Here is the modified code that achieves this functionality:

<div class="ads-side-slide">
    <div class="ads-toggle"><img src="https://test.com/dfp/mrec_sideslide/staging/88x100-skyworld.jpg" /></div>
    <div class="ads-toggle-close">close x</div>
    <div class="box">
        <a href="%%CLICK_URL_UNESC%%https://test.com/pullout/preview.pdf" target="_blank">
            <img src="https://test.com/example/ads/300x250-mrec.jpg" />
        </a>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>
  $(document).ready(function () {
    var mrecCookie = getCookie('mrec_sideslide_cookie');
    if (mrecCookie === 'closed') {
      $('.ads-side-slide').removeClass('in').addClass('out');
    } else {
      $('.ads-side-slide').removeClass('out').addClass('in');
    }
  });
  
  $('.ads-toggle').click(function () {
    if ($('.ads-side-slide').hasClass('in')) {
        $('.ads-side-slide').removeClass('in').addClass('out');
        document.cookie = 'mrec_sideslide_cookie=closed; expires=' + new Date(Date.now() + 3 * 60 * 60 * 1000).toUTCString() + '; path=/';
    }
    else {
        $('.ads-side-slide').removeClass('out').addClass('in');
        document.cookie = 'mrec_sideslide_cookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
    }  
  });
  
  $('.ads-toggle-close').click(function () {
    $('.ads-side-slide').removeClass('in').addClass('out');
    document.cookie = 'mrec_sideslide_cookie=closed; expires=' + new Date(Date.now() + 3 * 60 * 60 * 1000).toUTCString() + '; path=/';
  });
  
  function getCookie(name) {
    var cookieArr = document.cookie.split(';');
    for (var i = 0; i < cookieArr.length; i++) {
      var cookiePair = cookieArr[i].split('=');
      if (name === cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
      }
    }
    return null;
  }
  </script>  

we first check the value of the 'mrec_sideslide_cookie' cookie when the page is loaded. If it has the value 'closed', we set the class of the 'ads-side-slide' element to 'out', which indicates that the element should be hidden. If the cookie has any other value or is not present, we set the class of the 'ads-side-slide' element to 'in', which indicates that the element should be visible.

When the user clicks on the 'ads-toggle' element, we first check if the 'ads-side-slide' element has the 'in' class. If it does, we remove the 'in' class and add the 'out' class to hide the element. We also set the 'mrec_sideslide_cookie' cookie to 'closed' with an expiration time of 3 hours. If the 'ads-side-slide' element has the 'out' class, we remove the 'out' class

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...