Google Analytics Opt-In einfach ohne Plugin umsetzen

Jetzt ist es also offiziell: Wenn Google Analytics genutzt werden soll, muss es ein <a href="https://www.haufe.de/recht/weitere-rechtsgebiete/wirtschaftsrecht/bgh-folgt-dem-eugh-aktive-zustimmungspflicht-fuer-cookies_210_517524.html" title="BGH verlangt aktive Zustimmung zu Cookies - Opt-out erfüllt DSGVO-Vorgaben nicht" target="_blank" rel="noopener">Opt-In durch die Besucher der Website</a> geben. Nun gibt es dafür einige Dienstleister und auch Plugins. Ist nett, aber nicht unbedingt nötig. Eine einfache Website kann fix mit einem kleinen Javascript, ein wenig CSS und der entsprechenden serverseitigen Umsetzung (in diesem Beispiel PHP) so modifiziert werden, dass sie der aktuellen Regulation entspricht.

You like what you find here? A donation helps to keep this project running.

<h2>Code</h2> Das folgende Markup erstellt eine Section mit dem entsprechenden Inhalt. <pre><code class="language-html"><section id="EuCookieOptIn"> Wir nutzen Cookies und Google Analytics. Ist das okay? <button class="optin" onclick='_optIn()'>Ja klar!</button> <button class="optout" onclick='_optOut()'>Ne, mach mal nicht</button> </section> </code></pre> Das Markup kann natürlich nach den eigenen Wünschen erweitert werden. Wichtig sind eigentlich nur die ID der Section (Section ist optional und kann auch gegen ein Div ausgetauscht werden) und die beiden Buttons mit der Verknüpfung der Funktionen. Um das Ganze etwas ansehnlicher zu gestalten, gibt es etwas CSS-Code: <pre><code class="language-css">section#EuCookieOptIn p { display: block; text-align: justify; } section#EuCookieOptIn button.optin, section#EuCookieOptIn button.optout { background-color: #4CAF50; border: none; color: white; padding: .8em 1.2em; text-align: center; text-decoration: none; display: inline-block; font-size: 1.4em; } section#EuCookieOptIn button.optin:active, section#EuCookieOptIn button.optout:active { transform: scale(.95); } section#EuCookieOptIn button.optout { background-color: #e7e7e7; color: black; } section#EuCookieOptIn { display: block; z-index: 1001; position: fixed; bottom: 2vh; right: 2vw; margin: 0; color: #555; border: 1px solid #b40b06; background: #fff; text-align: center; font-size: .66em; padding: 1em; line-height: 2em; opacity: .95; min-width: 256px; width: 50%; max-width: 512px; } section#EuCookieOptIn:hover { opacity: 1; } </code></pre> Auch der CSS-Code kann wieder nach Lust und Laune modifiziert werden. Nun kommt noch der Javascript-Anteil. Hierbei <pre><code class="language-js">try{ function _optIn() { var now = new Date(); now.setTime(now.getTime() + 31536000000); document.cookie = "EuCookieOptIn = set;expires=" + now.toUTCString(); document.cookie = 'EuCookieOptOut=; Max-Age=-99999999;'; // Load GA window.ga = window.ga || function() { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date; ga('create', 'UA-XXXXX-X', 'auto'); ga('set', 'anonymizeIp', true); ga('send', 'pageview'); var gascript = document.createElement("script"); gascript.async = true; gascript.src = "https://www.google-analytics.com/analytics.js"; document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]); console.log("Cookie and Tracking is enabled until " + now.toUTCString()); document.getElementById("EuCookieOptIn").style.display = "none"; } function _optOut() { var now = new Date(); now.setTime(now.getTime() + 86400); document.cookie = "EuCookieOptOut = set;expires=" + now.toUTCString(); document.cookie = 'EuCookieOptIn=; Max-Age=-99999999;'; console.log("Cookie and Tracking is disabled until " + now.toUTCString()); document.getElementById("EuCookieOptIn").style.display = "none"; } } catch (err) { console.log(err); } </code></pre> Wenn die Besucher der Website die Funktion _optOut auslösen, wird ein Cookie für 24 Stunden gesetzt, der das Laden von Google Analytics deaktiviert (folgt im PHP-Teil). Sollte ein Opt-In erfolgen, wird direkt Google Analytics eingebunden und die Auswahl mit einem Cookie (für ein Jahr) gespeichert. Es ist zu beachten, dass UA-XXXXX-X gegen den eigenen Google-Analytics-Code ausgetauscht wird. Die Implementierung in PHP sollte so aussehen: <pre><code class="language-php"><?php if (isset($_COOKIE["EuCookieOptOut"]) && !isset($_COOKIE["EuCookieOptIn"]) ) { echo ""; } elseif(isset($_COOKIE["EuCookieOptIn"]) && !isset($_COOKIE["EuCookieOptOut"])){ echo ""; ?> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('set', 'anonymizeIp', true); gtag('config', 'UA-XXXXX-X'); </script><?php } else { // Reset all cookies setcookie("EuCookieOptOut", "", time() - 3600); setcookie("EuCookieOptIn", "", time() - 3600); // Show Popup ?><section id="EuCookieOptIn"> Wir nutzen Cookies und Google Analytics. Ist das okay? <button class="optin" onclick='_optIn()'>Ja klar!</button> <button class="optout" onclick='_optOut()'>Ne, mach mal nicht</button> </section><?php } ?></code></pre> <h2>Wie funktioniert der Code?</h2> Eigentlich ist es ganz einfach. Beim Besuch der Website wird, wenn kein Cookie gesetzt ist, die Abfrage ausgegeben (Show Popup). Wenn der Nutzer nun eine Auswahl trifft, wird entweder nichts eingebunden (Google Analytics not enabled!) oder Analytics eingebunden. Und das war es auch schon. Sowohl PHP-Code als auch der Javascript-Code löschen im Falle des Falles ungültige Cookies. So ist es möglich, die Funktion _optIn() auch später noch einmal aufzurufen (wenn das Javascript eingebunden ist).