Consentl

Consentl op BigCommerce

Installeer Consentl op BigCommerce met Script Manager of in het Stencil-thema voor strikte voorafgaande blokkering, met een PCI-conforme checkout en Catalyst.

Loader als eerste in <head>
Hangt af van de methode

Er zijn twee manieren om te installeren, afhankelijk van hoe strikt de voorafgaande blokkering moet zijn.

Methode Als eerste in <head>? Inspanning
A. Script Manager Nee: het wordt gerenderd binnen {{{head.scripts}}}, na de CSS, lettertypen en head-scripts van het thema Geen code
B. Themabestand (base.html) Ja Thema bewerken; na thema-updates opnieuw toepassen

Bepaal vóór beide methoden wat u doet met de eigen cookietoestemming van BigCommerce: Settings → Security & Privacy → Your customers' privacy → Cookie consent tracking.

  • Aanbevolen: schakel die uit. Consentl toont de banner en houdt niet-essentiële scripts zelf tegen; als u beide behoudt, worden er twee banners getoond.
  • Als u die aan laat, rendert BigCommerce Script Manager-scripts van de categorieën Analytics, Functional of Targeting; Advertising pas na de eigen toestemming, en zouden de twee banners gesynchroniseerd moeten worden gehouden, wat deze handleiding niet behandelt. Consentl zelf moet dan de categorie Essential hebben, anders zou het nooit laden.

Uw Consentl-sitesleutel staat op de pagina Installatie van uw site in het dashboard. Voeg de hostnaam van de winkel toe in het veld Domeinen; www. en het kale domein tellen als dezelfde site, dus u hoeft www. niet apart toe te voegen.

Wat uw Consentl-plan omvat

  • Free: alleen banner, toestemmingslogboek en handmatige blokkering.
  • Pro: voegt Google Consent Mode v2 toe.
  • Business: voegt automatische blokkering van bekende trackers toe en de blokkeerregels die u in het dashboard toevoegt.

Bij Free en Pro worden alleen tags tegengehouden die u handmatig markeert.

A. Script Manager (Stencil-storefronts)

  1. Configuratiescherm → Storefront → Script Manager → Create a Script.
  2. Vul in:
    • Name of script: Consentl
    • Location on page: Header
    • Select pages where script will be added: Store pages (storefrontpagina's). Niet All pages; zie Checkout en My Account.
    • Script category: Essential
    • Script type: URL
    • Load method: Default. Nooit Async of Defer: de loader moet synchroon worden uitgevoerd.
    • Script URL: https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en (voeg &gcm=ext toe als de winkel ook het GTM-sjabloon van Consentl gebruikt, zodat alleen het sjabloon Consent Mode-opdrachten verstuurt)
    • Integrity Hash: leeg laten. De loader verandert wanneer u instellingen in het Consentl-dashboard wijzigt, dus een vaste hash zou ertoe leiden dat de browser hem weigert.
  3. Save. Door caching kan het ongeveer 20 seconden duren voordat wijzigingen verschijnen.
  4. Test in een privévenster (zie Controleren of het werkt).

Script Manager beperkt de inhoud van een script tot 64 KB. De loader is een URL-script van één regel.

Checkout en My Account

  • BigCommerce vereist een SRI-hash voor elk script op de checkoutpagina: "All scripts on the checkout page need at least one SRI hash to meet PCI 4.0 - 6.4.3 requirements". De help van BigCommerce breidt dit uit tot de pagina My Account wanneer opgeslagen kaarten zijn ingeschakeld.
  • De Consentl-loader kan geen stabiele hash hebben, dus hij mag daar niet worden geplaatst. Daarom is Store pages hierboven de standaard, en daarom moet methode B de loader buiten de checkout houden.
  • Als gevolg daarvan tonen de checkout (en My Account wanneer opgeslagen kaarten aan staan) geen banner en wordt daar geen Consentl-runtime uitgevoerd.
  • De keuze die de bezoeker in de storefront heeft gemaakt, wordt bewaard in de first-party cookie consentl en wordt op de volgende storefrontpagina opnieuw toegepast. Consentl houdt op de checkout zelf niets tegen: houd niet-essentiële scripts uit de checkout (selecteer ook voor die scripts Store pages), en controleer wat de integraties onder Settings → Data Solutions daar laden.
  • Scripts worden op de checkout en de orderbevestiging alleen gerenderd met Optimized One-Page Checkout.

B. Themabestand (echt als eerste)

  1. Storefront → Themes: kies bij uw huidige thema Advanced → Make a copy. BigCommerce laat u themabestanden alleen in een kopie bewerken. Open daarna bij de kopie Advanced → Edit Theme Files, of gebruik de Stencil CLI.

  2. Open templates/layout/base.html en plak de loader direct na <head>, vóór {{{head.scripts}}} en de CSS van het thema:

    <head>
    <script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l={{language_selector.active_language_code}}"></script>
    <title>{{ head.title }}</title>
    • {{language_selector.active_language_code}} is de gedocumenteerde taalhelper. Cornerstone heeft ook {{locale_name}}, dat daar werkt maar niet in de objectreferentie staat. Gebruik een vaste taal zoals en als geen van beide het formaat teruggeeft dat u nodig hebt.
    • Als Enable Nonce-Based Script Security aan staat (Settings → Security & Privacy), voeg dan nonce="{{nonce}}" toe aan de tag. Scripts die Consentl na de toestemming vrijgeeft, hebben dan ook de nonce nodig (geef die aan elke tag die u handmatig markeert) of een policy met 'strict-dynamic'; anders blokkeert de browser ze.

  3. Sla de kopie op en pas haar toe. Voeg Consentl niet ook via Script Manager toe.

  4. Thema-updates vervangen base.html: voeg de regel na elke update opnieuw toe.

Voeg de loader niet toe aan checkoutsjablonen (zie Checkout en My Account). Open na het toepassen van het thema de checkoutpagina en controleer met View Source dat de loader daar niet staat.

Vaste tags

Een <script src>, <img>-pixel of <iframe> die in themabestanden of een Script Manager-script staat, wordt door de browser opgehaald voordat een script hem kan tegenhouden, ook als Consentl voorkomt dat hij wordt uitgevoerd. Markeer zulke tags handmatig en verwijder <noscript>-pixels:

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

Tags die door code worden geladen (GTM, de JavaScript-loader van een pixel), worden zonder verzoek tegengehouden wanneer automatische blokkering aan staat (plan Business en hoger).

  • Links waarvan de URL eindigt op #consentl of #consentl-preferences, en elk element met het attribuut data-consentl-open, openen de voorkeuren. Voeg er een toe aan de footer ("Cookie-instellingen").
  • De embeds voor de cookieverklaring, privacyverzoeken en EU-herroeping werken zoals beschreven in de handleiding voor websites. Het herroepingsformulier vereist het plan Pro of hoger en moet in het dashboard worden ingeschakeld; anders blijft het leeg.

Content Security Policy

Als u script-src-beperkingen hebt toegevoegd (Settings → Security & Privacy → Content Security Policy), sta dan https://api.consentl.com toe voor script-src en connect-src.

Catalyst (headless Next.js-storefront)

Catalyst voegt Script Manager-scripts aan de clientkant en uitgesteld in, dus ze staan nooit als eerste. Volg de handleiding voor Next.js voor de App Router, inclusief de aanwijzingen voor "als eerste in <head>":

  • core/app/[locale]/layout.tsx heeft geen expliciete <head>. Voeg er een toe en plaats Consentl erin zoals de handleiding voor Next.js laat zien: een gewoon <script> als eerste kind.
  • app/not-found.tsx rendert een eigen <html>; voeg Consentl daar ook toe.
  • React 19 plaatst async-scripts boven een gewoon synchroon script, en next/script met afterInteractive laat de browser de tag vóór de toestemming downloaden. Voeg elke andere tag die op toestemming moet wachten toe met de component ConsentlScript uit de handleiding (type="text/plain" met zijn Consentl-categorie), of beheer hem in Google Tag Manager.

Schakel de cookie consent tracking van BigCommerce uit. Catalyst 1.3 en later heeft een eigen toestemmingsbanner (c15t): verwijder of schakel die uit om twee banners te voorkomen.

Controleren of het werkt

Open de storefront in een privévenster en bekijk de bron: met methode B is de loader het eerste element in <head>. De banner verschijnt. De ontwikkelserver van de Stencil CLI rendert geen Script Manager-scripts, maar wel themacode.

De regio van de bezoeker wordt afgeleid uit het IP-adres: Consentl zoekt bij elke paginaweergave het land op in het geheugen (er wordt niets opgeslagen) en past uw regel daarvoor uit het dashboard toe. Amerikaanse staten worden niet van elkaar onderscheiden: bezoekers uit de VS krijgen uw regel voor de hele VS of, als die er niet is, uw eerste regel voor een Amerikaanse staat. Voor een onbekend land geldt uw regel voor onbekende regio's (standaard opt-in).

Beperkingen

  • Script Manager staat niet als eerste. De eigen head-scripts van het thema en Script Manager-scripts die BigCommerce vóór Consentl afdrukt, worden eerst uitgevoerd; hun volgorde binnen {{{head.scripts}}} is niet gedocumenteerd. Gebruik methode B voor strikte voorafgaande blokkering. Consentl houdt herkende trackers tegen die na hem laden (plan Business en hoger); bij Free en Pro worden alleen tags tegengehouden die u handmatig markeert.
  • Geen banner op de checkout (en My Account met opgeslagen kaarten); zie Checkout en My Account.
  • Native analyse van BigCommerce wordt niet door Consentl beheerd (bijvoorbeeld de native GA4- of Meta-integraties onder Settings → Data Solutions). Stel ze zo in dat ze Consent Mode volgen, of vervang ze door tags die via GTM worden geladen.

Vastgelopen? Schrijf naar support@consentl.com — wij antwoorden op werkdagen in het Engels.