PrivacyWire - ProcessWire Modul: Unterschied zwischen den Versionen

Version vom 17. Mai 2024, 10:38 Uhr

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

Links

Google Consent Mode v2

Integration und Implementierung

Einfügen des Tags

Der Google Consent Mode Tag muss in den Quellcode der Website eingebunden werden, vorzugsweise im Header.

Einwilligungszustände festlegen

Festlegung der Einwilligungszustände (z. B. granted oder denied) für verschiedene Cookie-Typen.

Konfiguration der Tags

Konfiguration der Google-Tags (z. B. Google Analytics, Google Ads), um das Verhalten basierend auf den Einwilligungszuständen zu steuern.

Hier ein Beispiel, wie der Code für den Consent Mode aussehen könnte:

// Einfügen des gtag.js-Tags mit Unterstützung für Consent Mode
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied'
  });

  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Wenn sich die Einwilligungspräferenzen des Nutzers ändern, kann der Code dynamisch angepasst werden:

// Aktualisieren der Einwilligungspräferenzen basierend auf Nutzerentscheidung
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted'
});

Google Tag mit PrivacyWire

Wir benötigen einen Weg damit PrivacyWire die oben gezeigte Einwilligungsänderung steuern kann.

Allgemein müssen wir folgendes realsieren:

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:
1. User speichert Banner
2. 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.

PrivacyWire - ProcessWire Modul: Unterschied zwischen den Versionen

Version vom 17. Mai 2024, 10:38 Uhr

Inhaltsverzeichnis

Links

Quickstart Cookie Consent für ProcessWire

Cookie Options anzeigen

CSS

Video Embed Opt-In

Bsp. iFrame mit eigenem Opt Out

PrivacyWire - Lokalisieren

Übersetzung wird nicht angezeigt

Google Consent v2

Links

Integration und Implementierung

Google Tag mit PrivacyWire

PrivacyWire - in depth

Navigationsmenü

Ansichten

Meine Werkzeuge

Navigation

Suche

Werkzeuge

@@ Zeile 221: / Zeile 221: @@
   [[Google Consent Mode v2]]
+=== Integration und Implementierung ===
+'''Einfügen des Tags'''
+Der Google Consent Mode Tag muss in den Quellcode der Website eingebunden werden, vorzugsweise im Header.
+'''Einwilligungszustände festlegen'''
+Festlegung der Einwilligungszustände (z. B. granted oder denied) für verschiedene Cookie-Typen.
+'''Konfiguration der Tags'''
+Konfiguration der Google-Tags (z. B. Google Analytics, Google Ads), um das Verhalten basierend auf den Einwilligungszuständen zu steuern.
+Hier ein Beispiel, wie der Code für den Consent Mode aussehen könnte:
+<syntaxhighlight lang="javascript">
+// Einfügen des gtag.js-Tags mit Unterstützung für Consent Mode
+<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('consent', 'default', {
+    'ad_storage': 'denied',
+    'analytics_storage': 'denied'
+  });
+  gtag('js', new Date());
+  gtag('config', 'GA_MEASUREMENT_ID');
+</script>
+</syntaxhighlight>
+Wenn sich die Einwilligungspräferenzen des Nutzers ändern, kann der Code dynamisch angepasst werden:
+<syntaxhighlight lang="javascript">
+// Aktualisieren der Einwilligungspräferenzen basierend auf Nutzerentscheidung
+gtag('consent', 'update', {
+  'ad_storage': 'granted',
+  'analytics_storage': 'granted'
+});
+</syntaxhighlight>
 === Google Tag mit PrivacyWire ===
+Wir benötigen einen Weg damit PrivacyWire die oben gezeigte Einwilligungsänderung steuern kann.
+Allgemein müssen wir folgendes realsieren:
 # Google Tag integrieren (mit v2 Option)
 # Google Tag NICHT mit PrivacyWire aussperren