Man dürfte meinen, dass so gut wie jede Website heutzutage Google Analytics nutzt. Trotzdem habe ich nirgends eine vollständige Anleitung gefunden, wie man im Jahre 2022 Google Analytics zu einer Website hinzufügt. Denn einerseits sieht Google Analytics jedes Mal, wenn ich es benötige (was ehrlich gesagt sehr selten ist), anders aus und andererseits muss man in Europa ja auch noch viel mehr drumherumbasteln, um nicht irgendwann Post vom Anwalt zu bekommen.

Ich möchte in diesem Zuge darauf hinweisen, dass apfel-z kein Google Analytics verwendet. Mir ist es relativ wurscht, wie viele andere Leute mit welchem Browser von wo aus wie lange auf meinen Wissensspeicher zugreifen.

Achtung: Ich lege nicht meine Hand dafür ins Feuer, dass die ganze Sache auch wirklich 100% gesetzeskonform ist und einem nicht trotzdem jemand an den Karren fahren kann.
Ich sage immer wieder: Um heutzutage Websites zu erstellen, müsste man eigentlich nicht Programmierer/Designer, sondern Advokat sein.

Außerdem kann alles im Folgenden Beschriebenen zu dem Zeitpunkt, wo dieser Artikel gelesen wird, schon wieder anders aussehen und funktionieren. Google ist nicht gerade durch seine Konsistenz bekannt.

Google Analytics: Property erstellen

Unter https://analytics.google.com/ muss zuerst ein neuer Property erstellt werden.

Dazu links unten auf das Zahlrädchen "Verwaltung" klicken, ein neues Konto erstellen und dazu ein neues Property erstellen.

Nach dem Erstellen der Property muss man die Platform "Web" auswählen und einen "Webstream einrichten", indem man die URL der Website angibt, auf der Analytics genutzt werden soll.

Danach auf "Tag Anleitung ansehen" klicken und man bekommt, nachdem man in den Reiter "Manuell installieren" gewechselt ist, den Code zu sehen, den man in die Website einfügen müsste.
 
Allerdings ist es nicht datenschutzkonform, (nur) diesen Code einzufügen!
 

Cookie Consent

Wir brauchen nun noch einen dieser nervigen Cookie-Dialoge, mit denen die Nutzer auf so gut wie jeder Website belästigt werden, um "das Nutzererlebnis auf unserer Website zu verbessern".

Dazu verwende ich ein OpenSource-JavaScript aus dem GitHub-Account von brainsum.
Ein Demo ist hier zu sehen.

Die einzige notwendige Datei von den gefühlt 2000 Dateien, die man hier heruntergeladen hat, ist Folgende: cookieconsent/docs/assets/js/cookieconsent.min.js

Jene auf den Webserver der betreffenden Website hochladen und nun sowohl brainsums Cookie Consent Dialog wie auch Google Analytics in den <head/>-Tag jeder Seite integrieren:

<script type="text/javascript" src="pfad/zu/cookieconsent.min.js"></script>
<script>
window.CookieConsent.init({
  modalMainTextMoreLink: null,
  barTimeout: 1000,
  theme: {barColor: '#ffcc00', barTextColor: '#000000', barMainButtonColor: '#FFF', barMainButtonTextColor: '#000000', modalMainButtonColor: '#ffcc00', modalMainButtonTextColor: '#000000'},
  language: {
    current: 'de',
    locale: {
    en: {
      barMainText: 'This website uses cookies to ensure you get the best experience on our website.',
      closeAriaLabel: 'close',
      barLinkSetting: 'Cookie Settings',
      barBtnAcceptAll: 'Accept all cookies',
      modalMainTitle: 'Cookie settings',
      modalMainText: 'Cookies are small pieces of data sent from a website and stored on the user\'s computer by the user\'s web browser while the user is browsing. Your browser stores each message in a small file, called cookie. When you request another page from the server, your browser sends the cookie back to the server. Cookies were designed to be a reliable mechanism for websites to remember information or to record the user\'s browsing activity.',
      modalBtnSave: 'Save current settings',
      modalBtnAcceptAll: 'Accept all cookies and close',
      modalAffectedSolutions: 'Affected solutions:',
      learnMore: 'Learn More',
      on: 'On',
      off: 'Off',
      enabled: 'is enabled.',
      disabled: 'is disabled.',
      checked: 'checked',
      unchecked: 'unchecked',
      },
    de: {
      barMainText: 'Diese Website verwendet Cookies.',
      closeAriaLabel: 'Schließen',
      barLinkSetting: 'Cookie-Einstellungen / Weitere Informationen',
      barBtnAcceptAll: 'Alle Cookies akzeptieren',
      modalMainTitle: 'Cookie-Einstellungen',
      modalMainText: 'Cookies sind Daten der Website, die in Ihrem Browser gespeichert werden. Wenn Sie vom Webserver eine neue Seite anfordern, werden diese Cookies wieder zurück an den Server gesendet. Cookies wurden entwickelt, damit Informationen der Website zwischengespeichert werden können oder damit die Website Sie wieder erkennen kann.',
      modalBtnSave: 'Einstellungen speichern',
      modalBtnAcceptAll: 'Alle Cookies akzeptieren und schließen',
      modalAffectedSolutions: 'Betroffene Lösungen:',
      learnMore: 'Mehr erfahren',
      on: 'An',
      off: 'Aus',
      enabled: 'ist aktiviert.',
      disabled: 'ist deaktiviert.',
      checked: 'ausgewählt',
      unchecked: 'nicht ausgewählt',
    }
    }
  },
  categories: {
    marketing: {
    needed: false,
    wanted: false,
    checked: false,
    language: {
      locale: {
      en: { name: 'Marketing Cookies', description: 'Google Analytics. You know.'},
      de: { name: 'Marketing Cookies', description: 'Cookies von Google Analytics, um das Website-Verhalten unserer Besucher zu analysieren.'}
      }
    }
    }
  },
  services: {
    google_tag_manager: { category: 'marketing', type: 'script-tag', search: 'googletagmanager', language: {locale: {en: {name: 'Google tag manager'}, de: {name: 'Google tag manager'} } } }
    }
  });
</script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx"></script>
<script type="text/plain" data-consent="googletagmanager">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-xxxxxx', { 'anonymize_ip': true });
</script>

Statt G-xxxxxx ist die ID des vorhin erstellten Propertys zu verwenden.
{ 'anonymize_ip': true } soll inzwischen bei der aktuellen v4 von Google Analytics wohl nicht mehr notwendig sein, um die IP-Adressen zu anonymisieren (was ebenfalls notwendig ist, um rechtlich auf der sicheren Seite zu sein).
Um auf der sicheren Seite zu sein, habe ich es aber mal hinzugefügt. Entweder man hat's oder man braucht's ;-)

Was macht brainsums Cookie Consent Dialog eigentlich?

So lange nicht aktiv auf "Alle Cookies akzeptieren" geklickt wurde, wird der JavaScript-Code von Google unterbunden und somit auf jener Seite keine Cookies von Google Analytics im Browser gesetzt.

Datenschutzerklärung

Dem Datenschutzerklärungsgedöns, welches man auf einer Website haben muss, habe ich noch die Muster-Datenschutzerklärung dieser Seite hinzugefügt und den Text "Cookie-Einstellungs-Dialog" ganz am Ende mit dem Cookie Consent Dialog verlinkt:

<a class="ccb__edit" href="#">Cookie-Einstellungs-Dialog</a>

So einen Link außerdem noch irgendwo in der Navigation oder Fuß der Seite hinzuzufügen, wäre ratsam, damit die Seitenbesucher jederzeit ihre Cookie-Einstellungen ändern können.

Über jenen Link kann man den Cookie Consent Dialog nochmals öffnen, wenn man an den Einstellungen etwas ändern möchte.