Consentl auf BigCommerce

Consentl auf BigCommerce per Script Manager oder im Stencil-Theme für strikte vorherige Blockierung installieren, Checkout PCI-konform halten, Catalyst nutzen.

Loader als erstes im <head>

Hängt von der Methode ab

Es gibt zwei Installationswege, je nachdem, wie strikt die vorherige Blockierung sein muss.

Entscheiden Sie vor beiden Methoden, was mit der eigenen Cookie-Einwilligung von BigCommerce geschehen soll: Settings → Security & Privacy → Your customers' privacy → Cookie consent tracking.

• Empfohlen: ausschalten. Consentl zeigt das Banner und hält nicht notwendige Skripte selbst zurück; wenn Sie beides behalten, würden zwei Banner angezeigt.
• Wenn Sie sie eingeschaltet lassen, gibt BigCommerce Script-Manager-Skripte der Kategorien Analytics, Functional oder Targeting; Advertising erst nach seiner eigenen Einwilligung aus, und die beiden Banner müssten synchron gehalten werden, was diese Anleitung nicht behandelt. Consentl selbst muss dann die Kategorie Essential haben, sonst würde es nie geladen.

Ihren Consentl-Website-Schlüssel finden Sie auf der Seite Einrichtung Ihrer Website im Dashboard. Tragen Sie den Hostnamen des Shops im Feld Domains ein; www. und die Domain ohne www zählen als dieselbe Website, www. muss also nicht separat hinzugefügt werden.

Was Ihr Consentl-Tarif abdeckt

• Free: Banner, Einwilligungsprotokoll und nur manuelle Blockierung.
• Pro: ergänzt Google Consent Mode v2.
• Business: ergänzt die automatische Blockierung bekannter Tracker und die Blockierungsregeln, die Sie im Dashboard hinzufügen.

In den Tarifen Free und Pro werden nur Tags zurückgehalten, die Sie manuell markieren.

A. Script Manager (Stencil-Storefronts)

1. Control Panel → Storefront → Script Manager → Create a Script.
2. Füllen Sie aus:
   • Name of script: Consentl
   • Location on page: Header
   • Select pages where script will be added: Store pages (Storefront-Seiten). Nicht All pages; siehe Checkout und My Account.
   • Script category: Essential
   • Script type: URL
   • Load method: Default. Niemals Async oder Defer: Der Loader muss synchron laufen.
   • Script URL: https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en (hängen Sie &gcm=ext an, wenn der Shop auch die Consentl-Vorlage für GTM verwendet, damit nur die Vorlage Consent-Mode-Befehle sendet)
   • Integrity Hash: leer lassen. Der Loader ändert sich, wenn Sie Einstellungen im Consentl-Dashboard ändern, daher würde der Browser ihn bei einem festen Hash ablehnen.
3. Save. Wegen des Cachings kann es etwa 20 Sekunden dauern, bis Änderungen erscheinen.
4. Testen Sie in einem privaten Fenster (siehe Prüfen, ob es funktioniert).

Der Script Manager begrenzt den Inhalt eines Skripts auf 64 KB. Der Loader ist ein einzeiliges URL-Skript.

Checkout und My Account

• BigCommerce verlangt für jedes Skript auf der Checkout-Seite einen SRI-Hash: „All scripts on the checkout page need at least one SRI hash to meet PCI 4.0 - 6.4.3 requirements“. Die Hilfe von BigCommerce dehnt dies auf die Seite My Account aus, wenn gespeicherte Karten aktiviert sind.
• Der Consentl-Loader kann keinen stabilen Hash haben, daher darf er dort nicht eingebunden werden. Deshalb ist oben Store pages voreingestellt, und deshalb muss Methode B den Loader aus dem Checkout heraushalten.
• Folglich zeigen der Checkout (und My Account bei gespeicherten Karten) kein Banner, und dort läuft keine Consentl-Laufzeit.
• Die Auswahl, die der Besucher in der Storefront getroffen hat, bleibt im First-Party-Cookie consentl gespeichert und wird auf der nächsten Storefront-Seite wieder angewendet. Consentl hält im Checkout selbst nichts zurück: Halten Sie nicht notwendige Skripte aus dem Checkout heraus (wählen Sie auch für sie Store pages) und prüfen Sie, was die Integrationen unter Settings → Data Solutions dort laden.
• Im Checkout und auf der Bestellbestätigung werden Skripte überhaupt nur mit Optimized One-Page Checkout ausgegeben.

B. Theme-Datei (wirklich als erstes)

1. Storefront → Themes: Wählen Sie bei Ihrem aktuellen Theme Advanced → Make a copy. BigCommerce lässt Theme-Dateien nur in einer Kopie bearbeiten. Öffnen Sie dann bei der Kopie Advanced → Edit Theme Files oder verwenden Sie die Stencil CLI.

2. Öffnen Sie templates/layout/base.html und fügen Sie den Loader direkt nach <head> ein, vor {{{head.scripts}}} und dem CSS des Themes:

   <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}} ist der dokumentierte Sprach-Helper. Cornerstone hat auch {{locale_name}}, das dort funktioniert, aber nicht in der Objektreferenz steht. Verwenden Sie eine feste Sprache wie en, wenn keiner von beiden das benötigte Format liefert.
   • Wenn Enable Nonce-Based Script Security aktiviert ist (Settings → Security & Privacy), fügen Sie dem Tag nonce="{{nonce}}" hinzu. Skripte, die Consentl nach der Einwilligung freigibt, benötigen dann ebenfalls die Nonce (geben Sie sie jedem Tag, das Sie manuell markieren) oder eine Policy mit 'strict-dynamic'; andernfalls blockiert der Browser sie.

3. Speichern und wenden Sie die Kopie an. Fügen Sie Consentl nicht zusätzlich über den Script Manager hinzu.

4. Theme-Updates ersetzen base.html: Fügen Sie die Zeile nach jedem Update erneut ein.

Fügen Sie den Loader nicht in Checkout-Templates ein (siehe Checkout und My Account). Öffnen Sie nach dem Anwenden des Themes die Checkout-Seite und prüfen Sie in der Quelltextansicht, dass der Loader dort nicht steht.

Fest eingetragene Tags

Ein <script src>, <img>-Pixel oder <iframe>, das in Theme-Dateien oder einem Script-Manager-Skript steht, wird vom Browser abgerufen, bevor ein Skript es aufhalten kann, auch wenn Consentl seine Ausführung verhindert. Markieren Sie solche Tags manuell und entfernen Sie <noscript>-Pixel:

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

Per Code geladene Tags (GTM, der JavaScript-Loader eines Pixels) werden ohne Anfrage zurückgehalten, wenn die automatische Blockierung aktiv ist (ab Tarif Business).

Link zum erneuten Öffnen und Einbettungen

• Links, deren URL auf #consentl oder #consentl-preferences endet, und jedes Element mit dem Attribut data-consentl-open öffnen die Einstellungen. Fügen Sie einen davon in die Fußzeile ein („Cookie-Einstellungen“).
• Die Einbettungen für Cookie-Erklärung, Datenschutzanfragen und EU-Widerruf funktionieren wie in der Anleitung für Websites beschrieben. Das Widerrufsformular erfordert den Tarif Pro oder höher und muss im Dashboard aktiviert werden; andernfalls bleibt es leer.

Content Security Policy

Wenn Sie Einschränkungen für script-src hinzugefügt haben (Settings → Security & Privacy → Content Security Policy), erlauben Sie https://api.consentl.com für script-src und connect-src.

Catalyst (Headless-Storefront mit Next.js)

Catalyst fügt Script-Manager-Skripte clientseitig und verzögert ein, daher stehen sie nie an erster Stelle. Folgen Sie der Next.js-Anleitung für den App Router, einschließlich ihrer Hinweise zu „als erstes im <head>“:

• core/app/[locale]/layout.tsx hat keinen expliziten <head>. Fügen Sie einen hinzu und setzen Sie Consentl wie in der Next.js-Anleitung gezeigt hinein: ein einfaches <script> als erstes Kindelement.
• app/not-found.tsx gibt ein eigenes <html> aus; fügen Sie Consentl auch dort ein.
• React 19 verschiebt async-Skripte über ein einfaches synchrones Skript, und next/script mit afterInteractive lässt den Browser das Tag vor der Einwilligung herunterladen. Fügen Sie jedes andere Tag, das auf eine Einwilligung warten muss, mit der Komponente ConsentlScript aus der Anleitung hinzu (type="text/plain" mit seiner Consentl-Kategorie), oder verwalten Sie es in Google Tag Manager.

Schalten Sie das Cookie consent tracking von BigCommerce aus. Catalyst 1.3 und neuer bringt ein eigenes Einwilligungsbanner mit (c15t): Entfernen oder deaktivieren Sie es, um zwei Banner zu vermeiden.

Prüfen, ob es funktioniert

Öffnen Sie die Storefront in einem privaten Fenster und sehen Sie sich den Quelltext an: Bei Methode B ist der Loader das erste Element im <head>. Das Banner erscheint. Der Entwicklungsserver der Stencil CLI gibt keine Script-Manager-Skripte aus, wohl aber Theme-Code.

Die Region des Besuchers ergibt sich aus seiner IP-Adresse: Consentl ermittelt das Land bei jedem Seitenaufruf im Arbeitsspeicher (nichts wird gespeichert) und wendet Ihre Dashboard-Regel dafür an. US-Bundesstaaten werden nicht unterschieden: Besucher aus den USA erhalten Ihre Regel für die gesamten USA oder, ohne eine solche, Ihre erste Regel für einen US-Bundesstaat. Ein unbekanntes Land erhält Ihre Regel für unbekannte Regionen (standardmäßig Opt-in).

Einschränkungen

• Der Script Manager steht nicht an erster Stelle. Die eigenen Head-Skripte des Themes und alle Script-Manager-Skripte, die BigCommerce vor Consentl ausgibt, laufen zuerst; ihre Reihenfolge innerhalb von {{{head.scripts}}} ist nicht dokumentiert. Verwenden Sie Methode B für eine strikte vorherige Blockierung. Consentl hält erkannte Tracker zurück, die nach ihm geladen werden (ab Tarif Business); in den Tarifen Free und Pro werden nur manuell markierte Tags zurückgehalten.
• Kein Banner im Checkout (und in My Account bei gespeicherten Karten); siehe Checkout und My Account.
• Die nativen Statistik-Integrationen von BigCommerce werden nicht von Consentl gesteuert (zum Beispiel die nativen Integrationen für GA4 oder Meta unter Settings → Data Solutions). Konfigurieren Sie sie so, dass sie Consent Mode folgen, oder ersetzen Sie sie durch Tags, die über GTM geladen werden.

Verwandte Anleitungen

• Jede Website (Snippet)
• Google Tag Manager
• Next.js

Kommen Sie nicht weiter? Schreiben Sie an support@consentl.com – wir antworten an Werktagen auf Englisch.