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.

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.