Coockie-Consent-Banner-mit-dem-GTAG-implementieren

Alles rund um die Webanalyse und Suchmaschienen Marketing

Coockie-Consent-Banner-mit-dem-GTAG-implementieren

DSGVO Banner mit dem GTAG implementieren und verwenden

Update 09.05.2019. Bannner hat jetzt einen Ablehnen Button und die Felder sind nicht mehr vorausgewählt
Wenn Sie den Cookie Banner wie den den Sie auf unserer Seite vorfinden nutzen möchten, dann können Sie diesen ganz einfach mit dem verwenden implementieren. Sie haben grundsätzlich die Möglichkeit zwischen 2 Design- Varianten zu entscheiden.

Als erste müssen Sie die CSS und die Javascript- Datei herunterladen. Machen Sie einen Rechtsklick auf die Datei und wählen Link Speichern unter aus.

  1. cookieconsent.css
  2. cookieconsent.js

Nachdem der Download durchgeführt wurde muss die Datei auf den Server/ Hoster wo sich auch Ihre Webseite befindet. Laden Sie die Dateien in das Root- Verzeichnis. Dort wo sich auch Ihre anderen Dateien befinden. Nicht in irgendeinen Ordner.

Fügen Sie als nächstes die Dateien via Tags auf Ihre Webseite im Header ein. Die Tags sollten wie folgt aussehen:

<link rel="stylesheet" href="https://www.IhreDomain.de/cookieconsent.css" media="none" onload="if(media!='all')media='all'">
<script src="https://www.IhreDomain.de/cookieconsent.js" async></script>

Nachdem diese Tags implementiert wurden müssen wir den Banner mit der richtigen Konfiguration initialisieren. Sie können die Texte direkt in der JS Datei anpassen oder im folgenden Code:

Consent Injektor

<script type="text/javascript">
//Wartet mit dem initialisieren bis die JS Datei geladen wurde
document.querySelector('script[src="https://Ihre-Domain.de/cookieconsent.js"]').onload = function() {loadJS()};
function loadJS() {
// <![CDATA[
cc.initialise({
container: document.getElementById("cc-notification"),
//Texte für den Banner
strings: {
//Banner Text
notificationTitleImplicit: 'Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Datenschutzerklärung.',
//Name der Kategorienamen im Menü
necessaryDefaultTitle: "Funktionelle Cookies",
socialDefaultTitle: "Social media",
analyticsDefaultTitle: "Analytics",
advertisingDefaultTitle: "Werbung",
//Beschreibung der Kategorien im Menü
necessaryDefaultDescription: "Funktionelle Cookies können nicht deaktiviert werden.",
socialDefaultDescription: "Zu Facebook, Twitter und andere Netzwerke wird ein Seitenaufruf übermittel um geziehlt Werbung schalten zu können.",
analyticsDefaultDescription: "'Google Analytics ermittelt Seitenaufrufe, Klicks, und die Scrolltiefe um die Nutzererfahrung auf unsererer Seite zu verbessern.",
advertisingDefaultDescription: "Für Werbe und Remarketing werden Daten gesammelt wie Klicks bzw. bestimmte Seitenaufrufe und in einem Cookie gespeichert.",
//Butten nach akzeptieren der Einstellungen
privacyPolicy: "Datenschutzeinstellungen",
},
//Kategorien im Menü wenn z.B keine social plugin vorhanden kann kategorie "social" hier entfernt werden
cookies: {
social: {},
analytics: {},
advertising: {},
necessary: {}
},
settings: {
//Banner position bottom = unten, top = oben
bannerPosition: "bottom",
//style dark und light möglich
style: "dark",
consenttype: "implicit"
}})// ]]>};
</script>

Sie haben auch die möglichkeit die Texte im Cookieconsent.js direkt anzupassen. Dann würde der Teil mit den “strings” wegfallen.

Nach dem das Script angepasst ist kommen wir nun zum wesentlichen Teil. Anpassen des GTAG’s nach unseren Bedürfnissen für ein Opt- In.

GTAG Anpassen

Das Grundscript sollte mit anonymisierter IP wie folgt aussehen:

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

gtag('config', 'GA_TRACKING_ID', { 'anonymize_ip': true});
</script>

Im Getag wird generell automatisiert wenn man es nicht deaktiviert die Displayfeatures mitgesandt. Dieses gilt es zu berücksichtigen bei nicht gewollter Werbung.

Das angepasste Script würde nun wie folgt aussehen:


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113154044-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
// Funktion Cookies lesen
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// Variablen Cookiewerte bekommen
var ana = getCookie("cc_analytics")
var so = getCookie("cc_social")
var ad = getCookie("cc_advertising")
// Variable Display Features an oder aus
var DisplayAnAus = (function() {
     // deaktiviert displayfeaters wenn kein Consent -> != true bezieht undefiniert mit ein
    if (ad == "yes"){
      return true
    }
   if(ad != "yes"){
     return false
   }
  
})();
  
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  /* wenn Analytics cookie nicht no, Analytics ausfuehren (optOut)
    if(ana == "yes"){    ist die Zeile fuer OptIn */
  if (ana != "no"){
  gtag('config', 'UA-113154044-1', { 'anonymize_ip': true, 'allow_display_features': DisplayAnAus });
 }
</script>

Dieses Script ist momentan so eingestellt wenn Werbung unerwünscht ist, dann werden die Displayfeatures deaktiviert. Desweiteren ist es ein Opt Out. Wenn man einen Opt in möchte, kann man diesen im Code aktivieren. Social Plugins lassen sich auf die selbe weise ausführen. Dazu kann man auch eine if Bedingung machen. Für einen opt in würde einfach folgendes geschrieben: if(so == “yes”){ Ihr Code kommt zwischen diesen Klammern }.

Wenn man jetzt noch die Daten die im URL Parameter anonymisiert versenden möchten wie im Tutorial Google-Analytics-und-Tagmanager-Daten-Anonymisieren , könnte es wie folgt aussehen:

(Der folgende Code steht im Bezug zum Tutorial Google-Analytics-und-Tagmanager-Daten-Anonymisieren)

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113154044-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
// ####### Beginn Parameter anonymisierung ########
var param = (function(){
// Parameter String
var urlS = window.location.search
/* Kategorien die persönliche Dateb enthalten
z.b. ?email=mail@gmx.de */
var PersIdDaten = ["email","id"];
var UrlSplit = urlS.split('&');
for (n=0;n<UrlSplit.length;n++){
for (i=0;i<PersIdDaten.length;i++){
if(UrlSplit[n].indexOf(PersIdDaten[i]) > -1){
var pos = UrlSplit[n].indexOf('=');
UrlSplit[n] = UrlSplit[n].substring(0,pos+1) + "[0000]";
break;
}
}
}
if (urlS != ''){
urlS = UrlSplit.join('&');
}
return urlS;
})();
var pfad = window.location.pathname
// ####### Ende Parameter anonymisierung ######
//###### Beginn Cookie Consent #####
// Funktion Cookies lesen
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// Variablen Cookiewerte bekommen
var ana = getCookie("cc_analytics")
var so = getCookie("cc_social")
var ad = getCookie("cc_advertising")
// Variable Display Features an oder aus
var DisplayAnAus = (function() {
// deaktiviert displayfeaters wenn kein Consent -> != true bezieht undefiniert mit ein
if (ad == "yes"){
return true
}
if(ad == "no"){
return false
}

})();

//###### Beginn Cookie Consent #####

function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
/* wenn Analytics cookie nicht no, Analytics ausfuehren (optOut)
if(ana == "yes"){ ist die Zeile fuer OptIn */
if (ana != "no"){
gtag('config', 'UA-113154044-1', { 'anonymize_ip': true, 'allow_display_features': DisplayAnAus, 'page_path': pfad + param});
}
</script>

Hier wurde wie auch im Tutorial einfach die Parameter der URL anonymisiert mit den Wörtern die in dem blau geschriebenen Codeteil eingefügt wurden. Beachten Sie Ihre UA Nummer immer einzutragen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.