Skip to main content

Übersicht

Das Feature “Scripts & Consent” vereinfacht die Integration externer Skripte wie Tracking-Codes, Social Media Feeds oder Kundenchat-Widgets in deinen Online-Shop, und das völlig codefrei. Es gewährleistet, dass solche Einbindungen stets den Datenschutzvorschriften der DSGVO entsprechen. Mit dieser Funktion kannst du nicht nur externe Dienste leicht in deinen Shop integrieren, sondern auch CSS-Eigenschaften anpassen, um das Erscheinungsbild dieser Dienste nahtlos an dein Shop-Design anzupassen. Dieses Tool erleichtert die Personalisierung deines Shops und die Verbesserung des Kundenerlebnisses, während es gleichzeitig den Datenschutz respektiert.

Features

Flexible Script-Einbindung

Binde Skripte im Header, Footer, als Portlet oder per CSS-Selektor ein - je nach Anforderung des externen Dienstes.

DSGVO-Konformität

Erstelle Consent-Items und binde Skripte daran - so werden externe Dienste erst nach Zustimmung geladen.

Kein Code nötig

Integriere komplexe Skripte ohne Programmierkenntnisse durch intuitive Benutzeroberfläche.

CSS-Anpassungen

Passe das Erscheinungsbild externer Dienste mit Custom CSS an dein Shop-Design an.

Script-Einbindung

Script erstellen

Neues Script
1

Neues Script anlegen

Öffne den Tab Scripts & Consent und klicke auf “Neues Script hinzufügen”.
2

Script-Name vergeben

Vergebe einen eindeutigen, aussagekräftigen Namen für das Script, z.B. “Google Analytics” oder “Facebook Pixel”.
Wähle Namen, die du auch in 6 Monaten noch verstehst. Das hilft bei der späteren Verwaltung.
3

Position wählen

Wähle die passende Position für dein Script aus den vier verfügbaren Optionen.
4

Code einfügen

Füge die Code-Snippet des externen Dienstes in den schwarzen Codeblock ein.
5

An Consent binden (optional)

Entscheide, ob das Script DSGVO-konform erst nach Zustimmung geladen werden soll.
Ohne gesetzten Haken wird das Script immer geladen - auch ohne Zustimmung!
6

Script speichern

Klicke auf “Hinzufügen”, um das Script mit den gewählten Einstellungen zu speichern.

Ausgabetypen erklärt


Script-Einstellungen

Grundeinstellungen

script_name
string
required
Vergebe hier einen eindeutigen Namen für das Script, z.B. “Google Analytics Tracking” oder “Facebook Pixel”.
output_type
select
required
Wähle den Ausgabetyp:
  • Header - Für früh zu ladende Scripts/Styles
  • Footer - Für die meisten Scripts und schwebende Widgets
  • Portlet - Für flexible Platzierung im OPC
  • Selektor - Für dynamisches Einfügen in Template-Elemente
selector
string
Nur bei Ausgabetyp “Selektor”: CSS-Selektor als ID (#meine-id) oder Klasse (.meine-klasse)
code_block
code
required
Füge hier das Script oder CSS-Stylesheet ein. Unterstützt HTML, JavaScript und CSS.

Vorhandene Scripts

Vorhandene Scripts
Alle angelegten Scripts werden in der Tabelle unterhalb des Formulars aufgelistet. Die Tabelle zeigt auf einen Blick die wichtigsten Informationen zu jedem Script:
Name
string
Der vergebene Name des Scripts.
UID
string
Eindeutige ID des Scripts, wird automatisch aus dem Namen generiert.
Position
string
Der gewählte Ausgabetyp (z.B. Header, Footer, Portlet).
Selektor
string
Der CSS-Selektor, sofern der Ausgabetyp “Selektor” gewählt wurde.
Das verknüpfte Consent-Item. Ein Strich (–) bedeutet, das Script wird ohne Consent-Bindung geladen.
Über die Icons am Ende jeder Zeile kannst du ein Script bearbeiten oder löschen. Per Klick auf den Pfeil links öffnet sich die aufgeklappte Detailansicht mit dem hinterlegten Code.
Consent Item bearbeiten
Jedes Feld bietet zwei Eingabemöglichkeiten: einen direkten Textwert (links) und eine Sprachvariable (rechts). Du kannst beides kombinieren – wird eine Sprachvariable angegeben, hat sie Vorrang.
Sprachvariablen sind besonders praktisch für mehrsprachige Shops. Lege sie unter Sprachvariablen im Resources & Health Dashboard mit der Sektion “custom” an.
Formular zurücksetzen
button
Setzt alle Felder des Formulars auf ihre Ausgangswerte zurück.
Name
string
required
Name des Consent-Items, z.B. “Google Analytics”. Alternativ eine Sprachvariable im rechten Feld eintragen.
Beschreibung
string
required
Beschreibt, was der Dienst macht – wird dem Nutzer im Consent-Banner angezeigt. Alternativ Sprachvariable verwenden.
Zweck
string
required
Zweck der Datenerhebung, z.B. “Analyse des Nutzerverhaltens”. Alternativ Sprachvariable verwenden.
Link zur Datenschutzerklärung des Dienstes (optional). Alternativ Sprachvariable verwenden.
Unternehmen
string
required
Name des datenverarbeitenden Unternehmens, z.B. “Google Ireland Limited, Dublin, Irland”.
Speichern
button
Speichert das Consent-Item. Es steht anschließend in der Dropdown-Liste bei der Script-Konfiguration zur Verfügung.

Verwaltung

Consent-Item-Verwaltung
Hier findest du eine Übersicht zu allen angelegten Consent-Items:
  • Name und Details: Alle wichtigen Informationen auf einen Blick
  • Gebundene Scripts: Anzahl der Scripts, die an dieses Item gebunden sind
  • Bearbeiten: Klicke auf ein Item, um dessen Einstellungen anzupassen
  • Löschen: Hake Items an und klicke auf den gelben Button zum Entfernen
Achtung beim Löschen!Wenn du ein Consent-Item löschst, das an Scripts gebunden ist, werden diese Scripts automatisch ohne Consent-Abhängigkeit geladen. Prüfe vorher die Anzahl der gebundenen Scripts!

Best Practices

Grundregeln:
  • Alle Marketing- und Tracking-Scripts MÜSSEN an Consent-Items gebunden sein
  • Erstelle aussagekräftige Consent-Beschreibungen in einfacher Sprache
  • Verlinke immer auf die Datenschutzerklärung des Dienstes
  • Gib das verarbeitende Unternehmen vollständig an
Scripts ohne Consent: Nur technisch notwendige Scripts (z.B. Shop-Funktionalität) dürfen ohne Consent geladen werden.
Header sparsam nutzen: Nur kritische Scripts in den Header, da sie die Ladezeit beeinflussenAsync/Defer verwenden:
<script async src="..."></script>
<script defer src="..."></script>
Footer bevorzugen: Die meisten Scripts funktionieren auch im Footer und verbessern so die Performance
Klare Namen verwenden: “Google Analytics 4 - Tracking” statt “Script 1”Kommentare hinzufügen:
<!-- 
  Facebook Pixel
  Installiert am: 15.01.2024
  Verantwortlich: marketing@firma.de
  Property ID: 1234567890
-->
Änderungen dokumentieren: Notiere wichtige Änderungen als Kommentar im Code
Checklist:
  • Script lädt korrekt im gewählten Bereich
  • Consent-Bindung funktioniert (Script wird erst nach Zustimmung geladen)
  • Keine Fehler in der Browser-Konsole
  • Funktionalität des Scripts ist gegeben
  • Mobile Ansicht geprüft
  • Performance-Impact akzeptabel

Häufige Anwendungsfälle

Ausgabetyp: Header
Consent: Marketing/Analytics
<!-- Google Analytics 4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX', {
    'anonymize_ip': true,
    'cookie_flags': 'SameSite=None;Secure'
  });
</script>

Fehlerbehebung

Mögliche Ursachen:
  • Consent wurde noch nicht erteilt (prüfe Consent-Bindung)
  • JavaScript-Fehler blockiert Ausführung (Browser-Konsole prüfen)
  • Falscher Ausgabetyp gewählt
  • Script-URL ist nicht erreichbar
Lösung:
  1. Öffne die Browser-Konsole (F12)
  2. Prüfe auf Fehlermeldungen
  3. Teste ohne Consent-Bindung
  4. Prüfe, ob die externe URL erreichbar ist
Typische Probleme:
  • Abhängigkeiten fehlen (z.B. jQuery wird benötigt)
  • Script lädt zu früh/spät (Ausgabetyp ändern)
  • Konflikte mit anderen Scripts
  • Falsche Konfiguration im Script-Code
Lösung:
  1. Prüfe die Dokumentation des externen Dienstes
  2. Teste verschiedene Ausgabetypen (Header vs. Footer)
  3. Lade benötigte Bibliotheken zuerst
  4. Prüfe die Browser-Konsole auf Fehler
Häufige Ursachen:
  • Plugin-Cache nicht geleert
  • OPC-Cache aktiv
  • Falscher Ausgabetyp
Lösung:
  1. Leere den Plugin-Cache
  2. Leere den OPC-Cache
  3. Öffne den OPC-Editor neu
  4. Suche nach “Script Portlet” in der Portlet-Liste
Pro-Tipp: Erstelle eine Testseite in deinem Shop, auf der du neue Scripts erst testest, bevor du sie live schaltest. So vermeidest du Fehler auf produktiven Seiten.