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.
Google Tag mit PrivacyWire
- Google Tag integrieren (mit v2 Option)
- Google Tag NICHT mit PrivacyWire aussperren
- PrivacyWire mit JS Funktion ausstatten, die passenden Signals an Google sendet.
- Funktionen auslösen bei:
- User speichert Banner
- User hat Banner gespeichert und kommt auf die Seite => Cookies checken und Signale senden.
- 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.
