Materialien Einwilligung zur Datenverarbeitung
Hier stellen wir Ihnen ein Beispiel-Layer für die Einwilligung zur Datenverarbeitung zur Verfügung. Das Designbeispiel berücksichtigt das aktuelle EuGH-Urteil vom 01.10.2019.
Es umfasst die Anpassungen in der Shopkonfiguration shop.config, den HTML-Quellcode für den Layer, einen Link zum erneuten Öffnen des Layers und ein Beispiel für zusätzliche CSS-Styles.
Sie können Layer und Konfiguration im Mustershop v8s-demoshop.websale.biz "live in action" erleben.
Wegweiser: Einwilligung zur Datenverarbeitung (Cookies)
Anpassungen der Shopkonfiguration shop.config
###################################################################################
### Einwilligung zur Datenverarbeitung ###
###################################################################################
<AgreementCookies>
Allow = yes
<+Entry>
ID = cookiebasket
Type = OptIn
Preselection = unchecked
Name = Warenkorb für nächsten Besuch speichern
Descr =
ConsentGroupID = comfort
+WEBSALEService = CookieBasket
</+Entry>
<+Entry>
ID = welcomecookie
Type = OptIn
Preselection = unchecked
Name = Persönliche Begrüßung
Descr =
ConsentGroupID = comfort
+WEBSALEService = WelcomeCookie
</+Entry>
<+Entry>
ID = googleMaps
Type = OptIn
Preselection = unchecked
Name = Anfahrtsplanung mit Google Maps
Descr =
ConsentGroupID = comfort
</+Entry>
<+Entry>
ID = youtube
Type = OptIn
Preselection = unchecked
Name = Produktvideos über YouTube
Descr =
ConsentGroupID = comfort
</+Entry>
<+Entry>
ID = google
Type = OptIn
Preselection = unchecked
Name = Google Analytics
Descr =
ConsentGroupID = optimize
</+Entry>
<+Entry>
ID = econda
Type = OptIn
Preselection = unchecked
Name = Econda
Descr =
ConsentGroupID = optimize
</+Entry>
<+Entry>
ID = googleTagManager
Type = OptIn
Preselection = unchecked
Name = Google Tag Manager
Descr =
ConsentGroupID = marketing
</+Entry>
<+Entry>
ID = instagram
Type = OptIn
Preselection = unchecked
Name = Instagram
Descr =
ConsentGroupID = marketing
</+Entry>
<+Entry>
ID = pinterest
Type = OptIn
Preselection = unchecked
Name = Pinterest
Descr =
ConsentGroupID = marketing
</+Entry>
<+Entry>
ID = twitter
Type = OptIn
Preselection = unchecked
Name = Twitter
Descr =
ConsentGroupID = marketing
</+Entry>
<+ConsentGroupInfo>
ConsentGroupID = comfort
Name = Komfortfunktionen
Descr = Wir möchten die Bedienung dieses Shops für Sie möglichst komfortabel gestalten.
</+ConsentGroupInfo>
<+ConsentGroupInfo>
ConsentGroupID = optimize
Name = Shop-Optimierungen
Descr = Um den Shop zu optimieren möchten wir Dienste nutzen die Daten erheben und aggregieren und uns diese als statistische Übersicht zur Verfügung stellen.
</+ConsentGroupInfo>
<+ConsentGroupInfo>
ConsentGroupID = marketing
Name = Social Media / Marketing Funktionen
Descr = Zu Werbezwecken dürfen Nutzungsdaten erhoben und mit statistischen Methoden zu einem Nutzerprofil zusammengefasst werden. Dies wird Interessengruppen zugeordnet, an die webseitenübergreifend Werbung ausgespielt wird.
</+ConsentGroupInfo>
</AgreementCookies>
HTML-Quellcode auf Basis von Bootstrap ver. 4.1.3 und jQuery 3.4.1
<body>
...
<div id="agreementPrivacy" class="py-3 px-sm-3"{!AC-AgreementNotMadeOrNeedsUpdate} style="display: none;"{/!AC-AgreementNotMadeOrNeedsUpdate}>
<div class="container-fluid">
<div class="row">
<div class="col">
<p class="lead mb-1">Einwilligung zur Datenverarbeitung</p>
<p class="small">Wir möchten Dienste von Drittanbietern nutzen, um den Shop und unsere Dienste zu verbessern
und optimal zu gestalten (Komfortfunktionen, Shop-Optimierung). Weiter wollen wir unsere Produkte bewerben (Social Media/Marketing).<br>
Dafür können Sie hier Ihre Einwilligung erteilen und jederzeit widerrufen. Weitere Informationen dazu finden Sie in unserer
<a href="~WS-LoadTpl(tpl_datenschutz.htm,Datenschutz)~" class="text-body"><u>Datenschutzerklärung</u></a>.</p>
</div>
<div class="col-12 mt-2">
<div class="row">
<div class="col-12 col-sm-6">
<input type="checkbox" value="" onclick="ws_agreement_updatecheckboxes();" class="~AC-ConsentAll_CheckboxClass~" ~AC-ConsentAll_CheckboxIsChecked~>
<b>Alle Dienste erlauben</b>
</div>
<div class="col-12 col-sm-6">
<input type="button" onclick="ws_agreementcookies_set(); $('#agreementPrivacy').hide(); $('#agreementPrivacy').removeClass('isFixed');
$('#cookieDetails').addClass('d-none'); $('#cookieDetailToggler').removeClass('open');" value="Einstellungen speichern" class="btn btn-block btn-success">
</div>
</div>
<div class="cursorPointer clearfix mt-2">
<span id="cookieDetailToggler" onclick="$('#cookieDetails').toggleClass('d-none'); $('#agreementPrivacy').toggleClass('isFixed'); $(this).toggleClass('open');">
Details<i class="fa fa-angle-down ml-1" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div id="cookieDetails" class="d-none">
~DC-DynamicLoop1_set($AC-ConsentGroupList$)~
{@DC-DynamicLoop1}
{AC-ConsentGroup($DC-DynamicLoop1_data$)}
<div class="mb-3">
<div class="mt-3 p-3 border border-secondary">
<div class="font-weight-bold mb-1">
<input type="checkbox" value="" onclick="ws_agreement_updatecheckboxes();" class="~AC-ConsentGroup_CheckboxClass~" ~AC-ConsentGroup_CheckboxIsChecked~>
<b>Alle ~AC-ConsentGroup_Name~ erlauben</b>
</div>
<div class="small">~AC-ConsentGroup_Descr~</div>
{AC-Entry}
<div class="row mt-2 ml-2">
{@AC-Entry($DC-DynamicLoop1_data$)}
<div class="col-6 mb-2">
<input type="checkbox" value="" onclick="ws_agreement_updatecheckboxes();" class="~AC-Entry_CheckboxClass~" ~AC-Entry_CheckboxIsChecked~>
~AC-Entry_Name~
</div>
{/@AC-Entry($DC-DynamicLoop1_data$)}
</div>
{/AC-Entry}
</div>
</div>
{/AC-ConsentGroup($DC-DynamicLoop1_data$)}
{/@DC-DynamicLoop1}
</div>
</div>
</div>
...
</body>
Hinweis: |
|
|
Sie können den Layer auch mit Bootstrap 3 verwenden. Beachten Sie, dass Sie bei Verwendung von Bootstrap 3 die CSS-Klassen des oben wiedergegebenen Beispielcodes anpassen müssen. |
Link zum erneuten Öffnen des Layers, z. B. auf der Datenschutzseite
<body>
...
<div class="btn btn-primary mb-5" onclick="$('#agreementPrivacy').show();">Einwilligung zur Datenverarbeitung ändern</div>
...
</body>
Individuelles CSS
/* Zusätzlich zu den Standard-CSS-Anweisungen von Bootstrap v4.1.3 */
#agreementPrivacy {
position: fixed;
background: #dde5ee;
z-index: 9999999;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 10px rgba(0,0,0,.1);
}
@media (min-width:576px) {
#agreementPrivacy {
right: auto;
width: 500px;
/*height: 313px;*/
}
}
#agreementPrivacy.isFixed {
height: 100%;
overflow-y: auto;
}
#cookieDetailToggler.open > i.fa {
transform: rotate(180deg);
}