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

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

Ausgabetyp wählen

Wähle den passenden Ausgabetyp für dein Script aus den vier verfügbaren Optionen.
4

Code einfügen

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

Consent konfigurieren (optional)

Entscheide, ob das Script DSGVO-konform erst nach Zustimmung geladen werden soll.

Ausgabetypen erklärt


Script-Einstellungen

Grundeinstellungen

Script Settings
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.

Consent Manager Options
1

Consent-Abhängigkeit aktivieren

Setze den Haken bei “Script zum Consent Manager hinzufügen”, wenn das Script erst nach Nutzer-Zustimmung geladen werden soll.
Ohne gesetzten Haken wird das Script immer geladen - auch ohne Zustimmung!
2

Consent-Item auswählen

Wähle aus der Dropdown-Liste das passende Consent-Item aus, z.B. “Marketing” oder “Analytics”.
Du kannst auch ein neues Consent-Item direkt hier erstellen, wenn noch keins passt.
3

Script speichern

Klicke auf “Hinzufügen”, um das Script mit den gewählten Einstellungen zu speichern.
Consent Item Creator
Direkteingabe der TexteTrage die Texte direkt in die entsprechenden Felder ein:
Name des Consent-Items, z.B. “Google Analytics” oder “Facebook Marketing”
description
text
required
Beschreibung des Consent-Items: Was macht dieser Dienst?Beispiel: “Google Analytics hilft uns zu verstehen, wie Besucher unsere Website nutzen, damit wir sie verbessern können.”
purpose
text
required
Zweck der DatenerhebungBeispiel: “Analyse des Nutzerverhaltens, Verbesserung der Website-Performance, A/B-Testing”
Link zur Datenschutzerklärung (optional)Beispiel:https://policies.google.com/privacy
company
string
required
Name des UnternehmensBeispiel: “Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland”
Consent-Item speichern Klicke auf “Speichern”, um das neue Consent-Item zu erstellen. Es steht anschließend in der Dropdown-Liste zur Verfügung.

Verwaltung

Consent Item Management 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!

Vorhandene Scripts

Script Overview Die Script-Übersicht zeigt dir:
  • Script-Name: Eindeutige Bezeichnung
  • Ausgabetyp: Header, Footer, Portlet oder Selektor
  • Consent-Status: Ob und an welches Consent-Item gebunden
  • Aktionen: Bearbeiten oder Löschen
Bearbeiten: Klicke auf ein Script, um alle Einstellungen zu ändern Löschen: Hake Scripts an und klicke auf den gelben Button

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.