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

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'
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'wait_for_update': 2000 // milliseconds to wait for update
  });

  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.

Implementierung in PrivacyWire - in depth

Das Wichtigste:

PrivacyWire kann eine Funktion aufrufen, nachdem es die User Preferences aktualisiert hat. Du trägst den Namen dieser Funktion einfach in der Konfiguration ein. Z.b. updateConsentFromPrivacyWire.
Diese Funktion trägst du z.B. zusätzlich zum Google GTAG Code im Header ein.
PrivacyWire legt die Usereinstellungen im LocalStorage ab. Dort kann sich die neue Funktion die Einstellungen holen und an Google weiterreichen.

Sonst:

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.
Es gibt den Parameter silent=false der wohl an die custom Function mit übergeben wird. Bedeutung habe ich noch nicht recherchiert.

Komplettes Beispiel PrivacyWire und Google Consent v2

Trage in der Konfiguration von PrivacyWire die Funktion updateConsentFromPrivacyWire ein.

Hier folgt der Code für

Google Tag Manager (kannst du auch auf der Google Tag Manager Seite kopieren)
Google Consent V2 + Default Settings
Update Funktion die von PrivacyWire aufgerufen wird und die neuen Preferences an Google sendet.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ID-HERE');</script>
<!-- End Google Tag Manager -->

<!-- GOOGLE CONSENT V2 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GTM-ID-HERE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'wait_for_update': 2000 // milliseconds to wait for update
  });

  gtag('js', new Date());
  gtag('config', 'GTM-ID-HERE');
</script>
<!-- End GOOGLE CONSENT V2 -->

<!-- Update user preferences -->
<script>

function updateConsentFromPrivacyWire() {
  console.log('update consent from privacy wire...');
  const privacyWireData = localStorage.getItem('privacywire');
  if (privacyWireData) {
    try {
      const consentData = JSON.parse(privacyWireData);
      const consentPreferences = {
        'ad_storage': consentData.cookieGroups.marketing ? 'granted' : 'denied',
        'analytics_storage': consentData.cookieGroups.statistics ? 'granted' : 'denied',
        'ad_user_data': consentData.cookieGroups.marketing ? 'granted' : 'denied',
        'ad_personalization': consentData.cookieGroups.marketing ? 'granted' : 'denied'
      };
      
      // Update gogle consent
      gtag('consent', 'update', consentPreferences);
      console.log(consentPreferences);
    } catch (e) {
      console.error('Error parsing PrivacyWire-Data:', e);
    }
  } else {
    console.warn('No PrivacyWire-Data found in localStorage');
  }
}
// Update consent at pageload
document.addEventListener('DOMContentLoaded', updateConsentFromPrivacyWire);
</script>

PrivacyWire - ProcessWire Modul

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

Implementierung in PrivacyWire - in depth

Komplettes Beispiel PrivacyWire und Google Consent v2

Navigationsmenü

Ansichten

Meine Werkzeuge

Navigation

Suche

Werkzeuge