> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Scripts & Consent

## Ü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.

<iframe width="100%" height="400" src="https://www.youtube.com/embed/HUg6CJ9RqOo" title="Scripts & Consent Tutorial" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

<br />

## Features

<CardGroup cols={2}>
  <Card title="Flexible Script-Einbindung" icon="code" color="#0285c7">
    Binde Skripte im Header, Footer, als Portlet oder per CSS-Selektor ein - je nach Anforderung des externen Dienstes.
  </Card>

  <Card title="DSGVO-Konformität" icon="shield-check" color="#16a34a">
    Erstelle Consent-Items und binde Skripte daran - so werden externe Dienste erst nach Zustimmung geladen.
  </Card>

  <Card title="Kein Code nötig" icon="wand-magic-sparkles" color="#7c3aed">
    Integriere komplexe Skripte ohne Programmierkenntnisse durch intuitive Benutzeroberfläche.
  </Card>

  <Card title="CSS-Anpassungen" icon="palette" color="#ea580c">
    Passe das Erscheinungsbild externer Dienste mit Custom CSS an dein Shop-Design an.
  </Card>
</CardGroup>

<br />

## Script-Einbindung

### Script erstellen

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/pB0BE1NCq1ZwmQYz/images/script-consent-neues-script.jpg?fit=max&auto=format&n=pB0BE1NCq1ZwmQYz&q=85&s=acb88f568ce26b743c99a5a35639f746" alt="Neues Script" width="2114" height="1134" data-path="images/script-consent-neues-script.jpg" />
  </Frame>
</div>

<Steps>
  <Step title="Neues Script anlegen">
    Öffne den Tab **Scripts & Consent** und klicke auf "Neues Script hinzufügen".
  </Step>

  <Step title="Script-Name vergeben">
    Vergebe einen eindeutigen, aussagekräftigen Namen für das Script, z.B. "Google Analytics" oder "Facebook Pixel".

    <Tip>
      Wähle Namen, die du auch in 6 Monaten noch verstehst. Das hilft bei der späteren Verwaltung.
    </Tip>
  </Step>

  <Step title="Position wählen">
    Wähle die passende Position für dein Script aus den vier verfügbaren Optionen.
  </Step>

  <Step title="Code einfügen">
    Füge die Code-Snippet des externen Dienstes in den schwarzen Codeblock ein.
  </Step>

  <Step title="An Consent binden (optional)">
    Entscheide, ob das Script DSGVO-konform erst nach Zustimmung geladen werden soll.

    <Warning>
      Ohne gesetzten Haken wird das Script **immer** geladen - auch ohne Zustimmung!
    </Warning>
  </Step>

  <Step title="Script speichern">
    Klicke auf "Hinzufügen", um das Script mit den gewählten Einstellungen zu speichern.
  </Step>
</Steps>

### Ausgabetypen erklärt

<Tabs>
  <Tab title="Header">
    **Verwendung:** Scripte oder Styles, die möglichst früh aufgerufen werden sollen

    **Typische 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

    <Warning>
      Der Header ist **kein** Platz für sichtbare Elemente! Nutze stattdessen Footer, Portlet oder Selektor.
    </Warning>

    **Beispiel:**

    ```html theme={null}
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA_MEASUREMENT_ID');
    </script>
    ```
  </Tab>

  <Tab title="Footer">
    **Verwendung:** Scripts, die am Ende der Seite geladen werden oder schwebende Widgets

    **Typische Anwendungsfälle:**

    * Chat-Widgets (z.B. Userlike, Zendesk)
    * Marketing-Pixel (Facebook, TikTok)
    * A/B-Testing-Tools
    * Cookie-Banner-Scripts
    * Schwebende Social Media Buttons

    <Info>
      Der Footer ist der richtige Platz für die meisten externen Scripts, da sie die initiale Seitenladezeit nicht beeinflussen.
    </Info>

    **Beispiel:**

    ```html theme={null}
    <!-- Userlike Chat Widget -->
    <script>
    window.uslk = window.uslk || [];
    (function(){var a=document.createElement("script");
    a.async=1;a.src="//userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/YOUR_SECRET.js";
    var b=document.getElementsByTagName("script")[0];
    b.parentNode.insertBefore(a,b);})();
    </script>
    ```
  </Tab>

  <Tab title="Portlet">
    **Verwendung:** Flexibles Einbinden für sichtbare Elemente im OnPage Composer

    **Typische Anwendungsfälle:**

    * Social Media Feeds (Instagram, Facebook)
    * Bewertungs-Widgets (Trustpilot, ProvenExpert)
    * Newsletter-Anmeldeformulare
    * Countdown-Timer
    * Custom Content-Bereiche

    <Tip>
      Nach dem Anlegen erscheint das Script als Portlet im OPC-Editor unter "Script Portlet". Du kannst es dann beliebig auf deinen Seiten platzieren.
    </Tip>

    **Beispiel:**

    ```html theme={null}
    <!-- Instagram Feed -->
    <div class="instagram-feed">
      <script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script>
      <iframe src="//lightwidget.com/widgets/YOUR_WIDGET_ID.html" 
              scrolling="no" 
              allowtransparency="true" 
              class="lightwidget-widget">
      </iframe>
    </div>
    ```
  </Tab>

  <Tab title="Selektor">
    **Verwendung:** Dynamisches Einfügen in bestehende Template-Elemente

    **Typische Anwendungsfälle:**

    * Zusätzliche Buttons in bestehenden Bereichen
    * Custom Badges auf Produktseiten
    * Erweiterte Produktinformationen
    * Dynamische Preisanzeigen

    <Note>
      Nutze als Selektor eine **ID** (#meine-id) oder eine **Klasse** (.meine-klasse). Der Code wird in dieses Element injiziert.
    </Note>

    **Beispiel für Selektor:**

    ```css theme={null}
    #product-actions
    ```

    **Beispiel-Code:**

    ```html theme={null}
    <button class="custom-wishlist-btn">
      Zur Wunschliste hinzufügen
    </button>
    <style>
    .custom-wishlist-btn {
      background: #e91e63;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    </style>
    ```
  </Tab>
</Tabs>

<br />

## Script-Einstellungen

### Grundeinstellungen

<ParamField path="script_name" type="string" required>
  Vergebe hier einen eindeutigen Namen für das Script, z.B. "Google Analytics Tracking" oder "Facebook Pixel".
</ParamField>

<ParamField path="output_type" 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
</ParamField>

<ParamField path="selector" type="string">
  Nur bei Ausgabetyp "Selektor": CSS-Selektor als ID (#meine-id) oder Klasse (.meine-klasse)
</ParamField>

<ParamField path="code_block" type="code" required>
  Füge hier das Script oder CSS-Stylesheet ein. Unterstützt HTML, JavaScript und CSS.
</ParamField>

<br />

### Vorhandene Scripts

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/pB0BE1NCq1ZwmQYz/images/script-consent-vorhandene-scripts.jpg?fit=max&auto=format&n=pB0BE1NCq1ZwmQYz&q=85&s=7109dd517b8d5104357137a131f27166" alt="Vorhandene Scripts" width="2024" height="904" data-path="images/script-consent-vorhandene-scripts.jpg" />
  </Frame>
</div>

Alle angelegten Scripts werden in der Tabelle unterhalb des Formulars aufgelistet. Die Tabelle zeigt auf einen Blick die wichtigsten Informationen zu jedem Script:

<ParamField path="Name" type="string">
  Der vergebene Name des Scripts.
</ParamField>

<ParamField path="UID" type="string">
  Eindeutige ID des Scripts, wird automatisch aus dem Namen generiert.
</ParamField>

<ParamField path="Position" type="string">
  Der gewählte Ausgabetyp (z.B. Header, Footer, Portlet).
</ParamField>

<ParamField path="Selektor" type="string">
  Der CSS-Selektor, sofern der Ausgabetyp "Selektor" gewählt wurde.
</ParamField>

<ParamField path="Consent" type="string">
  Das verknüpfte Consent-Item. Ein Strich (–) bedeutet, das Script wird ohne Consent-Bindung geladen.
</ParamField>

Ü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.

<br />

## Consent Item bearbeiten

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/pB0BE1NCq1ZwmQYz/images/script-consent-consent-item.jpg?fit=max&auto=format&n=pB0BE1NCq1ZwmQYz&q=85&s=ed93f7ce700e72437af9fdb0d83ed336" alt="Consent Item bearbeiten" width="2076" height="982" data-path="images/script-consent-consent-item.jpg" />
  </Frame>
</div>

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.

<Note>
  Sprachvariablen sind besonders praktisch für mehrsprachige Shops. Lege sie unter **Sprachvariablen** im Resources & Health Dashboard mit der Sektion "custom" an.
</Note>

<ParamField path="Formular zurücksetzen" type="button">
  Setzt alle Felder des Formulars auf ihre Ausgangswerte zurück.
</ParamField>

<ParamField path="Name" type="string" required>
  Name des Consent-Items, z.B. "Google Analytics". Alternativ eine Sprachvariable im rechten Feld eintragen.
</ParamField>

<ParamField path="Beschreibung" type="string" required>
  Beschreibt, was der Dienst macht – wird dem Nutzer im Consent-Banner angezeigt. Alternativ Sprachvariable verwenden.
</ParamField>

<ParamField path="Zweck" type="string" required>
  Zweck der Datenerhebung, z.B. "Analyse des Nutzerverhaltens". Alternativ Sprachvariable verwenden.
</ParamField>

<ParamField path="Link" type="url">
  Link zur Datenschutzerklärung des Dienstes (optional). Alternativ Sprachvariable verwenden.
</ParamField>

<ParamField path="Unternehmen" type="string" required>
  Name des datenverarbeitenden Unternehmens, z.B. "Google Ireland Limited, Dublin, Irland".
</ParamField>

<ParamField path="Speichern" type="button">
  Speichert das Consent-Item. Es steht anschließend in der Dropdown-Liste bei der Script-Konfiguration zur Verfügung.
</ParamField>

<br />

## Verwaltung

### Consent-Item-Verwaltung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/pB0BE1NCq1ZwmQYz/images/script-consent-consent-item-verwaltung.jpg?fit=max&auto=format&n=pB0BE1NCq1ZwmQYz&q=85&s=7333aea709b70dad7c0f918e842955c2" alt="Consent-Item-Verwaltung" width="2020" height="922" data-path="images/script-consent-consent-item-verwaltung.jpg" />
  </Frame>
</div>

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

<Warning>
  **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!
</Warning>

<br />

## Best Practices

<AccordionGroup>
  <Accordion title="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

    **Scripts ohne Consent:**
    Nur technisch notwendige Scripts (z.B. Shop-Funktionalität) dürfen ohne Consent geladen werden.
  </Accordion>

  <Accordion title="Performance optimieren">
    **Header sparsam nutzen:**
    Nur kritische Scripts in den Header, da sie die Ladezeit beeinflussen

    **Async/Defer verwenden:**

    ```html theme={null}
    <script async src="..."></script>
    <script defer src="..."></script>
    ```

    **Footer bevorzugen:**
    Die meisten Scripts funktionieren auch im Footer und verbessern so die Performance
  </Accordion>

  <Accordion title="Dokumentation pflegen">
    **Klare Namen verwenden:**
    "Google Analytics 4 - Tracking" statt "Script 1"

    **Kommentare hinzufügen:**

    ```html theme={null}
    <!-- 
      Facebook Pixel
      Installiert am: 15.01.2024
      Verantwortlich: marketing@firma.de
      Property ID: 1234567890
    -->
    ```

    **Änderungen dokumentieren:**
    Notiere wichtige Änderungen als Kommentar im Code
  </Accordion>

  <Accordion title="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
  </Accordion>
</AccordionGroup>

<br />

## Häufige Anwendungsfälle

<Tabs>
  <Tab title="Google Analytics 4">
    **Ausgabetyp:** Header\
    **Consent:** Marketing/Analytics

    ```html theme={null}
    <!-- 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>
    ```
  </Tab>

  <Tab title="Facebook Pixel">
    **Ausgabetyp:** Header\
    **Consent:** Marketing

    ```html theme={null}
    <!-- Facebook Pixel -->
    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', 'YOUR_PIXEL_ID');
      fbq('track', 'PageView');
    </script>
    ```
  </Tab>

  <Tab title="Trustpilot Widget">
    **Ausgabetyp:** Portlet\
    **Consent:** Nicht erforderlich (zeigt nur Bewertungen)

    ```html theme={null}
    <!-- TrustBox widget -->
    <div class="trustpilot-widget" 
         data-locale="de-DE" 
         data-template-id="5419b6a8b0d04a076446a9ad" 
         data-businessunit-id="YOUR_BUSINESS_ID" 
         data-style-height="24px" 
         data-style-width="100%" 
         data-theme="light">
      <a href="https://de.trustpilot.com/review/example.com" 
         target="_blank" 
         rel="noopener">Trustpilot</a>
    </div>
    <script type="text/javascript" 
            src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" 
            async>
    </script>
    ```
  </Tab>

  <Tab title="Userlike Chat">
    **Ausgabetyp:** Footer\
    **Consent:** Funktional (optional, je nach Datenschutzstrategie)

    ```html theme={null}
    <!-- Userlike Chat Widget -->
    <script>
    window.uslk_settings = {
      language: 'de',
      position: 'right',
      color: '#0066cc'
    };

    window.uslk = window.uslk || [];
    (function(){
      var a = document.createElement("script");
      a.async = 1;
      a.src = "//userlike-cdn-widgets.s3-eu-west-1.amazonaws.com/YOUR_SECRET.js";
      var b = document.getElementsByTagName("script")[0];
      b.parentNode.insertBefore(a,b);
    })();
    </script>
    ```
  </Tab>
</Tabs>

<br />

## Fehlerbehebung

<AccordionGroup>
  <Accordion title="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

    **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
  </Accordion>

  <Accordion title="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

    **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
  </Accordion>

  <Accordion title="Consent-Item erscheint nicht">
    **Prüfe:**

    * Wurde das Consent-Item gespeichert?
    * Ist es an ein Script gebunden?
    * Cache geleert?
    * Consent Manager aktiv im Template?

    **Lösung:**

    1. Leere den Shop-Cache
    2. Prüfe unter "Consent-Item-Verwaltung" die Übersicht
    3. Stelle sicher, dass der JTL Consent Manager aktiviert ist
  </Accordion>

  <Accordion title="Portlet erscheint nicht im OPC">
    **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
  </Accordion>
</AccordionGroup>

<Check>
  **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.
</Check>