Mit Gambio Consent Tool YouTube-Video datenschutzkonform einbauen

YouTube-Video datenschutzkonform im Gambio-Shop

Dieser Beitrag ist ein reines Informationsangebot und keine Rechtsberatung!

Zustimmung oder Ablehnung der Einbindung von YouTube-Videos im Gambio-Shop mit funktionalem Cookie im Consent-Tool

Auf der Startseite des Gambio-Shops sollen YouTube-Videos eingebunden werden, wenn der Webseitenbesucher dem Laden der Videos zugestimmt hat:

Cookies vor Zustimmung oder Ablehnung mit Gambio Consent-Tool datenschutzkonform einbauen

Cookies nach Ablehnung im Gambio Shop mit Consent-Tool

Beim ersten Aufruf der Webseite oder wenn der Webseiten-Besucher das Einbinden der YouTube-Videos ablehnt oder jemand nur den notwendigen Cookies zustimmt, werden Links zu den YouTube-Videos angezeigt und der Besucher bekommt den Hinweis: “Bei einem Klick auf die Videos werden Sie zu YouTube weitergeleitet.”:

Cookies nach YouTube Ablehnung mit Gambio-Consent-Tool

Cookies nach Zustimmung im Gambio Shop mit Consent-Tool

Bei Zustimmung des Webseiten-Besuchers zum Laden der YouTube-Videos oder durch das Akzeptieren aller Cookies werden die YouTube-Links ausgeblendet und die Videos direkt eingebunden. Dabei werden von Google YouTube-Cookies gesetzt und Google Fonts geladen:

YouTube-Cookies und Google Fonts - YouTube Video mit Gambio-Consent-Tool datenschutzkonform einbauen — YouTube-Cookies und Google Fonts – YouTube Video mit Gambio-Consent-Tool datenschutzkonform einbauen

Zwei HTML-Bereiche für Video-Links und YouTube-Video-Einbindung

In meinem Beispiel sollen die Links zu den YouTube-Videos in zwei Spalten (FOR HIM und FOR HER) nebeneinander dargestellt werden und die in der Webseite integrierten Videos in zwei Abschnitten untereinander. Deshalb werden zwei HTML-Bereiche angelegt.

Der erste Bereich mit den datenschutzkonformen Links zu den YouTube-Videos, wird angezeigt, wenn der Besucher das erste Mal auf die Webseite kommt oder der Einbindung der YouTube-Videos nicht zugestimmt hat oder alle nicht notwendigen Cookies ablehnt:

HTML für YouTube-Video ohne YouTube-Zustimmung im Cookie-Consent-Tool

HTML-Code bei Ablehnung

<div id="bt-video-ohne-you-tube" class="row">
  <div id="bt-for-him-ohne" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <h3>FOR HIM</h3>
   <div class="bt-video row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: auto; min-height: 100px;">
  <p style="font-style: italic;">Bei einem Klick auf die Videos werden Sie zu YouTube weitergeleitet.</p>
</div>
  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
    <a href="https://www.youtube.com/watch?v=oQnbAL7jkxg" title="BACK TO THE 80s - GOLDEN ERA GYM MOTIVATION - PART 2 bei YouTube starten" target="_blank">BACK TO THE 80s - GOLDEN ERA GYM MOTIVATION - PART 2<br><span class="fa fa-play"></span></a>
  </div>
.
.
.

Zweiter HTML-Bereich zur nachträglichen YouTube-Video-Einbindung

Der zweite HTML-Bereich beinhaltet nur leere divs beim ersten Laden der Webseite bzw. wenn das Laden der Videos abgelehnt wurde. Wichtig: Google-Cookies werden auch gesetzt, wenn die Videos in div-Bereichen mit “display: none” geladen werden. Deshalb nehme ich leere div-Bereiche und lade später mit jQuery die YouTube-Videos in diese divs.

HTML für YouTube-Video mit YouTube-Zustimmung beim Cookie-Consent-Tool

HTML-Code bei Zustimmung

<div id="bt-video-mit-you-tube" class="row">
  <div id="bt-for-him" class="col-xs-12 col-sm-12 col-md-12 col-md-12">
    <h3>FOR HIM</h3>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-md-3">
    <div id="bt_ytv1" class="bt_yt_video"></div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-md-3">
    <div id="bt_ytv2" class="bt_yt_video"></div>
  </div>
.
.
.

Cookie-Consent-Modul im Gambio Admin einrichten

Modul Cookie-Consent-Tool im Gambio-Admin bearbeiten

YouTube Zustimmung als funktionales Cookie einrichten

Funktionales Cookie im Gambio-Consent-Tool im Admin konfigurieren

Mit der Zustimmung zum Laden der YouTube-Videos akzeptieren Sie die Datenschutzerklärung von YouTube (https://policies.google.com/privacy). 
Wenn Sie nicht zustimen (Off), haben Sie die Möglichkeit über einen Link das Video direkt bei YouTube aufzurufen.

Integration von geladenem Code

Zu dem Cookie gibt es die Information “Integration anzeigen”. Der dort angezeigte Javascript-Code zur Integration mit der richtigen data-purposes-Id (in diesem Beispiel: data-purposes=”5″) wird kopiert und unter “Tracking Codes” eingebaut:

Integration von direkt geladenem Code - Gambio-Consent-Tool — Integration von direkt geladenem Code – Gambio-Consent-Tool

Tracking-Code im Gambio Shop einbauen

Der Javascript-Code an dieser Stelle wird ausgeführt, wenn der Webseiten-Besucher dem Laden der YouTube-Videos zustimmt:

Gambio-Tracking-Code verwenden für Cookie-Consent-Tool

Javascript Tracking-Code

Mit diesem Code werden die YouTube-Videos in die leeren div-Bereiche geladen:

// Achtung! data-purposes="5" mit der eigenen Id anpassen 

<script async
  data-type="text/javascript"
  type="as-oil"
  data-purposes="5"
  data-managed="as-oil">

$(document).ready(function(){

video1 = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/oQnbAL7jkxg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
video2 = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/gcLLQs-_Lis" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
.
.
.
$('#bt_ytv1').html(video1);
$('#bt_ytv2').html(video2);
.
.
.
$("#bt-video-ohne-you-tube-zustimmung").css("display", "none");
$("#bt-video-mit-you-tube-zustimmung").css("display", "block");
  });
</script>

YouTube-Video einbinden – “Erweiterten Datenschutzmodus aktivieren”

Zum Einbetten des YouTube-Videos auf der eigenen Webseite klickt man auf der YouTube-Webseite unter dem Video auf “Teilen” und anschließend auf “Einbetten”. Beim Einbetten kann man “Erweiterten Datenschutzmodus aktivieren”.
Wichtig: Auch in Googles “Erweiterten Datenschutzmodus” werden Cookies von Google gesetzt und Google Fonts geladen.