Kostenlos startenDashboard
Dokumentation

Skript einbinden

Cookiemark läuft über ein einziges Script-Tag. Auf dieser Seite erfahren Sie, wohin dieses Tag gehört, warum die Position wichtig ist und wie Sie es auf den Plattformen einbinden, die unsere Kunden am häufigsten nutzen.

Website anlegen und die Zeile kopieren

  1. Melden Sie sich an und öffnen Sie Websites, dann Website hinzufügen. Geben Sie die Adresse ein, die Ihre Besucher verwenden, zum Beispiel shop.example.com.
  2. Öffnen Sie die Website. Der Tab Installation zeigt die Zeile für diese Website, mit dem eigenen Website-Schlüssel in der Adresse.
  3. Fügen Sie die Zeile in Ihre Website ein, wie unten für Ihre Plattform beschrieben.
  4. Wählen Sie Design und Texte und klicken Sie dann auf Veröffentlichen. Das Banner erscheint beim nächsten Seitenaufruf.

Die Zeile sieht so aus, mit Ihrem eigenen Schlüssel statt YOUR-SITE-KEY:

<script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>

Sie können die Zeile einfügen, bevor Sie etwas veröffentlichen. Bis zur ersten Veröffentlichung lädt das Skript, findet nichts Veröffentlichtes und zeigt nichts an. Sie können die Zeile also schon heute auf eine Live-Website setzen und das Design morgen fertigstellen.

Warum die Zeile ganz oben im Head steht

Das Skript erledigt zwei Dinge, die passieren müssen, bevor irgendein anderes Skript läuft. Es teilt Google mit, dass noch nichts erlaubt ist, und es beginnt, die Seite auf Tracker zu überwachen, die es zurückhalten muss. Ein Skript, das früher läuft, hat seine Arbeit schon erledigt, wenn Cookiemark geladen wird.

Fügen Sie die Zeile deshalb als erstes Skript in den <head> jeder Seite ein. Setzen Sie sie über Google Tag Manager, Analytics, Pixel und Chat-Widgets.

<head>
  <meta charset="utf-8">
  <script src="https://cdn.cookiemark.com/s/YOUR-SITE-KEY.js"></script>
  <!-- Google Tag Manager, analytics and every other script come after this line -->
  ...
</head>

Lassen Sie das Tag, wie es ist. Fügen Sie weder async noch defer hinzu, denn beides lässt andere Skripte zuerst laufen. Das Skript ist klein: etwa 19 KB nach der Komprimierung, dazu Ihre eigenen Einstellungen.

Halten Sie Optimierungstools davon fern

Tools, die Skripte verzögern, zurückstellen oder zusammenfassen, verändern die Reihenfolge, die Sie festgelegt haben. Nehmen Sie das Cookiemark-Skript davon aus. Suchen Sie nach einer Einstellung wie „exclude from delay“, „exclude from combine“ oder ähnlich. Verbreitet sind WP Rocket, LiteSpeed Cache, Autoptimize und Cloudflare Rocket Loader.

Wenn Sie eine Änderung veröffentlichen

Beim Speichern im Dashboard bleibt Ihre Änderung ein Entwurf. Besucher sehen sie, nachdem Sie auf Veröffentlichen geklickt haben. Jede Veröffentlichung wird zu einer neuen Version, und im selben Moment leeren wir den CDN-Cache für Ihr Skript. Besucher erhalten die neue Version innerhalb von etwa einer Minute, weil Browser das Skript 60 Sekunden lang vorhalten.

Reines HTML

Fügen Sie die Zeile auf jeder Seite direkt nach dem öffnenden <head>-Tag ein. Wenn Ihre Seiten eine gemeinsame Header-Datei oder Vorlage nutzen, fügen Sie sie dort einmal ein. Prüfen Sie danach einige Seiten, denn von Hand gebaute Websites haben oft Seiten mit einer anderen Vorlage.

WordPress

Nutzen Sie unser Plugin. Es setzt das Skript ganz oben in den Head, hält WP Rocket, LiteSpeed, Autoptimize und Cloudflare Rocket Loader davon fern, leert beim Speichern den Seiten-Cache und teilt Plugins, die die WP Consent API nutzen, die Auswahl des Besuchers mit.

  1. Laden Sie das Plugin im Tab Installation Ihrer Website in Cookiemark herunter.
  2. Öffnen Sie in WordPress Plugins, Neues Plugin hinzufügen, Plugin hochladen und wählen Sie die Datei aus.
  3. Öffnen Sie Einstellungen, Cookiemark und klicken Sie auf Connect with Cookiemark.
  4. Melden Sie sich bei Cookiemark an, falls Sie dazu aufgefordert werden, und wählen Sie die Website aus oder legen Sie sie neu an. Danach landen Sie wieder in WordPress.
  5. Veröffentlichen Sie die Website in Cookiemark. Danach erscheint das Banner auf jeder Seite.

Beim Verbinden wird außerdem die WordPress-Adresse zu den Domains der Website hinzugefügt und der Pfad eingetragen, unter dem das Plugin das Einwilligungs-Cookie von Ihrem eigenen Server setzt, damit Safari die Auswahl für die volle Laufzeit behält. Wenn Sie die Schaltfläche nicht verwenden können, fügen Sie stattdessen die Zeile aus dem Tab Installation in das Feld Site key des Plugins ein.

Sie möchten lieber kein Plugin installieren? Dann fügen Sie die Zeile von Hand ein:

  • Im Theme. Öffnen Sie die header.php eines Child-Themes und fügen Sie die Zeile direkt nach <head> ein, oberhalb von wp_head(). Bearbeiten Sie ein Child-Theme, denn ein Theme-Update überschreibt Änderungen am Parent-Theme.
  • Mit einem Plugin. Ein Plugin, das Code in den Head einfügt, funktioniert ebenfalls. Geben Sie dem Snippet die höchste Priorität, die es anbietet, damit es über den Skripten landet, die andere Plugins über wp_head() hinzufügen.

Leeren Sie anschließend den Seiten-Cache Ihres Caching-Plugins, Ihres Hosters und Ihres CDN. Sonst bekommen Besucher weiterhin Seiten aus der Zeit vor der Änderung. Nehmen Sie das Skript von Optimierungs-Plugins aus, wie oben beschrieben.

Shopify

  1. Öffnen Sie in Ihrem Shopify-Adminbereich Onlineshop und dann Themes.
  2. Öffnen Sie neben Ihrem aktuellen Theme das Menü und wählen Sie Code bearbeiten.
  3. Öffnen Sie layout/theme.liquid und fügen Sie die Zeile direkt nach <head> ein.
  4. Speichern Sie und öffnen Sie Ihren Shop in einem privaten Fenster, um zu prüfen, ob das Banner erscheint.

Es gibt zwei Einschränkungen. Der Checkout von Shopify verwendet Ihr Theme nicht, daher läuft das Skript dort nicht. Und Cookiemark gibt die Auswahl des Besuchers noch nicht an die Customer Privacy API von Shopify weiter.

Webflow

  1. Öffnen Sie Ihr Projekt und gehen Sie zu Site settings, dann Custom code.
  2. Fügen Sie die Zeile ganz oben in Head code ein, über allem anderen in diesem Feld.
  3. Speichern Sie und veröffentlichen Sie die Website aus Webflow heraus.

Webflow fügt benutzerdefinierten Code nur mit einem kostenpflichtigen Site-Plan in eine veröffentlichte Website ein. Wenn Sie auch auf einzelnen Seiten Head-Code hinzufügen, prüfen Sie im Seitenquelltext, ob die Cookiemark-Zeile weiterhin zuerst kommt.

Wix

  1. Öffnen Sie in der Verwaltung Ihrer Website Einstellungen und dann Benutzerdefinierter Code.
  2. Wählen Sie Benutzerdefinierten Code hinzufügen und fügen Sie die Zeile ein.
  3. Wenden Sie ihn auf alle Seiten an, platzieren Sie ihn im Head und lassen Sie ihn auf jeder neuen Seite laden.

Für benutzerdefinierten Code braucht Wix ein Premium-Paket mit verbundener Domain. Außerdem lädt Wix seine eigenen Skripte vor Ihren, und diese Reihenfolge lässt sich nicht ändern. Cookiemark kann das Banner zeigen und die Skripte zurückhalten, die Sie hinzufügen, aber nicht das, was Wix selbst vorher lädt. Schalten Sie das Cookie-Banner von Wix ab, damit Besucher nur ein Banner sehen.

Squarespace

  1. Öffnen Sie Einstellungen, dann Erweitert oder Entwickler-Tools, dann Code-Injektion.
  2. Fügen Sie die Zeile ganz oben in das Feld Header ein und speichern Sie.

Code-Injektion ist nicht in jedem Squarespace-Tarif enthalten, prüfen Sie also zuerst Ihren. Schalten Sie das Cookie-Banner ab, das Squarespace selbst anbietet, damit Besucher nicht zwei sehen.

Google Tag Manager

Laden Sie Cookiemark nicht über Tag Manager. Ein Tag in Ihrem Container läuft erst, nachdem der Container gestartet ist, und das ist zu spät, um die Consent-Mode-Standardwerte für Google zu setzen oder irgendetwas zurückzuhalten. Fügen Sie die Zeile stattdessen in den Head ein und wählen Sie für den Container selbst einen dieser beiden Wege.

  • Lassen Sie Cookiemark den Container laden. Geben Sie Ihre Container-ID im Tab Google und GTM ein und entfernen Sie Ihr eigenes Tag-Manager-Snippet. Cookiemark lädt den Container dann direkt nach den Consent-Mode-Standardwerten, sodass die Reihenfolge nicht schiefgehen kann.
  • Behalten Sie Ihr eigenes Snippet. Lassen Sie die Container-ID leer und behalten Sie Ihr Snippet unterhalb der Cookiemark-Zeile.

Tun Sie nie beides. Ein Container, der zweimal lädt, löst jedes Tag zweimal aus. Google Tag Manager behandelt die Trigger und Events in Ihrem Container.

Prüfen, ob es funktioniert

  1. Öffnen Sie Ihre Website in einem privaten Fenster, damit Sie ohne gespeicherte Auswahl beginnen. Das Banner sollte erscheinen.
  2. Sehen Sie sich den Seitenquelltext an und suchen Sie nach cdn.cookiemark.com. Es sollte das erste Skript im Head sein.
  3. Starten Sie einen Scan im Tab Scan. Er meldet Seiten ohne das Skript und einen Cache, der noch eine alte Kopie Ihrer Seiten ausliefert.

Wenn ein Scan Ihr Skript auf der Website findet, erhält die Domain das Label Verifiziert. Geplante Scans laufen nur für Websites mit einer verifizierten Domain.

Mehr als eine Domain

Das Einwilligungsprotokoll nimmt nur Auswahlen von den Domains Ihrer Website und deren Subdomains an. Wenn dasselbe Banner auf einer anderen Domain läuft, fügen Sie diese unter Einstellungen, Domains hinzu. Damit eine Auswahl für alle Subdomains gilt, geben Sie im selben Tab Ihre Hauptdomain unter Auswahl für alle Subdomains übernehmen ein.