Consentl sur Framer

Ajoutez Consentl avec le code personnalisé « Start of <head> tag » de Framer, exécuté avant les scripts de Framer, et remplacez le composant Cookie Banner.

Chargeur en premier dans <head>: Selon la méthode

Le chargeur peut-il être en premier dans <head> ? Presque. Framer propose un emplacement « Start of <head> tag » qui place le chargeur avant les scripts propres à Framer ; seules les balises meta et charset de Framer le précèdent. L’environnement d’exécution de Framer est un <script type="module" async> dans le body. Il n’est pas différé, mais il s’exécute tout de même après un chargeur synchrone placé au début de <head>, car le chargeur vient en premier dans l’ordre du document. Cela fait de Framer l’outil de création sans code le plus proche de la configuration recommandée.

Prérequis

Un forfait de site payant avec un domaine personnalisé. Le code personnalisé ne s’exécute que sur le site publié.
Votre clé du site Consentl, sur la page Configuration de votre site dans le tableau de bord. Ajoutez le nom d’hôte du site dans le champ Domaines ; www. et le domaine nu comptent comme le même site : il est donc inutile d’ajouter www. séparément.

Ce que couvre votre forfait Consentl

Free : bannière, journal des consentements et blocage manuel uniquement.
Pro : ajoute Google Consent Mode v2.
Business : ajoute le blocage automatique des traceurs connus et les règles de blocage que vous ajoutez dans le tableau de bord.

Avec Free et Pro, seules les balises que vous marquez manuellement sont bloquées.

Installation

Dans le projet Framer, ouvrez Project Settings → Custom Code et ajoutez un snippet.
Collez :
```
<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
```
Si le site utilise aussi le modèle GTM de Consentl, ajoutez &gcm=ext à l’URL afin que seul le modèle envoie les commandes Consent Mode.
Placement : « Start of <head> tag ».
Pages : toutes les pages.
Run : Once. Framer navigue côté client, et la navigation côté client ne fait pas perdre la bannière. « Run on every page visit » injecterait à nouveau le chargeur à chaque navigation. Conservez une URL du chargeur identique sur chaque page.
Retirez le composant Cookie Banner de Framer de vos pages si vous l’utilisiez. Une seule bannière doit être active.
- Le composant Cookie Banner envoyait aussi les appels de valeurs par défaut et de mise à jour de Google Consent Mode. Si vos balises GTM ou Google en dépendaient, le Consent Mode de Consentl les remplace à partir du forfait Pro.
- Avec Free, il n’y a plus d’appels Consent Mode une fois le composant retiré. Marquez manuellement le snippet GTM ou Google (<script type="text/plain" data-consentl="analytics">…</script>, avec la catégorie qui correspond à ce qu’il charge) afin qu’il ne s’exécute qu’après le consentement.
Publish.
Facultatif : ajoutez au composant de pied de page un lien avec l’URL #consentl (« Paramètres des cookies »). Les liens dont l’URL se termine par #consentl ou #consentl-preferences, ainsi que tout élément portant l’attribut data-consentl-open, ouvrent les préférences.

Vérifier le fonctionnement

Testez le site en ligne dans une fenêtre de navigation privée. Le code personnalisé ne s’exécute ni dans le canevas ni dans l’aperçu.

La région du visiteur est déterminée à partir de son adresse IP : Consentl recherche le pays en mémoire à chaque affichage de page (rien n’est enregistré) et applique la règle correspondante de votre tableau de bord. Les États américains ne sont pas distingués : les visiteurs américains reçoivent votre règle pour l’ensemble des États-Unis ou, à défaut, votre première règle d’État américain. Un pays inconnu reçoit votre règle pour les régions inconnues (opt-in par défaut).

Langues

Les locales Framer partagent le code personnalisé de l’ensemble du site. Omettez &l=… pour utiliser la langue par défaut du tableau de bord, ou ajoutez le snippet par page ou par locale sous Page settings → Custom Code, en conservant une URL identique sur chaque page d’une même locale.

Utilisez un composant Embed (HTML) sur votre page de politique relative aux cookies :

<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="en"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>

Utilisez plutôt data-consentl-request ou data-consentl-withdrawal pour le formulaire de demande relative aux données personnelles ou le formulaire de rétractation UE. Le formulaire de rétractation nécessite le forfait Pro ou supérieur et doit être activé dans le tableau de bord ; sinon, il reste vide.
Framer rend le composant Embed sous forme d’intégration HTML. Vérifiez sur le site publié que le tableau s’affiche.
Si ce n’est pas le cas, créez plutôt un lien vers la déclaration relative aux cookies hébergée : https://api.consentl.com/p/SITE_KEY/cookies (une page publique, toujours synchronisée avec le tableau de bord ; ajoutez ?l=de pour une autre langue).

Limites

Les balises meta et charset propres à Framer précèdent toujours le snippet. Elles sont sans incidence.
Framer Analytics fonctionne sans cookies et est chargé par Framer ; Consentl ne le contrôle pas.
Les intégrations de suivi de Project Settings (Integrations), comme Google Analytics, sont injectées par Framer et peuvent ne pas être bloquées par Consentl. Préférez les balises Google via GTM, ou sous forme de code personnalisé placé après le snippet Consentl. Consentl bloque les traceurs reconnus qui se chargent après lui (à partir du forfait Business) ; avec Free et Pro, seules les balises que vous marquez manuellement sont bloquées.
Balises codées en dur. Un <script src>, un pixel <img> ou une <iframe> écrit dans le code personnalisé ou dans un Embed est récupéré par le navigateur avant qu’un script ne puisse l’arrêter, même lorsque Consentl l’empêche de s’exécuter. Marquez manuellement ces balises et supprimez les pixels <noscript> :
```
<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">
```
Les balises chargées par du code (GTM, le chargeur JavaScript d’un pixel) sont bloquées sans requête lorsque le blocage automatique est activé.

Vous êtes bloqué ? Écrivez à support@consentl.com — nous répondons en anglais les jours ouvrables.