Cookie Consent Manager

Einleitung

Ab Version 7.14 kann im Shop über einen integrierten Consent Manager erst die Einwilligung des Anwenders eingeholt werden bevor bestimmte Skripte im Shop ausgeführt werden über die z.B. Cookies gespeichert/Daten an externe Anbieter übermittelt werden.

Der integrierte Consent Manager basiert auf Klaro! und wurde zur Verwendung im Shop angepasst.

Die Integration ist standardmäßig im aktuellen MM7-Standarddesign enthalten und wird, sofern das Standarddesign/die Standardelemente verwendet werden und an den relevanten Elementen keine Anpassungen vorgenommen wurden, automatisch beim Update des Shops eingespielt.

Wurden beim Update Änderungen an den aktualisierten Standardelementen erkannt, können auf Wunsch die geänderten Standardelemente trotzdem importiert werden. Die eigenen Anpassungen an diesen Elementen gehen dabei verloren was sich ggf. auf die Funktionalität/das Aussehen des Shops auswirkt.

Bei Verwendung einer älteren Designversion kann kein automatisches Update erfolgen, in diesem Fall muss der Consent Manager manuell im Shop eingebaut werden.

Dazu muss der folgende Code ans Ende des Seitentemplates eingefügt werden:

<?mst !if System.UseCookieConsent ?>

<script src="{?System.ShopFrontRoot}design/published/bootstrap/js/alzuracookieconsent/config.js"></script>

<script src="{?System.ShopFrontRoot}design/published/bootstrap/js/alzuracookieconsent/alzura-cookie-consent.js"></script>

<?mst !end ?>

Konfiguration

Consent Manager aktivieren

Bei Update eines existierenden Shops auf Version 7.14 ist der Consent Manager standardmäßig deaktiviert.

Dieser kann über Einstellungen/Shop-Fronten für die jeweilige Shop-Front unter Verhalten>Allgemein über die Option "Externe Skripte/Cookies nur nach Zustimmung des Nutzers ausführen" aktiviert werden.

Bis die Aktivierung erfolgt ist und der Shop neu erzeugt wurde werden die entsprechenden Skripte im Shop wie zuvor ohne Nachfrage ausgeführt.

Bei neu ab Version 7.14 angelegten Shops ist der Consent Manager automatisch für die Standard-Shop-Front aktiv.

Allgemein

Die zum Consent Manager zugehörigen Dateien liegen nach dem Update im Datei-Explorer des Shops (+>Stammdaten>Datei-Explorer) unter Design/published/bootstrap/js/alzuracookieconsent, bei Verwendung zusätzlicher Shop-Fronten befindet sich das Verzeichnis der entsprechenden zusätzlichen Shop-Fronten jeweils unter SFRoot/<ID der Shop-Front>.

Da abhängig von den Shop-Einstellungen und den manuell im Shop integrierten Skripten potentiell in jedem Shop unterschiedliche relevante Skripte ausgeführt werden für die die Zustimmung des Nutzers erforderlich ist (die ggf. auch überhaupt nicht im Standard-Lieferumfang enthalten sind), muss hier pro Shop eine individuelle Konfigurationsdatei mit den jeweils in der Shop-Front aktiven Skripten erstellt werden.

Für die Konfiguration relevant ist hier die "config.js", in dieser müssen z.B. die im Shop verwendeten Skripte (apps) sowie zugehörige Bezeichnungen/Übersetzungen, Cookies, ... und ggf. Links zu Informationsseiten gesetzt werden. Die entsprechenden Skripte sind jeweils wieder in Kategorien einsortiert denen auch kategorieweise zugestimmt werden kann.

Erfolgt eine nachträgliche Änderung an der Konfigurationsdatei wird der Consent Manager dem Nutzer automatisch erneut mit einem entsprechenden Hinweis angezeigt.

In der als Standard vom Shop gesetzten Konfiguration werden nur die im Auslieferungszustand des Shops aktiven Skripte behandelt, ist z.B. zusätzlich Google Analytics im Shop aktiv muss dies dann in der "config.js" ergänzt werden damit das Skript vom Nutzer erlaubt werden kann.

Speziell für Google Analytics befindet sich unter "examples/Beispiel Google Analytics" ein erweitertes Beispiel wie die "config.js" in diesem Fall z.B. aussehen kann. Unter "examples/Beispiel Diverse" gibt es zusätzlich ein Beispiel mit diversen anderen potentiellen Skriptanbietern.

Es ist unbedingt zu beachten, dass über den Consent Manager eingebundene Skripte (wie z.B. die Google Analytics-Integration im Shop) nur ausgeführt werden, wenn diese explizit in der "config.js" enthalten sind. Ist dies nicht der Fall würde z.B. der zu Google Analytics zugehörige Skriptcode nicht ausgeführt, auch wenn der Nutzer z.B. "Alle Cookies akzeptieren" wählt.

Eigenschaften der Konfigurationsdatei

elementID

Default: alzura-cookie-consent
Die ID des DIV-Elements das vom Consent Manager erstellt wird

responsive

Mögliche Werte: true oder false (Default: true)
Bei true ist das Layout responsive. Bei false wird ein fixes Layout mit einer Breite von 972 Pixeln verwendet.

consentPosition

Mögliche Werte: top oder bottom (Default: bottom)
Der Consent Manager kann entweder am oberen oder unteren Bildschirmrand angezeigt werden

breakpoints

Die für das responsive Design verwendeten Brechpunkte in Pixeln

tablet

Default: 768

desktop

Default: 1024

storageMethod

Mögliche Werte: localStorage oder cookie (Default: cookie)
Die Methode mit der die Auswahl des Benutzers gespeichert wird. Einige folgende Einstellungen wirken sich nur aus wenn cookie verwendet wird.

cookieName

Default: MondoCustomName
Der Name des Cookies das zur Speicherung der Benutzerauswahl verwendet wird. Dieser sollte für jeden Shop/jede Shop-Front einzigartig sein.

acceptedAllCookieExpiresAfterDays

Default: 36500
Anzahl an Tagen bis das Cookie abläuft wenn alle Cookies akzeptiert werden. Nach Ablauf des Cookies muss im Consent Manager eine erneute Zustimmung erfolgen.

acceptedSomeCookieExpiresAfterDays

Default: 28
Anzahl an Tagen bis das Cookie abläuft wenn nur ein Teil der Cookies akzeptiert werden. Nach Ablauf des Cookies muss im Consent Manager eine erneute Zustimmung erfolgen.

default

Mögliche Werte: true oder false (Default: false)
Globale Eigenschaft ob Skripte standardmäßig vorausgewählt sind oder nicht. Diese globale Eigenschaft wird von der jeweiligen gleichnamigen Eigenschaft des entsprechenden Skripts/der entsprechenden Kategorie überschrieben.

privacyPolicy

Liste der Links zur Datenschutzvereinbarung in den jeweiligen Sprachen. Es werden relative oder absolute Pfade akzeptiert.

privacyPolicy: {

        de: 'index.php?page=Privacy',

        en: 'index.php?page=Privacy',

},

imprint

Liste der Links zum Impressum in den jeweiligen Sprachen. Es werden relative oder absolute Pfade akzeptiert.

imprint: {

        de: 'index.php?page=Imprint',

        en: 'index.php?page=Imprint',

},

cookiePolicy

Liste der Links zur Cookie-Richtlinie in den jeweiligen Sprachen. Es werden relative oder absolute Pfade akzeptiert.

cookiePolicy: {

        de: 'index.php?page=Privacy',

        en: 'index.php?page=Privacy',

},

fallbackLanguage

Default: 'de'
Der Rückfallwert für die Sprache wenn keine Übersetzungen gefunden wurden.

languageMapping

Diese Eigenschaft kann verwendet werden um einer Sprache eine andere zuzuweisen

languageMapping: {

        at: 'de',

},

apps

Hierunter können die im Consent Manager abgefragten Anwendungen/Skripte konfiguriert werden.

    apps: [

        // Die einzelnen Einträge erscheinen in der Anlegereihenfolge

        {

            // Einzigartiger interner Name

            name: 'beispiel',

            // Voreinstellung? Überschreibt ggf. die globale Voreinstellung, wird von der entsprechenden Kategorieeigenschaft überschrieben

            default: false,

            // Anbieter

            provider: 'Saitow AG',

            // Liste mit Strings/regulären Ausdrücken der von der app gesetzten Cookies

            // Wenn keine Zustimmung zur App mehr gegeben ist löscht der Consent Manager diese automatisch

            // Es kann explizit ein Pfad/eine Domain für ein bestimmtes Cookie angegeben werden

            // Dies ist notwendig wenn Cookies gesetzt werden die nicht unter der aktuellen Domain oder mit einem Pfad gesetzt werden

            // Sind diese Angaben nicht korrekt gesetzt kann das Cookie nicht korrekt gelöscht werden

            cookies: ['cookiename1', 'cookiename2', [/^_cookie_.*$/, '/', 'domain']]

        },

categories

Hier können die im Consent Manager angezeigten Kategorien konfiguriert werden, unter denen die definierten Anwendungen einsortiert werden.

    categories: [

        {

            // Einzigartiger interner Name

            name: 'beispielkategorie',

            // Als Voreinstellung im Consent Manager aktivieren/deaktivieren (true/false)?

            // Es ist empfohlen wenn nicht zwingend notwendig diese Eigenschaft auf dem Standardwert false zu belassen

            default: false,

            // Kann die Einstellung im Consent Manager vom Nutzer geändert werden (true/false)?

            required: false,

            // Die verschiedenen apps die unter dieser Kategorie gelistet werden sollen

            apps: ['beispiel']

        },

        {

            name: 'essentiell',

            default: true,

            required: true,

            apps: ...

        },

    ]

translations

Hier können die im Consent Manager angezeigten Texte für die verschiedenen Sprachen überschrieben/hinterlegt werden.

translations: {

    de: {

        categories: {

            // Interner Name der Kategorie

            essentiell: {

                // Angezeigte Bezeichnung der Kategorie

                title: 'Essentiell',

                // Beschreibung der Kategorie

                description: 'Für die Verwendung zwingend erforderlich'

            },

            beispielkategorie: {

                title: 'Beispielkategorie',

                description: 'Beschreibung der Beispielkategorie.'

            },

        },

        apps: {

            // Interner Name der Anwendung

            beispiel: {

                // Angezeigte Bezeichnung der Anwendung

                title: 'Beispiel',

                // Beschreibung der Anwendung

                description: 'Beschreibung der Anwendung',

                // Link zur Datenschutzerklärung der Anwendung

                privacyPolicy: '<Link zur Seite>'

            },

        }

    },

    en: {

        categories: {

            ....

        },

        apps: {

            ...

        }

    },

}

Folgende Standardtexte sind gesetzt die ebenfalls über die translations überschrieben werden können.

consentNotice:
changeDescription: Es gab Änderungen seit Ihrem letzten Besuch. Bitte aktualisieren Sie Ihre Auswahl.
description:
Wir möchten Ihnen den bestmöglichen Service bieten. Dazu speichern wir Informationen über Ihren Besuch in sogenannten Cookies. Einige von ihnen sind essentiell, während andere uns helfen, diese Webseite und Ihre Erfahrung zu verbessern. Bis auf die notwendigen Cookies können Sie auswählen, welche Cookies gesetzt werden. Hier können Sie die {privacyPolicy}, die {cookiePolicy} und das {imprint} einsehen.
privacyPolicy: Datenschutzrichtlinie
imprint: Impressum
cookiePolicy: Cookie-Richtlinie
adjustSettings: Einstellungen anpassen

consentModal:
collapsible:
show: Cookie Informationen anzeigen
hide: Cookie Informationen ausblenden
checkbox:
acceptAll: Alle akzeptieren
acceptCookie: Cookie akzeptieren
cookieInformation:
name: Name
provider: Anbieter
purpose: Zweck
privacyPolicy: Datenschutzerklärung

close: Schließen
acceptSelected: Nur Auswahl akzeptieren
acceptAll: Alle Cookies akzeptieren
Drittanbieter/Tracking-Skripte anpassen
Damit im Shop vorhandene Skripte nicht automatisch beim Seitenaufruf ausgeführt werden muss an den entsprechenden Stellen die Einbindung des Skripts aktualisiert werden, dies betrifft insbesondere eigens im Design eingebundene Skripte (z.B. Facebook Like-Buttons, ...)

Inline-Skripte
Für Inline-Skripte muss bei der Einbindung der ursprüngliche type mit "text/plain" ersetzt werden (dadurch führt der Browser das Skript nicht automatisch aus) und ein data-Attribut mit dem ursprünglichen type ergänzt werden (z.B. data-type="application/javascript").

Zusätzlich muss das Attribut data-name ergänzt werden, welches den Namen der entsprechenden app aus der Konfigurationsdatei enthält (z.B. data-name="google").

<script type="text/plain"

data-type="application/javascript"

data-name="appname">

//...

</script>

Externe Skripte und Ressourcen

Für externe Skripte muss im Grunde der selbe Ablauf erfolgen, zusätzlich muss noch das src-Attribut in data-src umbenannt werden damit der Browser das Skript nicht ohne Zustimmung des Anwenders lädt.

Dies funktioniert z.B. auch bei Bildern/Tracking-Pixeln.

<script type="text/plain"

data-type="application/javascript"

data-src="https://url/skript.js"

data-name="appname">

</script>

<img data-name="appname" data-src="https://url/bild.png" />

Vom Shop erzeugter Code

Sofern der Consent Manager aktiv ist wird der vom Shop selbst erzeugte Skriptcode bereits automatisch entsprechend erzeugt.

Vom Shop werden je nach Konfiguration ggf. folgende apps vorgegeben/verwendet:

• shop
• googlemaps
• google
• piwik
• findologic
• beezup
• adbutler
• affilinet
• payperclick
• thirdpartytrackingcustom1 - thirdpartytrackingcustom4

Damit der Skriptcode z.B. nach Aktivierung eines Moduls in den Shop-Einstellungen auch wirklich ausgeführt wird, muss in der config.js die entsprechende Anwendung zwingend enthalten sein. Wird also z.B. Google Analytics im Shop aktiviert muss in der config.js die app "google" definiert sein, ansonsten wird der Code unabhängig von der Auswahl des Nutzers im Consent Manager nicht ausgeführt.