WordPress Cookie Hinweis

Auf dieser Seite geben wir Beispiele für eine mögliche Nutzung des WordPress Cookie Hinweis durch unser Plugin. Die Verwendung liegt in der Verantwortung des Seitenbetreibers, dieser ist ebenfalls dafür verantwortlich, sich an geltende Vorschriften zu halten. Bitte haben Sie Verständnis dafür, dass wir keinen Support bei der Implementierung von Tracking-Codes, Pixeln und anderen Scripten leisten können.

Hinweis: Diese Anleitungen richten sich an Entwickler, die bereits Erfahrungen beim Anpassen von PHP-Dateien und Theme-Dateien haben.

 

Cookiestatus abfragen

Durch unser Cookie Plugin für WordPress, unserer Cookie Infoleiste, existieren zusätzliche JavaScript-Funktionen, über welche der Status der Akzeptanz abgefragt werden kann.

Die Rückgabe erfolgt jeweils als „true“ = akzeptiert oder „false“ = nicht genehmigt oder noch keine Auswahl getroffen.

Die Funktionsnamen lauten:

• ilS()
  Hierüber lässt sich der Status der Cookiekategorie „Statistiken“ prüfen
• ilM()
  Hierüber lässt sich der Status der Cookiekategorie „Marketing“ prüfen
• ilEM()
  Hierüber lässt sich der Status der Cookiekategorie „Externe Medien“ prüfen
• il()
  Hierüber lässt sich abfragen, ob der Nutzer die allgemeine Einwilligung bereits erteilt hat

Für ein Beispiel ließe sich z. B. über folgenden Aufruf die Browsermeldung „Bitte akzeptiere unsere Cookies!“ anzeigen, wenn der Besucher noch keine Auswahl getroffen hat und „Du hast unsere Cookies bereits bestätigt, danke!“ wenn bereits eine Auswahl getroffen wurde.

<script>
   if( !il() ) {
      window.alert( "Bitte akzeptiere unsere Cookies!" );
   } else {
      window.alert( "Du hast unsere Cookies bereits bestätigt, danke!" );
   }
</script>

Außerdem existiert die Funktion „ilResetCookie()“ über welche der Besucher bei Aufruf eine erneute Cookie-Infoleiste zur erneuten Auswahl angezeigt bekommt. So könnte z. B. folgender Link in den Footer jeder Seite eingebaut werden, damit die Besucher jederzeit die Möglichkeit haben, ihre Entscheidung zu ändern:

<a href="#" onclick="ilResetCookie(true);return false;">Cookie Einstellungen öffnen</a>

Erweiterte Fallbeispiele mit unserem WordPress Cookie Banner

Erweitertes Beispiel: Google Analytics einbinden

Der originale HTML-Code welchen wir von Google Analytics erhalten sieht z. B. so aus:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'UA-12345678-9');
</script>

Der blau markierte Text ist die Script-URL welche geladen werden muss, der rot markierte Text ist die eindeutige Analytics Property-ID welche bei jeder Webseite unterschiedlich ist. Der grün markierte Text ist der eigentliche Inhalt des Trackingcodes.

Diesen bauen wir nun um, sodass er nur geladen wird, wenn der Besucher der Webseite die Cookies für „Statistiken“ akzeptiert hat:

<script>
   function addAnalytics() {
      if( !ilS() ) { // Prüft, ob Statistiken aktiviert wurden
         return; // Statistiken wurden nicht akzeptiert
      }
      var script = document.createElement('script');
      script.onload = function () {
         window.dataLayer = window.dataLayer || [];
         function gtag(){
            dataLayer.push(arguments);
         }
         gtag('js', new Date());
         gtag('config', 'UA-12345678-9');
      };
      script.setAttribute( 'src', 'https://www.googletagmanager.com/gtag/js?id=UA-12345678-9');
      document.head.appendChild(script);
   }
   window.addEventListener('ilSet', addAnalytics, false);
   addAnalytics();
</script>

Mit diesem geänderten HTML-Code geschehen nun 2 Dinge:

1.) Die externe Javascript-Datei von Google Analytics wird nur eingebunden wenn der Besucher der Webseite bereits die Cookies „Statistik“ akzeptiert hat. Dies wird initiiert über den Aufruf addAnalytics(); in der letzten Zeile. Sollte der Besucher noch keine Cookiebestätigung erteilt haben, passiert erstmal nichts.

2.) Sollte der Besucher noch keine Cookies akzeptiert haben, dies wäre also die erste Seite die der Besucher aufruft, wird über den Aufruf „window.addEventListener(…);“ auf die Bestätigung der Cookieleiste reagiert und Analytics ohne Neuladen der Seite gestartet.

Eine andere Möglichkeit, Analytics einzubinden wäre, dieses als „technisch notwendig“ zu betrachten. Beachtet bitte, dass diese Anleitung keine rechtliche Betrachung berücksichtigt, sondern als Beispiel für die korrekte Nutzung der Cookie-Infoleiste dient.

Vorhandener Code:

 if( !ilS() ) { // Prüft, ob Statistiken aktiviert wurden

würde abgeändert in:

 if( !il() ) { // Prüft, ob Cookies generell aktiviert wurden

Nun würde der eingebettete Script-Code (in unserem Beispiel Google Analytics) ausgeführt, sobald die Cookie-Infoleiste bestätigt wurde und „technisch notwendige“ Cookies akzeptiert wurden.

Gleiches gilt für Marketing:

if( !ilM() ) { // Prüft, ob Cookies für "Marketing" aktiviert wurden

oder auch externe Medien:

if( !ilEM() ) { // Prüft, ob Cookies für "Externe Medien" aktiviert wurden

Erweitertes Beispiel: Facebook-Pixel einbinden

Der originale Code von Facebook kann so aussehen:

<!– Facebook Pixel Code –>
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,’script‘,
‚https://connect.facebook.net/en_US/fbevents.js‘);
fbq(‚init‘, ‚123456789012345‚);
fbq(‚track‘, ‚PageView‘);
</script>
<noscript><img height=“1″ width=“1″ style=“display:none“
src=“https://www.facebook.com/tr?id=123456789012345&ev=PageView&noscript=1″
/></noscript>
<!– End Facebook Pixel Code –>

In diesem Fall sähe eine mögliche Integration unter Berücksichtigung der akzeptierten Cookies für „Marketing“ so aus:

<script>
   function addFacebook() {
   if( !ilM() ) { // Prüft, ob Marketing aktiviert wurden
      return; // Marketing wurden nicht akzeptiert
   }
   var script = document.createElement('script');
   script.onload = function () {
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '123456789012345');
      fbq('track', 'PageView');
   };
   document.head.appendChild(script);
   window.addEventListener('ilSet', addFacebook, false);
   addFacebook();
</script>

Dem aufmerksamen Leser wird nun auffallen, dass der Teil „<noscript>…</noscript>“ nicht integriert wird. Dies ist aber einfach erklärt: <noscript> wird ausgeführt, wenn der Browser des Benutzers kein Javascript ausführt. Wenn kein Javascript ausgeführt wird, kann aber auch diese Funktion nicht aufgerufen werden, daher braucht auch der Teil „<noscript>…</noscript>“ nicht in die Seite integriert werden, da ja schon bekannt ist, dass Javascript ausgeführt wird. Der Teil „<noscript>…</noscript>“ lässt sich also über diese Einbindung nicht DSGVO-konform nutzen.

Eine Alternative zur Einbindung per Javascript wäre die Einbindung der Codes per PHP-Code. Hierzu finden Sie eine Kurzanleitung im folgenden Absatz.

Einbindung von Google Analytics oder Facebook-Pixel per PHP

Anstatt komplett auf Javascript zu setzen, ist es möglich, Script per PHP-Code einzubinden.

Zur Erinnerung noch einmal die Original-Codes.
Google Analytics:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'UA-12345678-9');
</script>

Facebook-Pixel:

<!– Facebook Pixel Code –>
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,’script‘,
‚https://connect.facebook.net/en_US/fbevents.js‘);
fbq(‚init‘, ‚123456789012345‚);
fbq(‚track‘, ‚PageView‘);
</script>
<noscript><img height=“1″ width=“1″ style=“display:none“
src=“https://www.facebook.com/tr?id=123456789012345&ev=PageView&noscript=1″
/></noscript>
<!– End Facebook Pixel Code –>

Wir gehen im folgenden Beispiel davon aus, dass im verwendeten Theme die footer.php existiert und fügen an passender Stelle – z. B. vor dem schließenden </body> – nun folgenden Code ein:

<?php
// Google Analytics einbinden, wenn Statistiken akzeptiert wurden
if( isset( $_COOKIES['_ilStatistics'] ) && $_COOKIES['_ilStatistics'] == 'OK' ) {
?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-12345678-9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-12345678-9');
</script>
<?php
}
?>
<?php
// Facebook-Pixel einbinden, wenn Marketing akzeptiert wurde
if( isset( $_COOKIES['_ilMarketing'] ) && $_COOKIES['_ilMarketing'] == 'OK' ) {
?>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '123456789012345');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=123456789012345&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<?php
}
?>

Diese Zeile prüft, ob das Cookie „_ilStatistics“ mit dem Inhalt „OK“ existiert und bindet Analytics nur dann ein:

if( isset( $_COOKIES['_ilStatistics'] ) && $_COOKIES['_ilStatistics'] == 'OK' ) {

Ähnlich diese Zeile für das Cookie „_ilMarketing“ mit dem Inhalt „OK“ für das Facebook-Pixel:

if( isset( $_COOKIES['_ilMarketing'] ) && $_COOKIES['_ilMarketing'] == 'OK' ) {

Die verschiedenen Cookienamen lauten:

• _il
  Cookie Infoleiste allgemein bestätigt
• _ilStatistics
  Cookie „Statistiken“
• _ilMarketing
  Cookie „Marketing“
• _ilExternalMedia
  Cookie „Externe Medien“

Die Cookies enthalten den Wert „OK“ wenn die jeweilige Cookiekategorie vom Nutzer akzeptiert wurde. Die Cookies existieren nicht, wenn entweder abgelehnt wurde oder noch keine Einwilligung erfolgte.

Buttons, Texte und Farben via CSS anpassen

Für die einzelnen Elemente haben wir für den WordPress Cookie Notice verschiedene CSS-Klassen definiert, die ihr alle selbst ansteuern und damit das Aussehen an eure Seite anpassen könnt.

Diese CSS-Klassen stehen euch zur Verfügung:

• #gdprpatronInfoleiste { }
  Die Infoleiste selbst
• #gdprpatronInfoleiste .chooser { }
  Zeile mit der Optionsauswahl
• #gdprpatronInfoleiste .dataprivacy { }
  Zeile mit dem allgemeinen Datenschutzhinweis
• #gdprpatronInfoleiste .buttons { }
  Zeile mit den Bestätigungsbuttons
• #gdprpatronInfoleiste a { }
  Link zu den Datenschutzhinweisen
• #gdprpatronInfoleisteOK { }
  Beschriftung „OK“
• #gdprpatronInfoleisteOverlay { }
  Die regulären Inhalt verdeckende Überlagerung

 

Beispiel für das Anpassen der Buttons oder Textgrößen:

#gdprpatronInfoleiste .dataprivacy {font-size:0.75em;}

@media screen and (max-width: 900px) {
#gdprpatronInfoleiste .dataprivacy {font-size:0.75em;}
}
#gdprpatronInfoleiste .block .info {
    line-height: 1.4;
}
#gdprpatronInfoleiste .gdprpatronInfoleisteOK2, #gdprpatronInfoleiste .gdprpatronInfoleisteOK{
    border-radius: .5em;
    width: 75%;
    padding:0em;
    font-size:0.8em;
}

Wenn Sie etwas am Layout verändern, zum Beispiel neue CSS Angaben hinzufügen oder vorhandene verändern, ist es zwingend Notwendig, dass Sie nach dem Speichern den Cache löschen um alle Änderungen korrekt zu sehen.