Bloquer la Navigation sur Votre Site Tant que les Cookies ne sont pas Gérés avec CookieYes pour WordPress

Bloquez la Navigation sur Votre Site Tant que les Cookies ne sont pas Gérés avec CookieYes pour WordPress

Si vous cherchez à bloquer complètement la navigation sur votre site tant que l’utilisateur n’a pas pris une décision concernant les cookies, voici une solution efficace en utilisant le plugin CookieYes pour WordPress. Cet article vous explique comment mettre en place ce système facilement.

Pourquoi Bloquer la Navigation ?

Dans un contexte de conformité à la RGPD, il est essentiel de s’assurer que les cookies non essentiels ne soient pas activés avant d’avoir obtenu le consentement explicite de l’utilisateur. En bloquant la navigation, vous garantissez que l’utilisateur fait un choix clair concernant les cookies avant d’accéder au contenu du site.

Avec l’introduction du Google Consent Mode v2, CookieYes permet une gestion encore plus fine des scripts en fonction des catégories de consentement (comme les cookies analytiques ou publicitaires). Ce mode assure une meilleure conformité tout en rendant votre site plus adapté aux exigences des utilisateurs.

Le Code Fonctionnel

Voici une solution simple qui utilise jQuery pour bloquer la navigation tant que les cookies ne sont pas gérés.

<style>
.overlayCookie {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
/* Semi-transparent background */
justify-content: center;
align-items: center;
z-index: 99999;
/* Ensure it is above other content */
}
</style>

Dans header.php :

<div class="overlayCookie" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9999; display: block;">
<p style="color: white; text-align: center; margin-top: 20%;">Veuillez accepter ou refuser les cookies pour accéder au site.</p>
</div>

Dans footer.php :

<script>
$(document).ready(function() {


$(document).on('click', '.cky-btn', function() {
$('.overlayCookie').css('display', 'none');
});
});


function getCookie(key) {
const cookies = document.cookie
.split(";")
.reduce(
(ac, cv, i) =>
Object.assign(ac, {
[cv.split("=")[0].trim()]: cv.split("=")[1]
}), {}
)["cookieyes-consent"];


const {
[key]: value
} = cookies
.split(",")
.reduce(
(obj, pair) => (
(pair = pair.split(":")), (obj[pair[0]] = pair[1]), obj
), {}
);
return value;
}


if (getCookie("consent") == "yes" && getCookie("analytics") == "yes") {
const script = document.createElement("script");
$('.overlayCookie').css('display', 'none');
console.log("Ok on débloque cas accept all.");
//document.body.appendChild(script);
} else if (getCookie("consent") == "no" && getCookie("action") == "yes") {
const script = document.createElement("script");
$('.overlayCookie').css('display', 'none');
console.log("Ok on débloque cas reject all.");
//document.body.appendChild(script);
} else if (getCookie("consent") == "yes" && getCookie("action") == "yes") {
const script = document.createElement("script");
$('.overlayCookie').css('display', 'none');
console.log("Ok on débloque save preferences.");
//document.body.appendChild(script);
} else {
console.log("Aucun choix n'a encore été fait. Action bloquée.");
}
</script>

Explications du Code

1. Affichage d’un overlay bloquant :
   • Un overlay (élément ayant la classe .overlayCookie) est affiché par défaut.
   • L’utilisateur ne peut pas interagir avec le site tant qu’il n’a pas accepté ou refusé les cookies.
2. Cacher l’overlay au clic sur le bouton de consentement :
   • Le code utilise jQuery pour détecter le clic sur les boutons .cky-btn (ajoutés automatiquement par CookieYes).
   • Une fois cliqué, l’overlay est caché.
3. Fonction getCookie :
   • Cette fonction extrait les cookies gérés par CookieYes, en particulier le cookie cookieyes-consent.
   • Les données de consentement sont traitées pour extraire les préférences de l’utilisateur (état des catégories de cookies comme consent ou analytics).
4. Gestion des cas de consentement :
   • Cas 1 : Si consent = yes et analytics = yes, l’overlay est caché et des scripts tiers peuvent être chargés.
   • Cas 2 : Si consent = no et action = yes (utilisateur refuse tous les cookies), l’overlay est caché.
   • Cas 3 : Si l’utilisateur choisit de sauvegarder ses préférences, l’overlay est aussi caché.
   • Autres cas : Si aucun choix n’a encore été fait, l’overlay reste visible et l’action est bloquée.
5. Google Consent Mode v2 :
   • CookieYes utilise désormais le Google Consent Mode v2, qui permet de gérer les différents scripts en fonction du type de consentement accordé.
   • Par exemple, les cookies analytiques peuvent être désactivés tout en activant les cookies essentiels, ce qui donne plus de flexibilité aux utilisateurs.
6. Chargement conditionnel des scripts :
   • Le script peut être adapté pour charger dynamiquement des scripts tiers uniquement si le consentement est accordé.

Pourquoi Ce Code Est Utile ?

1. Conformité RGPD : En bloquant la navigation tant que l’utilisateur n’a pas fait de choix, vous vous conformez à la réglementation en matière de protection des données.
2. Gestion avancée avec Google Consent Mode v2 : Le Consent Mode v2 permet une gestion granulaire des cookies, améliorant la transparence et offrant une meilleure expérience utilisateur.
3. Expérience Utilisateur : Le blocage est clair et explicite, ce qui aide l’utilisateur à comprendre qu’il doit interagir avec la bannière des cookies.
4. Facilité d’implémentation : Ce code est simple à intégrer et peut être adapté à différents scénarios selon les besoins.

Conclusion

Avec cette solution et l’utilisation du Google Consent Mode v2 de CookieYes, vous pouvez garantir que votre site respecte les normes de consentement aux cookies tout en offrant une expérience utilisateur transparente. L’overlay agit comme un garde-fou jusqu’à ce que l’utilisateur prenne une décision. Adoptez cette approche pour éviter tout risque de non-conformité et améliorer la gestion des cookies sur votre site WordPress.