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