Google Analytics Opt-In einfach ohne Plugin umsetzen

Jetzt ist es also offiziell: Wenn Google Analytics genutzt werden soll, muss es ein Opt-In durch die Besucher der Website 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 server-seitigen Umsetzung (in diesem Beispiel PHP) so modifiziert werden, dass diese der aktuellen Regulation entspricht.

Code

Das folgende Markup erstellt eine Section mit dem entsprechenden Inhalt.

<section id="EuCookieOptIn">
<p>Wir nutzen Cookies und Google Analytics. Ist das okay?</p>
<button class="optin" onclick='_optIn()'>Ja klar!</button>
<button class="optout" onclick='_optOut()'>Ne, mach mal nicht</button>
</section>

Das Markup kann natürlich nach den eigenen Wünschen erweitert werden. Wichtig sind eigentlich nur die ID der Section (Section ist optinal und kann auch gegen ein Div ausgetauscht werden) und die beiten Buttons mit der Verknüpfung der Funktionen.

Um das ganze etwas ansehnlicher zu gestalten, gibt es etwas CSS Code:

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

Auch der CSS Code kann wieder nach Lust und Laune modifiziert werden. Nun kommt noch der Javascript-Anteil. Hierbei

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 " + ow.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);
}

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:

<?php 
if (isset($_COOKIE["EuCookieOptOut"]) && !isset($_COOKIE["EuCookieOptIn"]) ) {
echo "<!-- Google Analytics not enabled! -->";
} elseif(isset($_COOKIE["EuCookieOptIn"]) && !isset($_COOKIE["EuCookieOptOut"])){
echo "<!-- Google Analytics is enabled! -->";
?><!-- Global site tag (gtag.js) - Google Analytics -->
<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">
<p>Wir nutzen Cookies und Google Analytics. Ist das okay?</p>
<button class="optin" onclick='_optIn()'>Ja klar!</button>
<button class="optout" onclick='_optOut()'>Ne, mach mal nicht</button>
</section><?php
}
?>

Wie funktioniert der Code?

Eigentlich ist es ganz einfach. Beim Besuch der Website wird, wenn kein Cookie gesetzt, 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).

Marc
Funktioniert.
Geschrieben von Marc am Juni 2, 2020
Eventuell solltest du noch schreiben, dass einfach alles in die Datei kopiert werden muss damit es läuft.
Admin Admin
Geschrieben von Admin am Juni 2, 2020
Okay, das stimmt natürlich. Aber besser wäre es vermutlich die entsprechenden Codes/Snippets in die dafür vorgesehenen Dateien zu packen. Sprich das CSS in die CSS, das Javascript in eine Javascript. Ich möchte da nichts vorgeben. Aber vielen Dank für deinen Hinweis!