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 Kategorien auswählen
  • Zuordnung der Kategorien funktioniert über data-category Attribut.
• Externe 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="..."
• Banner anpassen
• Link zu Cookie Einstellungen
• Google Consent V2 Skript

Externe Skripte anpassen

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>

Link zu Cookie Einstellungen anzeigen

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

Möglichkeit 1 - Textformatter

Den Textformatter der mit PrivacyWire im Editor einbinden und dann den passenden Tag setzen:

 [[privacywire-choose-cookies]]

Möglichkeit 2 - HTML Code

<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. Deutsch 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.

Der Code für das Integrieren kommt so von Google:

<!-- Google tag (gtag.js) -->
<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('js', new Date());

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

Wir können beim laden der Webseite Default Einstellungen mitgeben:

// 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:

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.

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>

Testen der Implementierung

Über tagassistant.google.com

Sollte etwa so ausschauen:

Testen der Google Consent V2 Einstellung

Analytics und Conversions

Analytics

Google Analytics Tag im GTM erstellen

   Gehe zu deinem Google Tag Manager Konto und öffne den entsprechenden Container.
   Erstelle ein neues Tag:
       Klicke auf "Tags" im linken Menü.
       Klicke auf "Neu" und gib dem Tag einen Namen (z. B. "Google Analytics - Universal Analytics").
   Tag-Typ auswählen:
       Klicke auf "Tag-Konfiguration" und wähle "Google Analytics: Universal Analytics" aus.
   Tracking-Typ auswählen:
       Wähle "Seitenaufruf" als Tracking-Typ.
   Google Analytics Einstellungen konfigurieren:
       Klicke auf "Neue Variable" unter "Google Analytics-Einstellungen" und erstelle eine neue Variable für deine Google Analytics ID (z. B. "GA-XXXXXX").
       Gib deine Google Analytics Tracking-ID ein (UA-XXXXXX-Y).
       Speichere die Variable.
   Trigger hinzufügen:
       Klicke auf "Triggering" und wähle "All Pages" (Alle Seiten) aus.
   Tag speichern:
       Speichere das Tag und veröffentliche die Änderungen im GTM.

Conversions

Werden die Tags für das Conversion Tracking auch über den GTM ausgespielt?

ChatGPT

Ja, auch die Tags für das Conversion Tracking können (und sollten) über den Google Tag Manager (GTM) verwaltet werden. Das hat den Vorteil, dass du alle deine Tags zentral an einem Ort verwalten und flexibel auf Einwilligungen reagieren kannst. Einrichten von Conversion Tracking im Google Tag Manager

Hier sind die Schritte, um Conversion Tracking Tags im GTM einzurichten: 1. Conversion Tracking Tag im GTM erstellen

   Öffne dein Google Tag Manager Konto und wähle den entsprechenden Container.
   Erstelle ein neues Tag:
       Klicke auf "Tags" im linken Menü.
       Klicke auf "Neu" und gib dem Tag einen Namen (z. B. "Google Ads Conversion Tracking").
   Tag-Typ auswählen:
       Klicke auf "Tag-Konfiguration" und wähle den entsprechenden Tag-Typ aus, z. B. "Google Ads Conversion Tracking".
   Conversion ID und Conversion Label eingeben:
       Gib die Conversion ID und das Conversion Label ein, die du von deinem Google Ads Konto erhalten hast.

2. Conversion Tracking Trigger hinzufügen

   Trigger hinzufügen:
       Klicke auf "Triggering" und wähle einen passenden Trigger aus, z. B. "Page View" für alle Seitenaufrufe oder einen benutzerdefinierten Trigger für spezifische Conversion-Ereignisse.
       Du kannst benutzerdefinierte Trigger für spezifische Conversion-Aktionen wie Formulareinsendungen oder Käufe erstellen.

3. Google Consent Mode und PrivacyWire Einbindung

Stelle sicher, dass du den Google Consent Mode und die PrivacyWire Einbindung gemäß den Einwilligungen der Nutzer aktualisierst.

Einrichten von Conversion Tracking im GTM 1. Gehe zu deinem GTM-Konto und erstelle ein neues Tag für Conversion Tracking.

   Klicke auf "Tags" und dann auf "Neu".
   Wähle "Google Ads Conversion Tracking" als Tag-Typ.
   Gib deine Conversion ID und dein Conversion Label ein.

2. Erstelle den Trigger für das Conversion Tracking.

   Klicke auf "Trigger" und dann auf "Neu".
   Wähle einen Trigger-Typ aus, z. B. "Page View" oder einen benutzerdefinierten Trigger für spezifische Aktionen.

3. Füge den Trigger zum Conversion Tracking Tag hinzu.

   Verknüpfe den Trigger mit deinem Conversion Tracking Tag.

4. Veröffentliche die Änderungen im GTM.

   Klicke auf "Senden" und dann auf "Veröffentlichen", um die Änderungen zu aktivieren.

Mit dieser Konfiguration werden alle Tags, einschließlich der Conversion Tracking Tags, über den Google Tag Manager verwaltet und basierend auf den Einwilligungen der Nutzer korrekt ausgelöst.