Comment ajouter un bandeau cookies à une application Laravel

Où placer la balise dans Laravel ?

Les pages Laravel partagent un layout Blade : un composant comme resources/views/components/layout.blade.php rendu avec <x-layout>, ou une vue parente comme resources/views/layouts/app.blade.php que les vues enfants nomment avec @extends. Collez la balise dans le head de ce layout, au-dessus de @vite et de tout autre script :

blade
{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cookiequiet.com/cq.js" data-site="{{ config('services.cookiequiet.site') }}" data-consent-mode="1" data-auto-block="1" defer></script>
    <title>{{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    @yield('content')
</body>
</html>

Gardez la clé dans la configuration. Ajoutez COOKIEQUIET_SITE=your-key à .env et lisez-la dans config/services.php :

php
'cookiequiet' => [
    'site' => env('COOKIEQUIET_SITE'),
],

La documentation de Laravel prévient qu’une fois php artisan config:cache exécuté, le fichier .env n’est plus chargé et env() ne renvoie que les variables d’environnement du système : il ne faut donc l’appeler que dans les fichiers de configuration. Appeler config() dans la vue évite un data-site vide en production.

Si l’application a plusieurs layouts (un layout invité pour les pages de connexion, un layout applicatif pour les utilisateurs connectés), placez la balise dans chacun, ou dans un partial qu’ils incluent tous avec @include.

Comment bloquer mes balises jusqu’au consentement ?

Collez les balises de suivi sous la balise Cookiequiet et modifiez leur balise d’ouverture. La directive Blade @production les tient à l’écart des environnements local et de préproduction :

blade
@production
<script type="text/plain" data-cq-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/plain" data-cq-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>
@endproduction

Cookiequiet exécute les balises marquées quand la catégorie est accordée, et d’emblée lors des visites suivantes où le choix enregistré l’inclut. Le guide Google Analytics 4 couvre l’alternative du Consent Mode et le guide Meta Pixel le pixel. Les balises poussées depuis des vues enfants avec @push dans une stack du head fonctionnent de la même façon, tant que la stack est imprimée sous la balise Cookiequiet. Les scripts ajoutés à l’exécution par JavaScript sont retenus par le bloqueur automatique quand ils viennent de l’un des quelque 80 traceurs qu’il connaît.

Et Livewire et Inertia ?

Livewire avec wire:navigate. La documentation de Livewire indique que les scripts du head ne s’exécutent qu’à la première visite : la balise s’exécute donc une fois et le choix enregistré reste appliqué. Elle indique aussi que tout le body est remplacé à chaque visite. Le conteneur du bandeau vit dans le body, et Cookiequiet le replace dans chaque nouveau body : un bandeau en attente de réponse, le bouton des préférences et showPreferences() continuent donc de fonctionner sans code supplémentaire.

Gardez les balises marquées dans le head du layout, et écoutez livewire:navigated, qui se déclenche après chaque navigation et au premier chargement, pour le code qui envoie des pages vues.

Inertia. Le template racine (resources/views/app.blade.php avec @inertiaHead) reçoit la balise au-dessus de @vite. Les pages sont des composants React ou Vue : lisez-y le choix comme le montrent les guides React et Vue, avec l’événement cq:consent que Cookiequiet émet sur window chaque fois qu’il applique un choix.

Comment ajouter le lien Préférences de cookies ?

Dans le partial du pied de page :

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Comment tester ?

1. Lancez une fois php artisan config:cache pour vérifier que la clé est toujours rendue, puis affichez le code source de la page : cq.js est le premier script du head.
2. Ouvrez le site dans une fenêtre de navigation privée et cliquez sur Tout refuser. Les cookies sont cq_consent, votre cookie de session et XSRF-TOKEN : ces deux derniers sont propres à Laravel, déposés pour chaque visiteur, et strictement nécessaires.
3. Effacez les cookies, cliquez sur Tout accepter, rechargez : les balises marquées s’exécutent.
4. Avec wire:navigate, ouvrez une deuxième page avant de choisir : le bandeau reste visible.
5. Consultez le registre des consentements dans le tableau de bord.

Une Content Security Policy doit autoriser https://cookiequiet.com dans script-src et connect-src. Cookiequiet est gratuit pour un site, ciblage géographique compris ; Starter coûte 3 € par site et par mois, avec des pages vues illimitées.