Comment ajouter un bandeau cookies à une application Ruby on Rails

Où placer la balise dans Rails ?

Rails rend chaque vue dans un layout, app/views/layouts/application.html.erb par défaut. Collez la balise dans son head, au-dessus des balises qui chargent votre JavaScript (javascript_importmap_tags avec importmap-rails, javascript_include_tag avec jsbundling-rails) :

erb
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "My app" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

La clé de site est publique (elle apparaît dans chaque page) : l’écrire dans le layout ne pose donc pas de problème. S’il existe d’autres layouts, par exemple pour les mailers ou une zone d’administration, n’ajoutez la balise qu’à ceux que voient les visiteurs.

Comment bloquer mes balises jusqu’au consentement ?

Collez les balises de suivi sous la balise Cookiequiet et modifiez leur balise d’ouverture :

html
<script type="text/plain" data-cq-category="marketing">
  /* code de base du pixel Meta, inchangé */
</script>

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 Meta Pixel montre le code de base complet, et le guide Google Analytics 4 la balise Google avec son alternative en Consent Mode. Pour ne les imprimer qu’en production, entourez-les de <% if Rails.env.production? %>. Les scripts que votre JavaScript ou 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.

Qu’est-ce qui change avec Turbo Drive ?

Turbo Drive, activé par défaut dans les nouvelles applications Rails, transforme les clics sur les liens en requêtes fetch. Le manuel de Turbo indique qu’il remplace le body par celui de la nouvelle page et fusionne les heads, et qu’un script du head ne s’exécute que la première fois qu’il apparaît. Trois conséquences :

• La balise s’exécute une fois par chargement complet et le choix enregistré reste appliqué d’une visite à l’autre.
• Les balises marquées ont leur place dans le head. Cookiequiet les active au chargement et après chaque choix, pas à chaque visite Turbo.
• Le conteneur du bandeau est ajouté au body, que Turbo remplace. Cookiequiet le replace dans le 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.

Pour le code qui s’exécute à chaque page, comme les pages vues, Turbo déclenche turbo:load après le premier chargement et après chaque visite ; envoyez-y la page vue seulement quand l’événement cq:consent que Cookiequiet émet sur window a accordé la mesure d’audience.

Comment autoriser Cookiequiet dans la Content Security Policy ?

Rails définit la politique dans config/initializers/content_security_policy.rb. Ajoutez l’origine aux deux directives dont le bandeau a besoin :

ruby
Rails.application.configure do
  config.content_security_policy do |policy|
    policy.script_src  :self, "https://cookiequiet.com"
    policy.connect_src :self, "https://cookiequiet.com"
  end
end

script-src charge cq.js ; connect-src couvre la configuration, la géolocalisation et les enregistrements de consentement. Si la politique utilise des nonces, donnez aux scripts inline marqués nonce="<%= content_security_policy_nonce %>" : Cookiequiet copie le nonce sur le script qu’il exécute après le consentement, et la politique le laisse donc passer.

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

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

Cookiequiet gère le clic et ouvre le centre de préférences ; data-turbo="false" empêche Turbo de le traiter comme une visite.

Comment tester ?

1. Lancez bin/rails server ou bin/dev, ouvrez l’application dans une fenêtre de navigation privée et affichez le code source : cq.js vient avant votre JavaScript.
2. Cliquez sur Tout refuser. Les cookies sont cq_consent et le cookie de session que dépose Rails (nommé d’après l’application, par exemple _myapp_session), qui est strictement nécessaire.
3. Effacez les cookies, rechargez, et suivez un lien avant de choisir : le bandeau reste visible.
4. Cliquez sur Tout accepter, rechargez : les balises marquées s’exécutent.
5. Consultez le registre des consentements dans le tableau de bord.

Il n’y a aucune gem à installer. 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.