Selbsterstellter Cookie Banner

Wie Sie Ihren eigenen Cookie Banner erstellen

Diese Anleitung erstellt eine Rahmenstruktur für Cookie Banner um es mit TRUENDO zu verbinden. Das styling muss vom User selber ertstellt werden.

Schritt 1

Als erstes müssen Sie eine Struktur für den Cookie Banner kreieren.

Diese Struktur braucht:

  • Einen conatiner in dem alle Elemente inkludiert sind.
  • Ein Text der erklärt was der User akzeptiert.
  • Ein “Einstellungen” Button
  • Ein “Akzeptieren” Button

Die ganze Struktur kann dann wie folgt aussehen:

<div> <!-- Cookie Banner Container -->
  <!-- Text -->
  <h3>Datenschutz</h3>
  <p>Diese Website verwendet Cookies und Dienste der unten aufgeführten Kategorien. Wählen Sie AKZEPTIEREN, um allen Kategorien zuzustimmen, , NUR ERFORDERLICH, um nur erforderlichen Services zuzustimmen, oder EINSTELLUNGEN, um eine individuelle Auswahl zu treffen.</p>
  <!-- Text End -->
  <button type="button" onclick="javascript:Truendo.openCookieSettings()">Einstellungen</button> <!-- Einstellungen Button -->
  <button type="button" onclick="javascript:Truendo.acceptNecessaryCookiesOnly()">Nur Erforderlich</button> <!-- Nur Erforderlich Button -->
  <button type="button" onclick="javascript:Truendo.acceptAllCookies()">Akzeptieren</button> <!-- Akzeptieren Button -->
</div>

Schritt 2

Nun müssen Sie die relevanten Attribute zu dem Conatainer und den Buttons hinzufügen.

Der Container hat folgende Attribute:

id="cc-banner" and style="display:none;"

Hinweis: Das Style-Attribut kann auch in der CSS Datei hinzugefügt werden in dem Sie es per ID aufrufen. Wie im folgenden Code:
#cc-banner{
  position: fixed; /* Strongly recommended */
  display: none;
}

Alle Buttons brauchen ein onclick Attribut.

Für das “Einstellungen” Button: onclick="javascript:Truendo.openCookieSettings()"

Für das “Nur Erforderlich” Button: onclick="javascript:Truendo.acceptNecessaryCookiesOnly()"

Für das “Akzeptieren” Button: onclick="javascript:Truendo.acceptAllCookies()"

Wenn Sie alles richtig eingestelllt haben kann der code wie folgt aussehen:

<div id="cc-banner" style="display:none;"> <!-- Cookie Banner Container -->
  <!-- Text -->
  <h3>Datenschutz</h3>
  <p>Diese Website verwendet Cookies und Dienste der unten aufgeführten Kategorien. Wählen Sie AKZEPTIEREN, um allen Kategorien zuzustimmen, , NUR ERFORDERLICH, um nur erforderlichen Services zuzustimmen, oder EINSTELLUNGEN, um eine individuelle Auswahl zu treffen.</p>
  <!-- Text End -->
  <button type="button" onclick="javascript:Truendo.openCookieSettings()">Einstellungen</button> <!-- Einstellungen Button -->
  <button type="button" onclick="javascript:Truendo.acceptNecessaryCookiesOnly()">Nur Erforderlich</button> <!-- Nur Erforderlich Button -->
  <button type="button" onclick="javascript:Truendo.acceptAllCookies()">Akzeptieren</button> <!-- Akzeptieren Button -->
</div>
Wichtige Empfehlung: Sie sollten die ganze Struktur in den body tag plazieren wo es auf jeder Seite Ihrer Website aufgerufen wird. Für viele Websiten is dies im footer. Falls Sie keinen Code mit allen Seiten teilen muss diese Struktur auf jeder Seite stehen.

Schritt 3

Nun müssen Sie nur noch Custom Banner in Ihrem Account aktivieren.

Melden Sie sich in der Konsole an. Gehen Sie in Einbinden zum Banner Tab und wählen Sie Custom Banner bei der Banner-Typ Einstellung.

Sie können nun anfangen Ihren Banner zu stylen.