Cookie Consent in Contao - Google Analytics im Google Tag Manager mit dem Klaro! Consent Manager aktivieren

Mathias Arzberger

Wir haben den Klaro! Consent Manager zur Verwaltung von Cookies auf Contao Webseiten getestet. Ist das die passende Contao Cookie Lösung? Wir zeigen dir in diesem Tutorial, wie du den Cookie-Hinweis in Contao einbauen kannst.

Was ist Klaro?

Klaro ist ein kostenloses und quelloffenes Tool, welches eine intuitive, benutzerfreundliche und DSGVO konforme Möglichkeit zur Verwaltung von Einwilligungen auf deiner Website bietet. Klaro ist einfach zu verwenden und zu konfigurieren, leichtgewichtig und mit allen modernen Browsern kompatibel.

Klaro ist einfach, unaufdringlich und sowohl für mobile als auch für Desktop-Browser optimiert. Es versucht im Hintergrund zu bleiben, während es dir dabei hilft, transparent und konform zu relevanten Vorschriften (insbesondere DSGVO und ePrivacy) zu sein.

Klaro kann sowohl inline- und externe Skripte als auch statische Tracking-Elemente, wie Bilder oder Stylesheets verwalten.

Folgende Abbildungen zeigen Klaro Consent Manager für Contao in englischer Sprache:

Abbildung 1 zeigt das Consent Tool in englischsprachiger Darstellung. Der Benutzer hat die Möglichkeit "Alles zu akzeptieren", "das ausgewählte zu akzeptieren" oder "abzulehnen".

Klaro Cookie Consent Popup oder auch Modal gennant
Abb. 1 - Klaro Cookie Consent Popup oder auch Modal gennant

Abbildung 2 zeigt eine detailierte Darstellung der Dienste inklusive Beschreibung des Dienstes und des Nutzungszwecks.

Detailierte Darstellung der genutzten Dienste
Abb. 2 - Detailierte Darstellung der genutzten Dienste

Funktionen

  • 100% DSGVO-konform (GDPR)
  • Verwaltung von: Inline- und externen Skripten, Bildern, Stylesheets, Links
  • ermöglicht dem Nutzer die volle Kontrolle darüber, welche Skripte geladen werden
  • frei anpassbare Cookie-Meldung mittels .po-Datei (Unterstützung mehrerer Sprachen)
  • Anzeige eines Modal-Popups mit weiteren Cookie-Informationen
  • Benutzerdefinierter Link zur Datenschutzseite
  • Nutzer kann seine Zustimmung jederzeit überprüfen und bearbeiten/zurücksetzen (Shortcode zum Überprüfen und Zurücksetzen der Zustimmung auf der Datenschutzseite oder auf jeder beliebigen Seite)
  • kontextbezogene Zustimmung (z.B. Zustimmung des Nutzer einholen, bevor ein eingebettetes Youtube-Video angezeigt wird)
  • konfigurierbar, ob funktionale Cookies vom Nutzer abgelehnt werden dürfen oder nicht
  • frei konfigurierbare Text- und Hintergrundfarben
  • Optimiert für Mobil- und Desktop-Browser

Wie kann ich Klaro in meine Contao Website einbinden?

Es gibt 3 Möglichkeiten Klaro in deine Contao Webseite einzubinden:

  1. die einfachste und unkomplizierteste Möglichkeit ist die Verwendung eines pdir Contao-Themes, denn hier gibt es die Klaro! Consent Manager Erweiterung sowie eine fertige Standard-Konfiguration kostenlos dazu

  2. du kannst die Contao-Erweiterung "Klaro Consent Manager Bundle" nutzen

  3. oder du nimmst eine komplett manuelle Integration per Javascript vor

 

Alle 3 Möglichkeiten beschreiben wir dir im Folgenden ausführlich:

Integration mit einem pdir Contao Theme

Alle pdir Contao Themes mit gratis Cookie Banner - pdir Klaro Consent Manager für Contao

So funktionierts:

  1. Theme aussuchen
    Suche dir zuerst eines unserer Themes aus, welches am besten zu deinem Projekt passt (natürlich kannst du bei allen Themes die Layouts, Farben, etc. nach Belieben anpassen & konfigurieren). Erwirb eine kostenpflichtige Theme-Lizenz und du erhälst das Klaro Consent Manager Bundle gratis inkl. umfangreicher Standard-Konfiguration dazu. Hier Theme aussuchen >

  2. Consent Manager & Standard-Konfiguration kostenlos erhalten
    Nach Bestellung des Themes erhälst du eine Bestellbestätiungs-E-Mail mit allen weiteren wichtigen Informationen zur Installation. Leite uns diese einfach weiter an kontakt@pdir.de und wir senden dir auch deine gratis Consent Manager Konfiguratiosdatei zu.

  3. Consent Manager einrichten
    Anschließend richtest du das Klaro Consent Manager Bundle einfach wie in unserer Dokumentation (folgt) beschrieben ein. Wenn du die Standard-Konfiguration nutzt, ist dies ganz leicht und unkompliziert, denn sie enthält bereits alle wichtigen Zwecke, Dienste und Anbieter und du brauchst lediglich die von dir verwendeten aktivieren.

Integration mit der Contao Erweiterung „Klaro Consent Manager Bundle“

Alle Informationen zur Erweiterung erhälst du hier: Klaro! Consent Manager Bundle für Contao

Installiere hierfür zuerst das Klaro! Consent Manager Bundle über den Contao Manager.

Um nach der Installation loszulegen, erstelle einfach eine neue Konfiguration (für interne oder externe Skripte, Bilder oder Stylesheets...) unter "Klaro Consent Manager" -> "Hinzufügen".

Gib einen Skriptnamen und eine Beschreibung ein, zum Beispiel "Google Analytics" und die Beschreibung "Google Analytics ist ein kostenloser Webanalysedienst von Google".

Setze den Zweck auf "Analytics" und gib deine Google Analytics ID an.

Aktiviere die Konfiguration in den Seiteneinstellungen deiner Webseite.

Rufe nun deine Webseite auf und prüfe ob das Consent Popup erscheint. Das Consent Popup sollte wie folgt aussehen:

Cookie Banner - dezenter Störer
Cookie Banner - dezenter Störer

Der Quellcode sollte in etwa so aussehen:

...
<style data-context="klaro-styles">
  .klaro{font-family:inherit;font-family:var(--font-family, inherit);font-size:14px;font-size:var(--font-size, 14px)}
...
</style>
<script defer="" type="application/javascript" src="/files/zeroOne/klaro/config.js"></script>
<script defer="" data-config="klaroConfig" type="application/javascript" src="/files/zeroOne/klaro/klaro.js"></script>
...

Fahre so mit allen Diensten/Cookies/Skripten fort, welche du auf deiner Webseite verwendest und teste anschließende die ordnungsgemäße Funktion des Consent Managers ausführlich.

 

Weitere Informationen findest du in der Dokumentation (folgt) des Klaro Consent Manager Bundles.


Manuelle Integration per JavaScript

Um den Klaro! Consent Manager auf deiner Contao Website zu verwenden, kannst du dessen Code auch manuell einbetten und eine Konfiguration hinterlegen. Für die manuelle Integration sind HTML, Javascript und CSS Kenntnisse stark von Vorteil. (Auf der Klaro Webseite findest du eine "Wie fange ich an"-Seite ( in englisch))

 

Config File anlegen

Beginne am besten damit, dir eine eigene Konfiguration anzulegen, in welcher du sämtliche Dienste/Cookies erfasst, die Klaro managen soll. Ein kommentiertes Beispiel findest du hier config.js.

Tipp: in unserer Standard-Konfiguration für das Klaro! Consent Manager Bundle haben wir dies bereits für dich erledigt und du musst lediglich die Dienste entfernen, die du nicht brauchst.

 

Klaro laden

Du solltest Klaro immer selbst hosten und nutze am besten immer die neuste Version! Lade dir dazu die kompilierten JS-Dateien aus dem dist-Ordner bei Github herunter:

klaro.js: Minimalisierte Version von Klaro, einschließlich CSS.
klaro-no-css.js: Verkleinerte Version von Klaro, CSS nicht enthalten.
klaro.css: Nicht minimiertes CSS (nützlich, wenn Sie es selbst ändern wollen).
klaro.min.css: Verkleinertes CSS

 

Klaro + Config einbinden

Nun kannst du beginnen, Klaro in deine Contao Webseite einzubinden. Lade hierfür die heruntergeladenen Dateien in das files Verzeichnis von Contao.

Binde anschließend die beiden Dateien in der Kopfzeile des Themes ein. Wie das aussehen kann, siehst du im folgenden Screenshot.

 

Skripte/Tracker/Dienste verwalten

Um Skripte von Drittanbietern zu verwalten und sicherzustellen, dass diese nur dann ausgeführt werden, wenn der Benutzer ihrer Verwendung zustimmt, führe folgende Anpassungen im Code der Skripte durch: Ersetze einfach das src-Attribut durch data-src, ändere das type-Attribut in text/plain und füge ein data-type-Attribut mit dem ursprünglichen Typ hinzu. Füge außerdem ein data-name-Feld hinzu, welches dem Namen der Anwendung entspricht, so wie er in deiner Konfigurationsdatei angegeben ist.

Beispiel:

<script type="text/plain"
    data-type="text/javascript"
    data-name="optimizely"
    data-src="https://cdn.optimizely.com/js/10196010078.js">
</script>

Klaro kümmert sich nun um die Ausführung der Skripte, sobald die Zustimmung erteilt wurde und blockiert diese bis dahin (du kannst die Skripte allerdings auch ausführen lassen, bevor die ausdrückliche Zustimmung erteilt wurde). Die gleiche Methode funktioniert auch für Bilder, Stylesheets und andere Elemente mit einem src- oder type-Attribut.

Weitere Informationen zu den Einstellungen oder zur Nutzung der Javascript API findest du in der Klaro! Readme.


Wie integriere ich Google Analytics und den Google Tag Manager?

In diesem Abschnitt zeigen wir dir, wie du Google Analytics und den Google Tag Manager (GTM) integrieren kannst, um die Einwilligungen für Dienste in Klaro zu verwalten. Klaro kann GTM-Tags vollständig verwalten und unterstützt auch den neuen "Consent Mode" von Google. Zum Beispiel steuert der untenstehende Einwilligungshinweis ein GTM-Tag auf einer Website, welches ein Google Analytics-Tag lädt - aber nur, wenn vorher der Verwendung von Google Analytics über Klaro zugestimmt wurde.

Nehmen wir an, wir möchten den GTM verwenden, um ein Google Analytics-Tag in unsere Website einzubinden. Dazu binden wir zunächst das GTM Tag in unsere Website ein und modifizieren es so, dass es von Klaro verwaltet werden kann. Ersetze hierbei GTM-XXXXXXX mit deiner google Tag Manager ID.

<head>
    ...
    <!-- Google Tag Manager -->
    <script data-type="application/javascript" type="text/plain" data-name="google-tag-manager">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
     <!-- Google Tag Manager (noscript) -->
    <noscript><iframe data-name="google-tag-manager" data-src="https://www.googletagmanager.com/ns.html?id=GTM-MZTF9XR"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    ...
</body>

Anschließend erstellen wir ein Google Analytics-Tag in der GTM-Web-UI. Als Auslöser erstellen wir einen benutzerdefinierten Ereignistrigger mit dem Namen klaro-google-analytics-accepted. Damit stellen wir sicher, dass GTM Google Analytics nur dann lädt, wenn der Nutzer über Klaro sein Einverständnis dazu gegeben hat. Und das war's! Klaro verwaltet nun GTM und stellt sicher, dass nur Dienste geladen werden, für die der Nutzer über Klaro seine Zustimmung gegeben hat.

Wichtig: Um einen weiteren Service über GTM hinzuzufügen, füge ihn zunächst zu deiner Klaro-Konfiguration hinzu und definiere dann einfach einen benutzerdefinierten Event-Trigger der Form klaro-[service-name]-accepted, wobei [service-name] der Name des Services in der Klaro-Konfiguration ist. So kannst du für den Google Tag Manager beliebig viele neue Dienste hinzufügen.

services:
  ...
        {
            name: 'google-tag-manager',
            purposes: ['marketing'],
            onAccept: `
                // we notify the tag manager about all services that were accepted. You can define
                // a custom event in GTM to load the service if consent was given.
                for(let k of Object.keys(opts.consents)){
                    if (opts.consents[k]){
                        let eventName = 'klaro-'+k+'-accepted'
                        dataLayer.push({'event': eventName})
                    }
                }
                // if consent for Google Analytics was granted we enable analytics storage
                if (opts.consents[opts.vars.googleAnalyticsName || 'google-analytics']){
                    console.log("Google analytics usage was granted")
                    gtag('consent', 'update', {'analytics_storage': 'granted'})
                }
                // if consent for Google Ads was granted we enable ad storage
                if (opts.consents[opts.vars.adStorageName || 'google-ads']){
                    console.log("Google ads usage was granted")
                    gtag('consent', 'update', {'ad_storage': 'granted'})
                }
            `,
            onInit: `
                // initialization code here (will be executed only once per page-load)
                window.dataLayer = window.dataLayer || [];
                window.gtag = function(){dataLayer.push(arguments)}
                gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
                gtag('set', 'ads_data_redaction', true)
            `,
            onDecline: `
                // initialization code here (will be executed only once per page-load)
                window.dataLayer = window.dataLayer || [];
                window.gtag = function(){dataLayer.push(arguments)}
                gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
                gtag('set', 'ads_data_redaction', true)
            `,
            vars: {
                googleAnalytics: 'google-analytics'
            }
        },
  ...

Beispiel für einen Google Analytics Dienst

services:
  ...
        {
            // In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
            name: 'google-analytics',
            purposes: ['statistics'],
            cookies: [
                /^_ga(_.*)?/ // we delete the Google Analytics cookies if the user declines its use
            ],
        }
  ...

Anpassen der Klaro config.js

Hier ist die Beispielkonfiguration von Klaro, die wir zum Test verwendet haben. In dieser ist sowohl ein "Google Tag Manager"-Dienst als auch einen "Google Analytics"-Dienst definiert. Die verschiedenen Event-Handler (onInit, onAccept, onDecline) sorgen dafür, dass GTM über die vom Nutzer getroffenen Einwilligungsentscheidungen informiert wird, was wiederum GTM ermöglicht, die entsprechenden Tags zu laden.

var klarConfig = {
    acceptAll: true,
    services: [
        {
            name: 'google-tag-manager',
            purposes: ['marketing'],
            onAccept: `
                // we notify the tag manager about all services that were accepted. You can define
                // a custom event in GTM to load the service if consent was given.
                for(let k of Object.keys(opts.consents)){
                    if (opts.consents[k]){
                        let eventName = 'klaro-'+k+'-accepted'
                        dataLayer.push({'event': eventName})
                    }
                }
                // if consent for Google Analytics was granted we enable analytics storage
                if (opts.consents[opts.vars.googleAnalyticsName || 'google-analytics']){
                    console.log("Google analytics usage was granted")
                    gtag('consent', 'update', {'analytics_storage': 'granted'})
                }
                // if consent for Google Ads was granted we enable ad storage
                if (opts.consents[opts.vars.adStorageName || 'google-ads']){
                    console.log("Google ads usage was granted")
                    gtag('consent', 'update', {'ad_storage': 'granted'})
                }
            `,
            onInit: `
                // initialization code here (will be executed only once per page-load)
                window.dataLayer = window.dataLayer || [];
                window.gtag = function(){dataLayer.push(arguments)}
                gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
                gtag('set', 'ads_data_redaction', true)
            `,
            onDecline: `
                // initialization code here (will be executed only once per page-load)
                window.dataLayer = window.dataLayer || [];
                window.gtag = function(){dataLayer.push(arguments)}
                gtag('consent', 'default', {'ad_storage': 'denied', 'analytics_storage': 'denied'})
                gtag('set', 'ads_data_redaction', true)
            `,
            vars: {
                googleAnalytics: 'google-analytics'
            }
        },
        {
            // In GTM, you should define a custom event trigger named `klaro-google-analytics-accepted` which should trigger the Google Analytics integration.
            name: 'google-analytics',
            purposes: ['marketing'],
            cookies: [
                /^_ga(_.*)?/ // we delete the Google Analytics cookies if the user declines its use
            ],
        }
    ]
}

Wenn du mehr erfahren möchtest, kannst du dir einfach die kommentierte Beispielkonfiguration [EN] anschauen, welche die Beschreibungen aller gültigen Konfigurationsoptionen und Parameter enthält.

Hinzufügen einzelner Cookies

Im Bereich Cookies kannst du weitere Cookies definieren, für die eine Zustimmung eingeholt werden soll.

services:
	...
        {
            name: 'Essenzielle Cookies',
            purposes: ['essential'],
            cookies: [
                'csrf_https-contao_csrf_token', 'PHPSESSID', 'AWSALBCORS'
            ],
            default: true,
        }
    ...

Verwaltung von Cookies

Damit die Besucher einer Webseite auch nach erfolgter Einwilligung oder Ablehung von Cookies ihre Zustimmung wieder zurückziehen oder erneut erteilen können, sollte der Consent Manager jederzeit einfach für sie wieder aufrufbar sein. Binde hierfür einfach den Consent Manager über folgenden Code an der gewünschten Stelle ein:

<a class="button is-success" onclick="return klaro.show();">Cookie Einstellungen anpassen</a>

Die Funktion klaro.show() kannst du natürlich auch bei Klick auf jedes andere Element oder Bild ausführen.


Anpassung von Texten und Übersetzungen

In der config.js kannst du die Texte und Übersetzungen des Cookie Popups (Modal) und des Störers anpassen. Wie das aussehen kann, findest du im Folgenden:

...
translations: {
        /*
        The `zz` key contains default translations that will be used as fallback values.
         This can e.g. be useful for defining a fallback privacy policy URL.
        */
        zz: {
            privacyPolicyUrl: '/datenschutz.html',
        },
        de: {
            /*
            You can specify a language-specific link to your privacy policy here.
            */
            privacyPolicyUrl: '/datenschutz.html',
            consentNotice: {
                description: '<b>Cookie-Einstellungen</b><p>Wir setzen Cookies ein, um unsere Webseiten optimal für Sie ' +
                    'zu gestalten und unsere Angebote für Sie zu verbessern. Sie können auswählen, welche Cookies Sie zulassen ' +
                    'wollen, sowie Ihre Auswahl jederzeit ändern. Technisch notwendige Cookies werden auch bei der Auswahl ' +
                    'von "Ich lehne ab" gesetzt.</p>',
            },
            consentModal: {
                description:
                    'Hier können Sie einsehen und anpassen, welche Information wir über Sie ' +
                    'sammeln.',
            },
            ok: 'Zustimmen',
            save: 'Speichern',
            Speichern: 'Auswahl speichern',
            decline: 'Nur essenzeille Cookies akzeptieren',
            close: 'Schließen',
            acceptSelected: 'Auswahl speichern',
            acceptAll: 'Allen zustimmen'
            /*
            You should also define translations for every purpose you define in the
            'services' section. You can define a title and an (optional) description.
            */
            purposes: {
                essential: {
                    title: 'Essenzielle Cookies',
                    description:
                        'Notwendige Cookies helfen dabei, eine Webseite nutzbar zu machen, indem sie Grundfunktionen' +
                        'wie Seitennavigation und Zugriff auf sichere Bereiche der Webseite ermöglichen. Die Webseite' +
                        'kann ohne diese Cookies nicht richtig funktionieren.'
                },
                statistics: {
                    title: 'Besucher-Statistiken',
                    description:
                        'Wir werden Daten in aggregierter Form über Besucher und ihre Erfahrungen auf unserer Website ' +
                        'speichern. Wir verwenden diese Daten, um Fehler zu beheben und das Erlebnis für alle Besucher ' +
                        'zu verbessern.'
                },
                marketing: {
                    title: 'Marketing',
                    description:
                        'Diese Dienste verarbeiten persönliche Daten, um Ihnen relevante Inhalte über Produkte, ' +
                        'Dienstleistungen oder Themen zu zeigen, die Sie interessieren könnten.'
                },
                external: {
                    title: 'Externe Medien',
                    description:
                        'Inhalte von externen Plattformen wie YouTube Video, cleverreach (Newsletter) etc.'
                },
            },
        },
        en: {
            privacyPolicyUrl: '/datenschutz.html',
            consentModal: {
                description:
                    'Here you can see and customize the information that we collect about you.',
            },
            purposes: {
                essential: {
                    title: 'Essential cookies',

                },
                statistics: {
                    title: 'Visitor statistics'
                },
                marketing: {
                    title: 'Marketing'
                },
                external: {
                    title: 'External media'
                },
            },
        },
    },
...

Wie kann ich Klaro optisch an mein Template bzw. meine Webseite anpassen?

Klaro verfügt auch über eine Version ohne Stylesheets, welche nützlich ist, wenn du deine eigenen Styles bereitstellen möchtest: klaro-no-css.js. Wenn du diese Version verwendest, musst du die CSS Datei separat einbinden:

<link rel="stylesheet" href="files/klaro/klaro.min.css" />

Es gibt auch eine nicht komprimierte Version des Stylesheets, die sich hervorragend eignet, wenn du diese anpassen und deine eigene Version erstellen möchten: klaro.css.


Wo erhalte ich Hilfe für weitere Anpassungen?

Wir wissen, worauf es bei Auswahl und Einbau eines Consent Tools ankommt. Auch bei der Integration neuer Dienste halfen wir gern weiter. Wir haben einige Erfahrungen bei der Einrichtung einer Cookieleiste für Contao Webseiten gesammelt und finden für jeden die passende Lösung.

Wir beraten dich gern, frag uns einfach! Gern sind wir dir behilflich bei:

  • die richtige Consent Management Platform für deine Website finden
  • Integration von Cookie-Banner, Cookie-Leiste oder Cookie-Wall
  • Erstellen einer Übersicht aller Cookies, die auf deiner Website genutzt werden, und prüfen, ob hier etwas angepasst werden muss
  • Konfiguration des Consent-Tools und/oder Beratung bei der Kategorisierung der Cookies
  • Beratung bei der optischen Gestaltung und Ausspielungsart der Cookieleiste, damit möglichst viele Nutzer zustimmen
  • Unterstützung auch für Usercentrics, Onetrust und Cookiebot
  • Testen und Optimieren bestehender Cookie-Lösungen

Hinweis

Bitte teste anschließend die ordnungsgemäße Funktionsweise des Klaro Consent Managers ausgiebig!

Die Nutzung der pdir Themes, des Klaro! Consent Manager Bundles oder der manuellen Integration von Klaro! ist keine Garantie dafür, dass deine Website ihren Verantwortlichkeiten und Verpflichtungen im Rahmen der DSGVO oder ePrivacy erfolgreich nachkommt.

Einzelne Organisationen sollten ihre individuellen Verantwortlichkeiten bewerten und sicherstellen, dass zusätzliche Maßnahmen ergriffen werden, um alle gesetzlich vorgeschriebenen Verpflichtungen zu erfüllen, die auf einer Datenschutz-Folgenabschätzung (DPIA) basieren.

Dieser Artikel ist keine rechtliche Beratung. Es wird keine Garantie auf Rechtssicherheit gegeben.

 

Häufige Fragen und Antworten zu Cookies und Tracking

Unsere Häufigen Fragen und Antworten zu Cookies, vergleichbaren Techniken und das Einsetzen von externen Ressourcen, sind eine Zusammenfassung des umfangreichen FAQ der Website "Der Landesbeauftragte für Datenschutz und Informationsfreiheit Baden-Württemberg". Die vollständige Version findest du hier.

Gibt es Contao Themes mit einem Cookie- oder Einwilligungs-Banner?

Ja, alle pdir Contao Themes gibt es jetzt mit kostenlosem Cookie Consent Tool!

Fakt ist: Wenn du Cookies auf deiner Webseite setzen möchtest, musst du dir dafür die Einwilligung deiner Besucher einholen (außer diese sind technisch notwendig). Es dürfen erst dann Daten übertragen werden, wenn der Nutzer seine Einwilligung erteilt hat. Auf der sicheren Seite bist du also, wenn du eine echte Einwilligung per Cookie Consent Tool einholst.

Unsere Themes erleichtern dir diesen Cookie-Wahnsinn mit dem kostenlos enthaltenen Klaro Consent Manager!
Zu den Themes >

Alle pdir Contao Themes mit gratis Cookie Banner - pdir Klaro Consent Manager für Contao

Welche Cookies und andere Techniken darf ich ohne Einwilligung nutzen?

Cookies sind grundsätzlich einwilligungsbedürftig (siehe § 25 Absatz 1 Satz 1 TTDSG). Dies betrifft wie zuvor dargelegt auch andere Technologien, die Informationen auf dem Endgerät der Nutzer/Nutzerinnen ablegen oder von ihnen auslesen.

Von der Einwilligungspflicht nach dem TTDSG ausgenommen sind Cookies, die (insbesondere technisch) unbedingt erforderlich (auch als „notwendig” bzw. „essentiell” bezeichnet) sind, um den von Nutzer/Nutzerinnen nachgefragten Dienst zu erbringen. Dazu zählen z. B.:

  • Notwendige Sitzungsverwaltung (z.B. Login oder Warenkorb-Cookies, sobald ein/e Nutzer/Nutzerin sich anmeldet bzw. ein Produkt in den virtuellen Einkaufswagen legt)
  • Nutzer/Nutzerinnen-Eingaben, die sich bei Onlineformularen über mehrere Seiten erstrecken, sobald Nutzer/Nutzerinnen das Formular ausfüllen
  • Ausgewählte Sprache, sofern die Standardeinstellung verändert wird
  • Vermerken des Einwilligungsstatus, aber nur mittels Angabe des Status (ja/nein), nicht einer eindeutigen ID
  • Einsatz zu Sicherheitszwecken in sehr engen Ausnahmefällen und grundsätzlich nur bei gesonderter Nutzer/Nutzerinnen-Interaktion (z.B. bei Abstimmung mittels eines Abstimmungs-Tools, um Mehrfachabstimmungen zu erschweren)

Für welche Cookies und Tracking-Mechanismen brauche ich die Einwilligung der Nutzenden?

Gemäß § 25 Absatz 1 Satz 1 TTDSG bedarf die Speicherung von Informationen wie Cookies in der Endeinrichtung oder der Zugriff auf Informationen, die bereits in der Endeinrichtung gespeichert sind, grundsätzlich der Einwilligung der Nutzenden. Von dem Grundsatz der Einwilligungsbedürftigkeit sind in § 25 Absatz 2 TTDSG Ausnahmen vorgesehen. Diese finden im Zusammenhang mit Cookies bzw. Techniken wie Web-Bugs oder Browser-Fingerprinting, die das Tracking des Nutzenden zum Ziel haben, jedoch keine Anwendung. Sie sind technisch „nicht erforderlich“, um den Telemediendienst bereitzustellen.

Anbieter von Telemediendiensten, die Elemente integrieren, welche das Nutzer-/Nutzerinnenverhalten insbesondere über Website- oder Geräte-Grenzen hinweg (also z.B. über verschiedene Domains verschiedener Anbieter) zusammenfassen, benötigen auch nach der DS-GVO die aktive, ausdrückliche, informierte, freiwillige und vorherige Einwilligung (Artikel 6 Absatz 1 Buchstabe a DS-GVO) der Nutzenden (vgl. Seite 9 ff. der OH Telemedien 2021 und den folgenden Abschnitt A 4 dieser FAQ). Dies gilt insbesondere (aber nicht nur) für die Einbindung von Plugins von Social-Media-Anbietern, großen Online-Plattform-Betreibern und Werbenetzwerken.

Aber auch der Betreiber selbst darf nicht beliebig personenbezogene Daten der Nutzer/Nutzerinnen ohne Einwilligung zusammenführen oder anderweitig verarbeiten, auch insoweit gilt die DS-GVO.

Sollten Webseiten sicherheitshalber Einwilligungen per (Cookie-)Banner einholen, auch wenn dies nicht nötig ist?

Nein! Unbedingt erforderliche Cookies benötigen keine Einwilligung nach TTDSG und eine Einwilligung nach DS-GVO wäre die falsche Rechtsgrundlage. Denn diese eingeholte Einwilligung suggeriert, dass die Verarbeitung freiwillig ist und Nutzende diese jederzeit mit Wirkung für die Zukunft widerrufen könnten, obwohl das rechtlich nicht möglich ist. Ein Banner schadet in einem solchen Fall also:

Betroffenen zu suggerieren, sie könnten ihre Einwilligung widerrufen, obwohl dies gar nicht der Fall ist (also eine andere Rechtsgrundlage als die Einwilligung herangezogen wird), verstößt gegen die Grundsätze von Treu und Glauben sowie der Transparenz, da es sich um eine falsche und irreführende Information handelt (vgl. Artikel 5 Absatz 1 DS-GVO sowie Artikel 12 Absatz 1 in Verbindung mit Artikel 13 Absatz 2 Buchstabe c DS-GVO).

Einbindung externer Inhalte/(Medien-)Elemente

Webseiten können aus verschiedenen Elementen (z.B. Textteile, Bilder, Schriften) zusammengesetzt sein. Diese Elemente können sowohl in der HTML-Datei des Dokuments des Anbieters vorliegen als auch aus separaten Dateien geladen werden. Daneben kann Programmcode als Element (z.B. JavaScript oder WebAssembly) ausgeführt werden.

Drittanbieter bieten etwa die Möglichkeit, Kartendienste einzubinden oder Beiträge aus sozialen Medien wie Twitter oder Facebook, Links auf Social-Media-Präsenzen, Videos, Zahlungsdienstleister, Webseiten-Analysedienste oder Schriftarten auf einfache Weise zu integrieren.

Durch die Einbindung (z.B. durch HTML oder JavaScript) der externen Elemente der Drittanbieter durch den Anbieter des Telemediendienstes wird der Browser des Nutzenden dazu angeleitet, eine Verbindung mit dem Server des Dritten aufzubauen. Dadurch kommt es zu Datenübermittlungen an den Drittanbieter (mindestens der IP-Adresse des Nutzenden, aber auch der Webseite, von der aus der Zugriff erfolgt als sog. URL-Referrer) bzw. ggf. der Speicherung/dem Auslesen von Informationen aus dem Endgerät der Nutzenden. Der Anbieter kann unter Umständen (z.B. bei erfolgtem Login des Nutzenden beim Drittanbieter) diese Informationen mit bereits bei sich gespeicherten Informationen über den Nutzenden verketten, erhält also u.U. sehr detaillierte Informationen über die Interessen der betroffenen Person außerhalb der eigenen Plattform.

Im Ergebnis gestattet der Anbieter des Telemediendienstes durch die Einbindung somit dem Drittanbieter, (personenbezogene) Daten der Nutzer_innen zu verarbeiten bzw. Informationen auf den Endgeräten zu speichern, auszulesen sowie diese mit weiteren Daten aus anderen Quellen zu verknüpfen. Vergleichbar wäre, wenn ein lokaler Einzelhändler dem Anbieter von Plakatwerbung gestatten würde, zu erfassen, wann welche Person den Laden betreten und welches Produkt sie betrachtet hat.

Bei einer Einbindung solcher Elemente sind die Anforderungen des TTDSG (insbesondere § 25 TTDSG) und der DS-GVO (beispielsweise das Erfordernis einer Rechtsgrundlage) einzuhalten.

Wie kann ich Social-Media-Buttons einbinden?

Wenn du ohne die oben dargestellte Problematik externe Verweise implementieren wollen, kannst du mit geeigneter optischer Gestaltung einen Link auf die Like- oder Share-Funktion der jeweiligen Plattform integrieren, bei dem kein externes Bild oder anderes Objekt geladen werden. Damit werden keine Daten an die jeweilige Plattform beim bloßen Aufruf der eigenen Seite übermittelt.

Alternativ lässt sich mit Hilfe des Projekts Shariff der Fachzeitschrift c‘t sicherstellen, dass Social-Media-Buttons erst dann einen Kontakt mit dem jeweiligen Drittanbieter als Betreiber/Betreiberin der Plattform herstellen, wenn der Nutzende aktiv die Vorschaltseite geklickt hat.

Wie kann ich externe Inhalte von Twitter, YouTube, Facebook und Co. einbinden?

Bei der direkten Einbindung von Inhalten wie Tweets von Twitter, Beiträgen auf Facebook oder YouTube-Videos werden wie dargestellt stets personenbezogene Daten und oftmals auch die genaue Identität der jeweiligen Nutzer/Nutzerinnen an diese Dienste übermittelt.

Über eine sogenannte Zwei-Klick-Lösung lassen sich externe Inhalte von sozialen Medien so einbetten, dass zunächst nur eine Vorschau der externen Inhalte angezeigt wird – ohne dabei die IP-Adresse, Browser-Informationen oder andere persönliche Informationen an den Drittanbieter zu übermitteln. Erst wenn der Besucher aktiv auf die Vorschau klickt, um zum Beispiel ein YouTube-Video tatsächlich anzusehen, werden Daten übermittelt.

Für Tweets von Twitter und Beiträge von Facebook oder Instagram kannst du zum Beispiel die kostenlose Social Feed Erweiterung für Contao nutzen. Es werden für das Abholen und Darstellen der Inhalte keine Daten an Dritte übertragen.

Externe Medien (z. B. YouTube-Videos): Anstatt ein Video aus einer externen Quelle wie YouTube einzubinden, kann die Auslieferung auch direkt über die eigene Webpräsenz erfolgen – sofern genug Speicherplatz und Bandbreite zur Verfügung steht. Alternativ kann auf eine externe Videoquelle auch ohne Einbindung einfach verlinkt werden.

Möchtest du das YouTube-Video direkt über die Share-Funktion von YouTube einbinden, vorbehaltlich weiterer Einschränkungen, beispielsweise aufgrund Drittstaatentransfers, ist  auch hier eine Zwei-Klick-Lösung erforderlich, welche die Nutzenden transparent über die Verarbeitungen und Übermittlungen informiert, bevor persönliche Informationen an den Betreiber solcher Kartendienste übermittelt werden.

Wie kann ich (externe) Kartendienste einbinden?

Um jemanden über den Standort eines Unternehmens, Vereins bzw. einer Institution zu informieren, werden häufig externe Kartendienste wie Google Maps in die Website eingebunden.

Vorbehaltlich weiterer Einschränkungen, beispielsweise aufgrund Drittstaatentransfers, ist auch hier eine Zwei-Klick-Lösung erforderlich, welche die Nutzenden transparent über die Verarbeitungen und Übermittlungen informiert, bevor persönliche Informationen an den Betreiber solcher Kartendienste übermittelt werden.

Wie kann ich (externe) Schriftarten/Fonts einbinden?

Die Einbindung von externen Schriftarten bedingt immer einer Übermittlung personenbezogener Daten wie der IP-Adresse an den Anbieter des Dienstes (z.B. Google Fonts, MyFonts.
Adobe FF Market, Envato, Fonts.com, Adobe Fonts, TemplateTrain, FontSpring, Creative Market uvm.) Eine Einbindung bzw. Auslieferung sollte daher immer lokal über die eigene Website erfolgen.

Was muss bei Anbietern beachtet werden, die Daten außerhalb der EU übermitteln (Drittstaatentransfer)?

Die Regelungen von Kapitel 5 der DS-GVO sind bei der Übermittlung personenbezogener Daten in Drittländer zusätzlich zu beachten. Werden die Bedingungen aus Artikel 44 ff. DS-GVO nicht eingehalten, ist die Nutzung des jeweiligen Dienstes auch mit Einwilligung nicht zulässig und Anbieter von Webseiten müssen diese Übermittlungen einstellen.

Dies betrifft auch das bei vielen Anbietern beliebte Google Analytics. Nach derzeitigem Stand (Februar 2022) haben sowohl die Datenschutz-Aufsichtsbehörden in Österreich als auch in Frankreich festgestellt, dass die von den jeweiligen Webseitenbetreibern getroffenen Maßnahmen zum Schutz personenbezogener Daten nicht ausreichend sind.

Reichweitenanalyse

Eine Reichweitenanalyse ist vom Tracking insoweit abzugrenzen, als das Ziel der Verarbeitung die Erstellung von nicht-personenbeziehbaren aggregierten Statistiken darstellt. Eine Erhebung von Daten mittels Wiederkennung einzelner Nutzer/Nutzerinnen über einen längeren Zeitraum kann nicht mehr als Reichweitenanalyse verstanden werden. Erhobene Daten über das Verhalten einzelner Nutzender sind für eine Reichweitenanalyse zum frühestmöglichen Zeitpunkt von einem Personenbezug zu befreien und werden in einer Statistik weiterverarbeitet.

Für die datenschutzrechtliche Gesamtbewertung ist nicht nur heranzuziehen, welche Statistiken dem Verantwortlichen üblicherweise angezeigt werden, sondern auch, welche Daten zur Darstellung gespeichert und anderweitig verarbeitet werden, ob weitere Verarbeitungen z.B. im Interesse Dritter vorgenommen werden oder ob Drittanbieter personenbezogene Daten verarbeiten.

Was ist serverseitiges Tracking und kann ich damit Vorgaben des TTDSG oder der DS-GVO umgehen?

Serverseitiges (Server-side) Tracking ist ein relativ neues Konzept, welches vor dem Hintergrund der zunehmenden Regulierung im Telemedienbereich in jüngster Zeit verstärkt diskutiert wird. Vereinfacht dargestellt ist die Idee dahinter, das Tracking vom Endgerät des Nutzenden auf den Server des Verantwortlichen auszulagern, der ohnehin den gesamten Traffic einer Website einsehen kann. Dort werden Daten dann gezielt gesammelt und aufbereitet und – im besten Fall in anonymisierter Form – an den Tracking-Dienstleister abgegeben, welcher seinerseits die gewünschten Analysen durchführt.

Selbstverständlich müssen auch beim serverseitigen Tracking die Anforderungen des TTDSG und – da es sich bei der Übermittlung personenbezogener Daten um eine Verarbeitung handelt – der DS-GVO eingehalten werden.

Findet ein Server-Side-Tracking ohne Cookies (einschließlich aus anderen Gründen vorhandener Cookies) statt und werden Nutzungsdaten vor einer Weitergabe an einen Tracking-Dienstleister vollständig anonymisiert, dann kann diese Verarbeitung ggf. auf ein berechtigtes Interesse nach Artikel 6 Absatz 1 Buchstabe f DS-GVO gestützt werden und eine Anwendung des TTDSG scheidet aus.

Auf welchen Unterseiten sind Einwilligungs-Banner erforderlich?

Viele Webseiten führen nur auf einzelnen speziellen Unterseiten einwilligungsbedürftige Verarbeitungen (einschließlich des Setzens oder Auslesens von Cookies) durch. Dann ist es nicht notwendig und sinnvoll, bereits auf der Startseite oder auf jeder Seite eines komplexen Internet-Angebots eine Einwilligung einzuholen. Es sollten nur dort Einwilligungen eingeholt werden, wo dies auch notwendig ist. Auch vor dem Hintergrund des Transparenzgebots sollten Einwilligungen nur dann eingeholt werden, wenn sie notwendig sind.

Das Impressum und die Datenschutzinformationen nach Artikel 13, 14 DS-GVO müssen stets ohne Behinderung durch einen Einwilligungsbanner oder ähnliches erreichbar sein.

Die Inhalte des Informationsangebots stellen keine Rechtsberatung dar. Wenn du eine rechtliche Prüfung deines Einzelfalls benötigst, dann wende dich bitte an einen Rechtsanwalt. pdir möchte keine Rechtsberatung leisten.

Verwandte Themen: Contao Cookiebar einbinden, Contao 4.13, Contao 4.9, Contao Consent Tool, Cookie-Lösung für Contao, Cookie Opt In für Contao, Cookies in Contao, Cookie Consent Lösung für Themes

Letzte Aktualisierung: 18.03.2022

Zurück