Cookie Consent

Wenn du den bisher genutzten Cookie Consent Manager weiterhin nutzten möchtest, kannst du diesen wie folgt installieren:

Zuerst benötigst du die JS- und CSS-Datei. Diese kannst du dir hier downloaden (Version bei Bedarf anpassen):

https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js

https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css

Diese Dateien müssen jetzt in deine Webseite eingebunden werden (z.B.):

page.includeJS.cookieconsent = EXT:t3sb_package/Resources/Public/JavaScript/cookieconsent.min.js
page.includeCSS.cookieconsent = EXT:t3sb_package/Resources/Public/Styles/cookieconsent.min.css

Mit folgendem Setup kannst du “Cookieconsent” initialisieren:

 

page.jsInline.5 = COA
page.jsInline.5 {
	1 = TEXT
	1.value (
		// Cookieconsent - page.jsInline.5
		window.addEventListener("load", function(){
			var p;
			window.cookieconsent.initialise({
				onInitialise: function(status) {
					var type = this.options.type;
					console.log("cookieconsent_type:", type);
					console.log("cookieconsent_status:", status);
				},
				theme: "{$bootstrap.cookieconsent.theme}",
				position: "{$bootstrap.cookieconsent.position}",
				palette: {
					popup: {
						background: "{$bootstrap.cookieconsent.popup.background}",
						text: "{$bootstrap.cookieconsent.popup.text}"
					},
					button: {
						background: "{$bootstrap.cookieconsent.button.background}",
						text: "{$bootstrap.cookieconsent.button.text}"
					}
				},
				content: {
					message: "{$bootstrap.cookieconsent.message}",
					dismiss: "{$bootstrap.cookieconsent.dismiss}",
					deny: "{$bootstrap.cookieconsent.deny}",
					allow: "{$bootstrap.cookieconsent.allow}",
					link: "{$bootstrap.cookieconsent.link}",
					href: "{$bootstrap.cookieconsent.href}",
				},
				elements: {
					allow: '<span id="t3s-allow" aria-label="allow cookies" tabindex="0" class="cc-btn cc-allow">{{allow}}</span>',
				},
				type: "{$bootstrap.cookieconsent.type}",
				revokeBtn: "{$bootstrap.cookieconsent.revokeBtn}",
				// no popup on this pages
				blacklistPage: ["{$bootstrap.cookieconsent.href}"],
					 onStatusChange: function(status) {
						console.log(this.hasConsented() ?
					  	'enable cookies' : 'disable cookies');
						location.reload(true);
					 },
					 law: {
					 	regionalLaw: {$bootstrap.cookieconsent.regionalLaw},
					 },
					 location: {$bootstrap.cookieconsent.location},
			}, function (popup) {
			p = popup;
		  }, function (err) {
			console.error(err);
		  });
			if ( document.getElementById('btn-revokeChoice') ) {
				document.getElementById('btn-revokeChoice').onclick = function (e) {
					p.revokeChoice();
				};
			}
		});
	)
}

… und mit diesen Konstanten kannst du Cookieconsent individuell anpassen:

 

bootstrap.cookieconsent {
	# info, opt-in or opt-out
	type = opt-in
	popup.background = #000
	popup.text = #fff
	button.background = #f1d600
	button.text = #000
	# block (default), edgeless, classic
	theme = edgeless
	# top, bottom, top-left, top-right, bottom-left, bottom-right
	position = bottom-left
	message = Diese Website verwendet Cookies, um Ihr Browser-Erlebnis zu verbessern!
    dismiss = Info ausblenden
	allow = zulassen
	link = Mehr erfahren
	deny = Cookies ablehnen
	href = /datenschutz/
	revokeBtn = <div class='cc-revoke {{classes}}'>Cookie Optionen</div>
	regionalLaw = false
	location = true
}

Wenn du z.B. Goole Analytics mit dem Google Tag Manager einbinden möchtest, nachdem der User Cookies akzeptiert hat, kannst du folgende Condition im Setup nutzen:

 

[request && traverse(request.getCookieParams(), 'cookieconsent_status') == 'allow']
page.10.settings.gtm = *CONTAINER ID*
page.jsInline.1 = TEXT
page.jsInline.1.value (
		// Google Tag Manager
		(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','*CONTAINER ID*');
)
[END]

*CONTAINER ID* musst du mit deiner Google Tag Manager ID (Container ID) ersetzen!

Mit dem Setting “page.10.settings.gtm” wird das ”NoScript" vom Google Tag Manager im Body Tag eingebunden (optional).

Mit dieser Condition kannst du z.B. auch Seiten in der Navigation ein bzw. ausblenden (Konstante):

 

// Konstante um Seiten aus der Navigation zu entfernen
bootstrap.config.navbarExcludeuiduist = 67,87,99
[request && traverse(request.getCookieParams(), 'cookieconsent_status') == 'allow']
bootstrap.config.navbarExcludeuiduist = 67,87
[END]