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

[[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;
}

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.