Ü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
Script-Name vergeben
Vergebe einen eindeutigen, aussagekräftigen Namen für das Script, z.B. “Google Analytics” oder “Facebook Pixel”.
Ausgabetypen erklärt
- Header
- Portlet
- Selektor
Verwendung: Scripte oder Styles, die möglichst früh aufgerufen werden sollenTypische Anwendungsfälle:
- Analytics-Tracking-Codes (Google Analytics, Matomo)
- Meta-Tags für Social Media
- CSS-Dateien, die vor dem Seitenaufbau geladen werden müssen
- Font-Loader
Script-Einstellungen
Grundeinstellungen
Vergebe hier einen eindeutigen Namen für das Script, z.B. “Google Analytics Tracking” oder “Facebook Pixel”.
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
Nur bei Ausgabetyp “Selektor”: CSS-Selektor als ID (#meine-id) oder Klasse (.meine-klasse)
Füge hier das Script oder CSS-Stylesheet ein. Unterstützt HTML, JavaScript und CSS.
Consent Manager Integration
Consent-Optionen
Consent-Abhängigkeit aktivieren
Setze den Haken bei “Script zum Consent Manager hinzufügen”, wenn das Script erst nach Nutzer-Zustimmung geladen werden soll.
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.
Neue Consent-Items erstellen
- Statischer Inhalt
- Sprachvariablen
Direkteingabe der TexteTrage die Texte direkt in die entsprechenden Felder ein:
Name des Consent-Items, z.B. “Google Analytics” oder “Facebook Marketing”
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.”
Zweck der DatenerhebungBeispiel: “Analyse des Nutzerverhaltens, Verbesserung der Website-Performance, A/B-Testing”
Link zur Datenschutzerklärung (optional)Beispiel: “https://policies.google.com/privacy”
Name des UnternehmensBeispiel: “Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland”
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
Vorhandene Scripts
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
Best Practices
DSGVO-Compliance sicherstellen
DSGVO-Compliance sicherstellen
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
Performance optimieren
Performance optimieren
Header sparsam nutzen:
Nur kritische Scripts in den Header, da sie die Ladezeit beeinflussenAsync/Defer verwenden:Footer bevorzugen:
Die meisten Scripts funktionieren auch im Footer und verbessern so die Performance
Dokumentation pflegen
Dokumentation pflegen
Klare Namen verwenden:
“Google Analytics 4 - Tracking” statt “Script 1”Kommentare hinzufügen:Änderungen dokumentieren:
Notiere wichtige Änderungen als Kommentar im Code
Testen vor dem Go-Live
Testen vor dem Go-Live
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
- Google Analytics 4
- Facebook Pixel
- Trustpilot Widget
- Userlike Chat
Ausgabetyp: Header
Consent: Marketing/Analytics
Consent: Marketing/Analytics
Fehlerbehebung
Script wird nicht geladen
Script wird nicht geladen
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
- Öffne die Browser-Konsole (F12)
- Prüfe auf Fehlermeldungen
- Teste ohne Consent-Bindung
- Prüfe, ob die externe URL erreichbar ist
Script lädt, funktioniert aber nicht
Script lädt, funktioniert aber nicht
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
- Prüfe die Dokumentation des externen Dienstes
- Teste verschiedene Ausgabetypen (Header vs. Footer)
- Lade benötigte Bibliotheken zuerst
- Prüfe die Browser-Konsole auf Fehler
Consent-Item erscheint nicht
Consent-Item erscheint nicht
Prüfe:
- Wurde das Consent-Item gespeichert?
- Ist es an ein Script gebunden?
- Cache geleert?
- Consent Manager aktiv im Template?
- Leere den Shop-Cache
- Prüfe unter “Consent-Item-Verwaltung” die Übersicht
- Stelle sicher, dass der JTL Consent Manager aktiviert ist
Portlet erscheint nicht im OPC
Portlet erscheint nicht im OPC
Häufige Ursachen:
- Plugin-Cache nicht geleert
- OPC-Cache aktiv
- Falscher Ausgabetyp
- Leere den Plugin-Cache
- Leere den OPC-Cache
- Öffne den OPC-Editor neu
- 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.