• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

ReactJS - baner o ciasteczkach - obsługa GTM

Object Storage Arubacloud
0 głosów
64 wizyt
pytanie zadane 13 września 2023 w JavaScript przez devonnnn Nowicjusz (160 p.)

Cześć, 
Mam za zadanie przygotować baner informujący o korzystaniu z ciasteczek. Baner wygląda tak:

Mam problem ze zrozumieniem działania/logiki. 
Mam tag GTM-XXXXXX.
Mam taki kod React:
 

const [consent, setConsent] = useState({
        essential: true,
        analytics: false,
        marketing: false,
      });
    
      const [displayBanner, setDisplayBanner] = useState(false);
    
      useEffect(() => {
        const hasConsent = localStorage.getItem('cookieConsent');
        if (!hasConsent) {
          setDisplayBanner(true);
        }
      }, []);
    
      const handleConsentChange = (event) => {
        const { name, checked } = event.target;
        setConsent((prevConsent) => ({
          ...prevConsent,
          [name]: checked,
        }));
      };
    
      const handleAcceptAll = () => {
        setConsent({
          essential: true,
          analytics: true,
          marketing: true,
        });
    
        localStorage.setItem('cookieConsent', JSON.stringify(consent));
        setDisplayBanner(false);
    
        // Dodaj obsługę GTM - wywołaj zdarzenie lub przekaż dane do GTM
        // window.dataLayer = window.dataLayer || [];
        // window.dataLayer.push({
        //   'event': 'cookieConsentGiven',
        //   'consent': 'all',
        // });
      };
    
      const handleAcceptSelected = () => {
        localStorage.setItem('cookieConsent', JSON.stringify(consent));
        setDisplayBanner(false);
    
        // Dodaj obsługę GTM - wywołaj zdarzenie lub przekaż dane do GTM
        const selectedConsent = Object.keys(consent)
          .filter((key) => consent[key])
          .join(',');
        console.log("selectedConsent:", selectedConsent)
        // window.dataLayer = window.dataLayer || [];
        // window.dataLayer.push({
        //   'event': 'cookieConsentGiven',
        //   'consent': selectedConsent,
        // });
      };

      const handleReject = () => {
        console.log("odrzucam wzystkie")
        setDisplayBanner(false);
      };

Co zrobić gdy użytkownik zaakceptuje wszystkie zgody? Jak połączyć logikę tego banera z GTM? 
A co zrobić jeżeli użytkownik zaakceptuje jedynie niezbędne ciasteczka albo niezbędne + marketing (bez analizy)? 
Myślę że nie ja jeden się nad tym głowię więc może komuś też taka wiedza się przyda. 
Pozdrawiam :) 

P.S. Próbowałem wykorzystać chatGPT ale za dużo to on mi nie pomógł :/ 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 162 wizyt
pytanie zadane 3 września 2020 w JavaScript przez poldeeek Mądrala (5,980 p.)
+1 głos
1 odpowiedź 279 wizyt
0 głosów
2 odpowiedzi 1,083 wizyt

92,579 zapytań

141,432 odpowiedzi

319,664 komentarzy

61,964 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...