PrivacyWire - ProcessWire Modul

Modul zum Anzeigen eines Cookie Banners und zum Blockieren von Skripten, Externen Medien etc. Das Modul passt das HTML an

Links

https://processwire.com/modules/privacy-wire/
https://processwire.com/talk/topic/23118-privacywire-cookie-management-async-external-asset-loading/

Quickstart Cookie Consent für ProcessWire

• Modul installieren (PrivacyWire)
• In der Konfiguration Labels übersetzen
• Benötigte Ketegorien auswählen
  • Zuordnung der Kategorien funktioniert über data-category Attribut.
• Skripte anpassen
  • type bei skripten mit text/plain (wird bei consent durch javascript ersetzt)
  • src durch data-src ersetzen
  • data-category hinzufügen
  • Normale Skripte: type="text/plain" data-type="text/javascript" data-category="marketing"
  • Externe Skripte: data-src="..."

Beispiele:

<script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/marketing/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js">  </script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async type="text/plain" data-type="text/javascript" data-category="marketing" data-src="https://www.googletagmanager.com/gtag/js?id=G-DQPX4V13MY"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-DQPX4V13MY');
</script>

Cookie Options anzeigen

So gibst du einen Link aus mit dem der User die Cookie Einstellungen erneut setzen kann.

[[privacywire-choose-cookies]] - Mit Textformatter

<a href="#" class="privacywire-show-options">Show Cookie Options</a> - als Link
<button class="privacywire-show-options">Show Cookie Options</button>  - als Button

CSS

Hinweis: Zusätzliche Styles. Standardstyles müssen eingebunden sein.

.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{
    background-color: #009999 !important;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
    color: #fff !important;
}

.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{ 
    background-color: #0e71b1 !important;
    color: #fff;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
    color: #fff !important;
}
.privacywire button{
    cursor: pointer;
}
.privacywire input{
    position: relative;
    opacity: 1;
    margin-right: 0.5em;
    color: #fff;
    opacity: 1;
}
.privacywire label{
    color: #fff;;
}

Betonter Accept Button / bessere Abstände / saubere Buttons:

.privacywire{
    padding: 2em !important;
}
.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{ 
    background-color: #17428b !important;
    color: #fff;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
    color: #fff !important;
}
.privacywire ul{
    list-style-type: none;
}
.privacywire input{
    position: relative;
    opacity: 1;
    margin-right: 0.5em;
    color: #fff;
    opacity: 1;
}
.privacywire label{
    color: #fff;;
}
.privacywire-page-links{
    margin-top: 0.5rem;
}
.privacywire button{
    background: #b3b3b3;
    color: #fff;
    font-weight: normal;
    border: none;
    padding: 12px;
    border-radius: 0px;
    cursor: pointer;
    text-transform: uppercase;
}
.privacywire button.allow-all{
    background: #3fa535;
    border-color: #3fa535;
    color: #fff;
}

SCSS Beispiel

// Privacy Banner
$privacywire-bg-color:#d0c5b8;
$privacywire-text-color: #000;
$privacywire-button-text-color: #fff;
$privacywire-button-allow-text-color: #fff;
$privacywire-button-bg-color: #b3b3b3;
$privacywire-button-allow-bg-color: #3fa535;
#privacywire-wrapper{
	ul{
		list-style-type: none;
	}
	input{
		position: relative;
		opacity: 1;
		margin-right: 0.5em;
		color: $privacywire-text-color;
		opacity: 1;
	}
	label{
		color: $privacywire-text-color;;
	}
	.privacywire{
		z-index: 999!important;
		padding: 2em !important;
	}
	.privacywire-banner,
	.privacywire-options,
	.privacywire-message{ 
		background-color: $privacywire-bg-color !important;
		color: $privacywire-text-color;
		a{
			color: $privacywire-text-color !important;
		}
		button{
			background: $privacywire-button-bg-color;
			color: $privacywire-button-text-color;
			font-weight: normal;
			border: none;
			padding: 12px;
			border-radius: 0px;
			cursor: pointer;
			text-transform: uppercase;
			&.allow-all{
				background: $privacywire-button-allow-bg-color;
				border-color: $privacywire-button-allow-bg-color;
				color: $privacywire-button-allow-text-color;
			}
		}

	}
	.privacywire-page-links{
		margin-top: 0.5rem;
	}
}

Video Embed Opt-In

Im VideoEmbed Plugin kann man die Kategorie auswählen (z.B. external Media)

Bsp. iFrame mit eigenem Opt Out

Mit dem Attribut data-ask-consent="1" kann man auch einzelne Elemente freigeben.

<iframe data-src="https://processwire.com/" data-category="marketing" data-ask-consent="1" class="require-consent" frameborder="0" height="400" width="400"></iframe>

Available attributes:

Attribute	Info	Description	Type
class require-consent	optional (required if config option enabled)	If the config option "Detect consent windows by class require-consent instead of data-attribute" is enabled	string
data-category	required	defines the assigned cookie group for this element	string
data-type	optional (required for scripts)	replaces the type attribute after giving consent	string
data-src	optional (required for external scripts, images or iframes)	replaces the src attribute after giving consent	string
data-srset	optional	replaces the srcset attribute for images after giving consent	string
data-ask-consent	optional	Replace element with Opt-In-Element	bool 0/1

For script tags it is required to add type="text/plain", otherwise the script executes directly.

PrivacyWire - Lokalisieren

Dateien übersetzen oder in Einstellungen von Hand übersetzen. Siehe Webmynet Cloud, da gibt es CSV Dateien mit fertigen Übersetzungen zum Hochladen. De.utsch muss als Defaultsprache festgelegt sein.

Übersetzung wird nicht angezeigt

• Schau ob die Defaultsprache Deutsch ist.
• Wenn du angemeldet bist muss deine Usersprache ebenfalls auf Deutsch stehen.

Google Consent v2

Mit Google Consent v2 möchte Google Datenschutzkonform werden. Google Consent v2 verlangt, dass der Google Tagmanager sogenannte Signals an Google schickt, je nachdem welche Optionen der User ausgewählt hat. Dementsprechend verspricht Google sich and die Datenschutzvorgaben zu halten. Aus sicht des Datenschützers fragwürdig aber typisch Google. Es löst zumindest das Problem, dass man oft nicht weiß, zu welchem Zweck der GTag gerade verwendet wird.

Einwilligungsmode

https://support.google.com/google-ads/answer/10000067?hl=de

Wenn man nicht wollte das Google einen Trackt musste man in seinem Google Konto dieses deaktivieren. Das ist eigentlich nicht DSGVO Konform. In V2 löst Google das anders. Die Idee ist, dass eine Website basierend auf den Cookie Banner Einstellungen Google informiert was die Wünsche des Users sind.

Es gibt zwei Modi:

Einfacher Einwilligungsmodus - das ist wie ein funktionierender Cookie Banner. Google bekommt nichts mit wenn jemand nicht einwilligt.

Erweiterter Modus - Google bekommt den Ping mit, überträgt aber (hoffentlich) keine Daten bis der User zugestimmt hat.

Basics zum neuen Consent V2

https://support.google.com/tagmanager/answer/13695607?hl=de (Änderungen beim Consent erklärt)

Im wesentlichen kommen Parameter dazu, mit denen man den Datenschutz steuern kann:

https://support.google.com/tagmanager/answer/13802165

Im Link oben steht was man Einstellen kann und was man beachten sollte.

https://support.google.com/tagmanager/answer/13802165

Hier findet sich eine Übersicht über die relevanten Parameter zum Einwilligungsmodus. Die benötigt man wenn man was programmieren möchte.

Consent für Google einrichten

Google schlägt vor man solle eine CMP (consent management platform) nutzen. Also Cookie Bot o.ä. Allerdings verlangen diese mittlerweile um die 8 Euro aufwärts pro Monat. Es gibt aber auch die Möglichkeit selbst eine Lösung zu bauen.

 https://developers.google.com/tag-platform/tag-manager/templates/consent-apis?hl=de

Lösung 1: Template für Google Tag Manager

Googles vorgeschlagener Weg ist es Code über den Google Tagmanager einzuschleusen. Dafür soll man ein sog. Template im Google Tagmanager einrichten:

https://developers.google.com/tag-platform/tag-manager/templates/consent-apis?hl=de

Man kann als Developer solche Templates auch der Community zur Verfügung stellen:

https://developers.google.com/tag-platform/tag-manager/templates/gallery?hl=de

Allgemeines Vorgehen zur Template Erstellung

• Neue Vorlage im Tagmanager anlegen
• Default Settings werden festgelegt (deny für alles)
• Implementierungscode eingeben. Im Link oben gibt es ein Beispiel das darauf beruht, dass es Cookies gibt die ausgelesen werden können. Um diese zu setzen könnte man in PrivacyWire z.B. Cookies mit einer Custom Funktion passend setzen.
• Der Code läuft in einer Google Sandbox, deshalb muss man ihm explizit Rechte zum Cookie lesen etc. zuweisen.
• Google schlägt vor noch Unit Tests für den Code zu erstellen. Link wie das geht ist in der Beschreibung von Google.
• Um die Vorlage einzubauen gibt es noch einen Codeschnipsel, der einen EventListener Callback enthält, der auf einen Consent Change wartet.
• Zu guter letzt veranlasst man sein eigenes Banner bei einem Wechsel der Optionen updateConsentState aufzurufen. Man muss allerdings aufpassen, dass die Funktion auch schon geladen ist. Google schlägt vor erstmal 500ms zu warten.

Lösung 2: Eigner Code auf der Webseite

Todo

Google Tag mit PrivacyWire

1. Google Tag integrieren (mit v2 Option)
2. Google Tag NICHT mit PrivacyWire aussperren
3. PrivacyWire mit JS Funktion ausstatten, die passenden Signals an Google sendet.
4. Funktionen auslösen bei:
   1. User speichert Banner
   2. User hat Banner gespeichert und kommt auf die Seite => Cookies checken und Signale senden.
5. Google Tag defaultmäßig auf keine Cookies erlaubt stellen.

PrivacyWire - in depth

Einige hilfreiche Details.

saveConsent(silent = false) Funktion

Im localStorage wird der Schlüssel privacyWire angelegt und ein JSON Objekt mit den Usereinstellungen abgelegt. Der alte Schlüssel wird gelöscht.

privacywire:"{"version":1,"cookieGroups":{"necessary":true,"functional":false,"statistics":true,"marketing":false,"external_media":false}}"

Danach wird der Banner ausgeblendet und die Bestätigung angezeigt. Dann wird der Code der betroffenen Skripte etc. upgedatet. Am Ende wird eine Custom Funktion aufgerufen die man selbst erstellen kann.