ReactJS - baner o ciasteczkach - obsługa GTM

Wed, 13 Sep 2023 05:22:17 +0000

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ł :/

Forum Pasja Informatyki - Najnowsze z tagiem gtm

ReactJS - baner o ciasteczkach - obsługa GTM