Скрыть баннер согласия на использование файлов cookie, если пользователи приняли файлы cookie

Мне удалось заставить работать баннер согласия на использование файлов cookie, когда файлы cookie не устанавливаются при загрузке страницы. Только после того, как пользователь нажмет кнопку «Принять», файлы cookie будут установлены и отображены в приложении инструмента разработки. После нажатия кнопки «Принять» баннер скрывается, но только временно. Потому что, когда я обновляю страницу или нажимаю на другую страницу, снова появляется баннер согласия на использование файлов cookie, даже если Пользователь уже принял файлы cookie.

Я пробовал кучу вещей и застрял в том, как я могу скрыть баннер после того, как пользователь принял файлы cookie.

Примечание. У меня есть собственный файл cookie, и я использую файлы cookie Google Tag Manager/Google Analytics.

Буду признателен за любую помощь в этом! Спасибо!

ГОЛОВНЫЕ СЦЕНАРИИ

<head>

<!-- Cookie Consent Banner -->
<script>
  window.dataLayer = window.dataLayer || []; 
  function gtag() {dataLayer.push(arguments);}
      gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied' });
</script>

<script async src = "https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script> 

<script>
  window.dataLayer = window.dataLayer || []; 
  function gtag() {dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'TAG_ID');
</script>

<script>
  function consentGranted() { 
      gtag('consent', 'update', { 'ad_storage': 'granted', 'analytics_storage': 'granted' });};
</script>
<script>
  function dismissCookieBanner() { 
      gtag('consent', 'update', { 'ad_storage': 'denied', 'analytics_storage': 'denied' });};
</script>
<!-- Cookie Consent Banner -->

</head>

HTML

<div role = "region" aria-label = "cookie-consent-banner" id = "cookie-banner">
<div class = "cookie-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class = "cookie-buttons">
     <button type = "button" class = "accept-cookies" onclick = "consentGranted()">Accept</button>
     <button type = "button" class = "dismiss-cookies" onclick = "dismissCookieBanner()">Dismiss</button>
</div>
</div>

ЯВАСКРИПТ

function consentGranted() {
    var cookieConsentBanner = $('#cookie-banner');
    if ( cookieConsentBanner.length ) {
        if ( Cookies.get('CUSTOM_COOKIE') != 'true' ) {
            var acceptCookieButton= cookieConsentBanner.find('.cookie-buttons .accept-cookies');    
            acceptCookieButton.on('click', function() {
                Cookies.set( 'CUSTOM_COOKIE', 'true', { expires: 365 } );
                cookieConsentBanner.remove();
            });
          };
        };
};

function dismissCookieBanner() {
    var cookieConsentBanner = $('#cookie-banner');
    var dismissCookieBanner= cookieConsentBanner.find('.cookie-buttons .dismiss-cookies');
        dismissCookieBanner.on('click', function() {
            cookieConsentBanner.remove();
        });
};
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
271
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я бы рекомендовал использовать localStorage для хранения данных о согласии на использование файлов cookie, а затем, как только страница загрузится, поместить баннер на экран, если ответ не был дан, иначе не размещать его. Пример:

function consentGranted() {
localStorage.setItem('consent', true)
    var cookieConsentBanner = $('#cookie-banner');
    if ( cookieConsentBanner.length ) {
        if ( Cookies.get('CUSTOM_COOKIE') != 'true' ) {
            var acceptCookieButton= cookieConsentBanner.find('.cookie-buttons .accept-cookies');    
            acceptCookieButton.on('click', function() {
                Cookies.set( 'CUSTOM_COOKIE', 'true', { expires: 365 } );
                cookieConsentBanner.remove();
            });
          };
        };
};

function dismissCookieBanner() {
localStorage.setItem('consent', false)
    var cookieConsentBanner = $('#cookie-banner');
    var dismissCookieBanner= cookieConsentBanner.find('.cookie-buttons .dismiss-cookies');
        dismissCookieBanner.on('click', function() {
            cookieConsentBanner.remove();
        });
};

document.getElementById('cookie-banner').hidden = localStorage.getItem('consent') != null
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>

<!-- Cookie Consent Banner -->
<script>
  window.dataLayer = window.dataLayer || []; 
  function gtag() {dataLayer.push(arguments);}
      gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied' });
</script>

<script async src = "https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script> 

<script>
  window.dataLayer = window.dataLayer || []; 
  function gtag() {dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'TAG_ID');
</script>

<script>
  function consentGranted() { 
      gtag('consent', 'update', { 'ad_storage': 'granted', 'analytics_storage': 'granted' });};
</script>
<script>
  function dismissCookieBanner() { 
      gtag('consent', 'update', { 'ad_storage': 'denied', 'analytics_storage': 'denied' });};
</script>
<!-- Cookie Consent Banner -->

</head>

<h1>My site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui vivamus arcu felis bibendum ut tristique et egestas quis. Nunc consequat interdum varius sit amet. Ac odio tempor orci dapibus. Eu consequat ac felis donec et odio pellentesque diam. Faucibus nisl tincidunt eget nullam. Aenean et tortor at risus viverra adipiscing at in. Lacinia at quis risus sed vulputate odio ut enim. Sagittis eu volutpat odio facilisis mauris sit amet massa. Maecenas volutpat blandit aliquam etiam erat velit scelerisque. Vitae tempus quam pellentesque nec nam. Vitae proin sagittis nisl rhoncus mattis rhoncus urna.
</p>

<div role = "region" aria-label = "cookie-consent-banner" id = "cookie-banner">
<div class = "cookie-text">Do you accept the cookie policy?</div>
<div class = "cookie-buttons">
     <button type = "button" class = "accept-cookies" onclick = "consentGranted()">Accept</button>
     <button type = "button" class = "dismiss-cookies" onclick = "dismissCookieBanner()">Dismiss</button>
</div>
</div>

JSFiddle

Другие вопросы по теме