Comment ajouter un bandeau cookies à une application Angular

Où placer la balise dans Angular ?

Angular CLI génère la page HTML de l’application à partir du fichier désigné par l’option index d’angular.json, par défaut src/index.html. Le build injecte ses propres scripts dans cette page : une balise que vous écrivez dans son head passe donc avant eux.

html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Pourquoi pas l’option scripts d’angular.json ? Cette option prend des fichiers de votre projet et construit chacun d’eux en un bundle séparé, injecté par le CLI. La balise est un script distant dont les attributs portent les réglages : sa place est dans index.html, telle quelle. L’ajouter depuis un composant serait aussi trop tard : les composants s’exécutent après les balises de la page.

Comment bloquer mes balises jusqu’au consentement ?

Collez les balises de suivi sous la balise Cookiequiet dans src/index.html et modifiez la balise d’ouverture :

html
<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>

Cookiequiet les exécute quand la mesure d’audience 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 sur le blocage des scripts couvre les autres balises. Les scripts qu’une bibliothèque crée à l’exécution sont retenus par le bloqueur automatique quand ils viennent de l’un des quelque 80 traceurs qu’il connaît.

Comment le code Angular lit-il le choix ?

Cookiequiet émet un événement cq:consent sur window chaque fois qu’il applique un choix : un choix enregistré au chargement, un nouveau choix après un clic, et toutes les catégories dans les régions où le ciblage géographique n’affiche pas le bandeau. event.detail.categories liste les catégories accordées ; window.Cookiequiet.get() renvoie le choix en vigueur (catégories dans c, a: "geo" là où aucun bandeau n’est affiché) ou null tant qu’aucun choix ne s’applique. Un service construit sur un signal :

ts
// src/app/consent.service.ts
import { Injectable, signal } from "@angular/core";
​
@Injectable({ providedIn: "root" })
export class ConsentService {
  readonly granted = signal<string[]>((window as any).Cookiequiet?.get()?.c ?? []);
​
  constructor() {
    window.addEventListener("cq:consent", (e) =>
      this.granted.set((e as CustomEvent).detail.categories),
    );
  }
​
  has(category: string): boolean {
    return this.granted().includes(category);
  }
​
  openPreferences(): void {
    (window as any).Cookiequiet?.showPreferences();
  }
}

Dans un template :

html
@if (consent.has('marketing')) {
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Video"></iframe>
} @else {
  <button (click)="consent.openPreferences()">Allow videos</button>
}

Avec le rendu côté serveur, window n’existe pas sur le serveur : ne créez l’écouteur que dans le navigateur, par exemple derrière isPlatformBrowser.

Et les changements de route ?

Le routeur Angular change de vue sans recharger la page. La balise s’exécute une fois par chargement complet, le choix reste appliqué et le bandeau ne réapparaît pas. Les scripts marqués sont activés au chargement et après chaque choix : gardez-les donc dans index.html. Pour les pages vues par route, écoutez NavigationEnd :

ts
const consent = inject(ConsentService);
inject(Router).events
  .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
  .subscribe((e) => {
    if (consent.has("analytics")) sendPageView(e.urlAfterRedirects); // votre appel de mesure d’audience
  });

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

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

Cookiequiet gère les clics sur ce lien partout dans la page. Gardez un simple href, pas un routerLink.

Comment tester ?

1. Lancez ng build et servez le résultat, ou ng serve, puis affichez le code source de la page : cq.js est dans le head, avant les scripts du CLI.
2. Ouvrez l’application dans une fenêtre de navigation privée et cliquez sur Tout refuser : les cookies sont cq_consent et les vôtres.
3. Effacez les cookies, cliquez sur Tout accepter, rechargez : les balises marquées s’exécutent. Naviguez et vérifiez les pages vues.
4. Ouvrez 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.