Zum Hauptinhalt springen

Integration Tag

Integrierte Tags konfigurieren

Integrierte Tags dienen dazu, eingebettete Elemente wie etwa Google Maps oder Youtube datenschutzrechtlich korrekt einzubinden und anzuzeigen.

Dazu wird entweder eine 2-Click Lösung verwendet oder die Einwilligung des Benutzers im Consent Banner herangezogen.

Liegt keine Einwilligung des Benutzers vor, wird automatisch eine Einwilligung eingeholt:

screenshot

Klickt der Benutzer nun auf "Karte anzeigen" oder erteilt die Einwilligung im Consent - Banner, so wird automatisch die Karte geladen und angezeigt.

Wie bindet man die Module korrekt ein?

Dazu sind im Allgemeinen nur zwei Schritte notwendig:

  • Konfigurieren des Moduls im WebCare Tag Manager
  • Einfügen des generierten DIV Tags in die Website.

Grundvoraussetzung für das Funktionieren des Moduls ist die Einbindung des Consent Banners auf der jeweiligen Seite.

1. Konfigurieren des Tags im WebCare Tag Manager

Zunächst fügt man ein neues Integration Tag hinzu:

screenshot

Die Konfiguration erfolgt daraufhin im Tag Editor.

1.1 Tag Editor für Integration Tags

screenshot

  • Beschreibung des Tags: Frei wählbare Beschreibung
  • Aktivierung: Wann soll das Tag aktiviert werden (Nur nach Einwilligung, Immer, Nie, etc.)
  • Kategorie: Für welche Kategorie wird die Einwilligung benötigt um das Tag zu aktivieren. Wird hier "Technisch notwendig" und "Nur nach Einwilligung" gewählt, wird das Tag erst aktiviert wenn der Benutzer zu irgendeiner Kategorie zugestimmt hat.
  • Platzhalter ID: Die HTML - Element ID in die die 2-Click Maske eingefügt werden soll und die nach der Einwilligung den Tag darstellt. Die ID sollte Siteweit eindeutig sein. Wenn Sie mehrere Tags (z.B. mit Variablen) auf der Seite verwenden, können Sie auch eine CSS Klasse angeben. Dazu beginnen Sie die ID mit einem Punkt (.), dann werden alle Platzhalter die diese Klasse angeben ersetzt.
  • Service Name: Der Name des Services das aktiviert wird (z.B. "Google Maps"). Der Name erscheint dann im Informationstext der 2-Click Maske.
  • Anbieter: Der Anbieter des Services das aktiviert wird (z.B. "Google Inc."). Der Name erscheint dann im Informationstext der 2-Click Maske.
  • In Webseite einfügen: der Code der in die Webseite eingefügt werden muss.
  • Dokumentation: Link auf diese Dokumentation
  • HTML Code: der Code der entweder in das DIV eingefügt wird, oder (bei "Separatem" Modus) ausgeführt wird.
  • Modus: entweder "Einfügen (IFrame)" oder "Separat (API)" – Erklärung siehe weiter unten
  • Platzhalter Design: Das Design der 2-Click Platzhalter – Maske

Modus: Einfügen (Iframe)

Dieser Modus dient zum Anzeigen von Inhalten, die direkt als HTML Code an der Stelle des DIVs angezeigt werden sollen. Die häufigste Anwendung sind sicherlich IFrames wie sie beim Einbetten von Google Maps oder YouTube Videos verwendet werden.

Hier wird der HTML Code einfach direkt in das DIV eingefügt und sofort sichtbar.

Ein Beispiel für einen solchen HTML Code wäre:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2661.59788235391!2d14.006909816228568!3d48.15655715781693!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4773f2ecc7497b5d%3A0x6e35fb4020e21b0e!2sZeileisstra%C3%9Fe%206%2C%204600%20Wels!5e0!3m2!1sde!2sat!4v1606723569570!5m2!1sde!2sat" width="300" height="280" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Modus: Separat (API)

In diesem Modus wird beim Aktivieren des Tags nichts in das DIV selbst eingefügt. Diesen Modus können Sie z.B. verwenden, wenn Sie das Google Maps API benutzen um eine eigene Kartendarstellung (mit Routen oder Markern, etc) zu verwenden. Dieser HTML Code besteht nur aus SCRIPT Elementen, die ausgeführt werden.

Ein Beispiel für ein solches Script wäre:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=__Ihr_Google_API_Key__&callback=initMap" type="text/javascript"></script>
<script>
let map;

function initMap() {
map = new google.maps.Map(document.getElementById("tag_maps_separate"), {
center: { lat: 48.1565536, lng: 14.0069098 },
zoom: 10,
});

}

</script>

2. Einfügen des Tags in die Website

Kopieren Sie den HTML - Code, der unter In Webseite einfügen angezeigt wird einfach an die Stelle in Ihrer Webseite, an der der Inhalt angezeigt werden soll.

Platzhalter Design

Der "Platzhalter" (also die 2 - Click Maske die erscheint wenn die Einwilligung noch nicht gegeben wurde) kann entweder ein von uns mitgeliefertes Design enthalten, oder komplett selbst erstellt werden.

Die von uns mitgelieferten Designs enthalten auch einen Informationstext sowie einen Link auf die Datenschutzerklärung, damit die Einwilligung des Benutzers gültig ist.

Von uns mitgeliefert werden folgende Platzhalter in den Sprachen Deutsch und Englisch:

  • Landkarte (z.B. für Google Maps oder Open Street Map)
  • Video (z.B. für Vimeo oder YouTube)
  • Kalender (z.B. für Calendly oder Google Calendar)
  • Sonstiges (für andere Services)
  • Benutzerdefiniert (siehe unten)

Benutzerdefinierte Platzhalter

Sollten sie andere Sprachen benötigen oder ein eigenes Platzhalterdesign bevorzugen, so können sie dieses problemlos umsetzen. Dazu fügen Sie einfach den HTML Code in das DIV Tag ein. Um auf die Einwilligung zu reagieren, sollte der Platzhalter einen Button oder Link enthalten, der den Inhalt aktiviert.

Dazu vergeben Sie die CSS-Klasse cc-tag-activate-btn an das HTML - Element, das auf den Klick reagieren soll.

Ein Beispiel wäre:

<div id="tag_userdefined_iframe" style="height:300px; border: 2px solid green;">
<div class="cc-tag-activate-btn">Klicken Sie hier!</div>
<br><br>
Benutzerdefinierter Text
</div>

Dadurch wird nach dem Klick auf "Klicken Sie hier!" der eingebettete Inhalt aktiviert.

Folgender Code würde genauso aussehen wie einer unserer Platzhalter:

<div id="tag_maps_separate" class="cc-tag-placeholder-maps cc-tag-placeholder">. 
<div class="cc-tag-activate-btn">Karte anzeigen</div>
<div class="cc-tag-info">Zum Aktivieren von Google Maps bitte auf den Button klicken. Durch das Aktivieren von eingebetteten Karten werden Daten an Google Ireland übermittelt. Weitere Informationen können unserer <a href="https://www.datareporter.eu/datenschutz" target="_blank">Datenschutzerklärung</a> entnommen werden.
</div>
</div>

Variablen in Integration Tags

In bestimmten Situationen ist es wüschenswert, dasselbe Tag für unterschiedliche Inhalte zu verwenden. So unterscheidet sich ein YouTube Video nur durch die aufgerufene URL von anderen Videos auf der Seite.

Es wäre nun unpraktisch, wenn Sie für jedes YouTube - Video auf Ihrer Webseite ein eigenes Tag anlegen müssten. Daher können Sie im Tag - Code eine Variable definieren, die dann zur Laufzeit ersetzt wird. Dies funktioniert sowohl mit "Einfügen" als auch mit "Separat" Tags.

Deklaration der Variablen im Tag

Sie können beliebig viele Variablen im Tag - Sourceode definieren. Die Variablen beginnen mit ${ und enden mit } und dürfen keine Sonderzeichen, Umlaute oder Leerzeichen enthalten.

Beispiele für gültige Variablennamen wäre:

  • ${webcare-url}
  • ${width}
  • ${text-headline}

Inhalte der Variablen definieren

Die Inhalte werden im HTML - Code Ihrer Webseite definiert. Dazu fügen Sie zu dem Platzhalter (<div id=....> ) entsprechende Data - Attribute hinzu.

Dies würde dann so aussehen:

<div class="integration-tag" data-webcare-url="https://www.datareporter.eu" data-width="300"></div>

Die Bezeichner nach dem data- müssen den Variablennamen im Tag entsprechen. Wenn Sie im Code ${webcare-url} angeben, muss im Tag <div data-webcare-url="..." angegeben werden.

Beispiele

Da dieser Mechanismus oft bei YouTube - Videos eingesetzt wird, geben wir hier ein Beispiel für YouTube Videos an.

Die Konfiguration im Tag Manager sieht folgendermaßen aus:

screenshot

Hier nochmal der HTML Code des Tags:

<iframe width="${width}" height="${height}" src="${youtube-url}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Wir haben hier drei Variable definiert:

  • youtube-url: Die URL des Videos
  • width: Die Breite des IFrames
  • height: Die Höhe des IFrames

Als Platzhalter haben wir alle Elemente mit der Klasse "webcare-youtube" definiert. Dadurch können Sie auch mehrere Videos auf einer einzigen Seite einbinden.

Auf Ihrer Webseite würden Sie nun Videos folgendermassen einbinden:

<!DOCTYPE html>
<html class="no-js" lang="de">
<head>
<meta charset="UTF-8">
<title>YouTube Integration</title>
</head>
<body>
<h1>Erstes eingebundenes Video</h1>
<div class="webcare-youtube" data-youtube-url="https://www.youtube-nocookie.com/embed/bC8EmPA6H6g" data-width="560" data-height="315"></div>

<h1>Zweites eingebundenes Video</h1>
<div class="webcare-youtube" data-youtube-url="https://www.youtube-nocookie.com/embed/QBWFBKJ6nb0" data-width="280" data-height="155"></div>

<link href="https://webcache.datareporter.eu/c/xxxx/xxx/xx/banner.css" rel="stylesheet">
<script src="https://webcache.datareporter.eu/c/xxxx/xxx/xx/banner.js" type="text/javascript" charset="utf-8"></script>
<script>
window.cookieconsent.initialise(dr_cookiebanner_options);
</script>

</body>
</html>