Do swojej dyspozycji masz dwa sposoby na wykrycie i obsługę braku zgody na wybraną usługę:
Zarządzanie poprzez JavaScript
Po zatwierdzeniu zgód lub jej zmianie każdorazowo plugin CookieForm emituje event o nazwie ‘cookieform’. W ciele eventu znajduje się obiekt z listą plików Cookie oraz usługami na jakie użytkownik udzielił zgodę.
Aby wyświetlić listę plików Cookie oraz listę usług, na które użytkownik udzielił zgody:
document.addEventListener(’cookieform’, (e) => {
console.log(’Allowed cookies’, e.cookies);
console.log(’Allowed services’, e.services);
});
Aby sprawdzić czy wybrany plik cookie lub usługa zewnętrzna dostała zgodę od użytkownika:
document.addEventListener(’cookieform’, (e) => {
console.log(’Is cookie-acme-3 allowed?’, e.isCookieAllowed(’cookie-acme-3′));
console.log(’Is google fonts allowed?’, e.isServiceAllowed(’Google Fonts’));
});
Przykład wyświetlania informacji o braku zgody, w miejsce filmu z serwisu zewnętrznego na użycie którego nie dostaliśmy zgody od użytkownika:
<div id=”iframe-placeholder” style=”width: 400px; height: 150px; background: gray”>
Brak zgody na wyświetlanie filmów. Zmień zgody
<a href=”#” id=”open” type=”button” onclick=”CookieForm.openModal()”>otwórz nasz popup polityki prywatności</a>
</div>
<template id=”iframe-template”>
<iframe
src=”https://www.some-service-with-video.com/embed/id-video123″
></iframe>
</template>
<script>
document.addEventListener(’cookieform’, (e) => {
var placeholder = document.querySelector(’#iframe-placeholder’);
var template = document.querySelector(’#iframe-template’);
if(e.isServiceAllowed(‘Service with video’’)) { // or isCookieAllowed
placeholder.style.display = 'none’;
placeholder.parentNode.insertBefore(
template.content.cloneNode(true),
placeholder.nextSibling
)
} else {
placeholder.style.display = 'block’;
document.querySelector(’#iframe’).remove();
}
});
</script>
Zarządzenie wyświetlanych elementów w kodzie HTML
W plikach HTML możesz w prosty sposób zarządzać elementami szablonu w zależności od udzielonych zgód na pop-upie. W tym celu plugin Cookieform udostępnia 4 atrybuty tagów HTML:
- do obsługi zgód na skrypty zewnętrzne:
- data-cookieform-service-placeholder=”<nazwa usługi>”,
- data-cookieform-service-required=”<nazwa usługi>”,
- oraz do obsługi zgód na pliki Cookie:
- data-cookieform-placeholder=”<nazwa pliku Cookie>”,
- data-cookieform-required=”<nazwa pliku Cookie>”.
Placeholder
Atrybuty data-cookieform-service-placeholder i data-cookieform-required służą do wyświetlania zastępczej zawartości w razie braku zgody na dany element. Na przykład iframe z filmem lub baner reklamowy.
<template data-cookieform-service-placeholder=”Service with video„>
<div style=”width: 400px; height: 150px; background: gray”>
Brak zgody na wyświetlanie filmów. Zmień zgody
<a href=”#” id=”open” type=”button” onclick=”CookieForm.openModal()”>otwórz nasz popup polityki prywatności</a>
</div>
</template>
Required
Atrybuty data-cookieform-required i data-cookieform-service-required służą do blokowania możliwości wyświetlania danego elementu aż do momentu otrzymania zgody od użytkownika.
Przykład:
<template data-cookieform-service-required=”Service with video„>
<template id=”iframe-template”>
<iframe
src=”https://www.some-service-with-video.com/embed/id-video123″
></iframe>
</template>
</template>