Externe Dienste, die beispielsweise normalerweise per iFrame eingebunden werden, dürfen nicht ohne Zustimmung des Besuchers geladen werden.
Daher ist die Einbindung via iFrame nicht möglich.

Stattdessen sollte das im Folgenden beschriebene Verfahren angewendet werden.

Voraussetzungen

Entweder

• vmarkt-Framework ab Version 1.1.5
• Aktiviertes COIB (über EULE) oder aktiviertes safeIframe-Modul (settings)

Oder

• Manuelle Nachrüstung von COIB

Richtlinien

Normalerweise würde man externe Dienste per iFrame (wie folgt) einbinden. Dies ist falsch, da hier sofort eine Verbindung zu dem externen Server aufgebaut wird.

<!-- SO NICHT! -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/195vRt9agRw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<!-- SO AUCH NICHT! -->
<iframe id="reise_rechner" src="https://rechner.travelsecure.de/tarifrechner/default.aspx?productid=6&partnerid=XXXXX&parentIframeId=reise_rechner"></iframe>

Sämtliche iFrames müssen durch <div>-Tags ersetzt werden. Benötigte Parameter können dann als data-Attribute mitgegeben werden:

<!-- DAS IST RICHTIG -->
<div class="safeiframe video" style="width:560px;height:315px" data-coib="youtube" data-src="https://www.youtube.com/embed/195vRt9agRw" data-ds-link="datenschutz"></div>

<!-- DAS IST AUCH RICHTIG -->
<div id="reise_rechner" class="safeiframe calc" data-coib="travelsecure" data-src="https://rechner.travelsecure.de/tarifrechner/default.aspx?productid=6&partnerid=XXXXX&parentIframeId=reise_rechner" data-ds-link="datenschutz"></div>

<!-- DAS IST AUCH RICHTIG -->
<div id="reise_rechner" class="safeiframe calc" data-coib="travelsecure" data-src="https://rechner.travelsecure.de/tarifrechner/default.aspx?productid=6&partnerid=XXXXX&parentIframeId=reise_rechner"></div>

<!-- Ähnlich klappt es auch mit Scripts! -->
<script data-src="https://s.provenexpert.net/seals/proseal.js" data-coib="provenexpert" data-coib-silent="true">
</script>

Der <div>-Container muss zwingend die Klasse safeiframe bekommen, um die Funktionalität sicher zu stellen.
Über weitere Klassen, kann Einfluss auf die Gestaltung des Dummys genommen werden. Folgende Klassen stehen hierfür zur Verfügung:

• video
• rechner
• maps
• facebook*

Folgende data-Parameter sind möglich:

• data-src zur Angabe des Ziels (Pflichtangabe!)
• data-ds-link Link zur Datenschutzerklärung (optional, da Datenschutz-Link normalerweise aus der EULE kommt!)
• data-coib interner Name des Cookies im COIB (Pflichtangabe!)

*Bei Facebook sind zusätzliche data-Parameter möglich

• data-class
• data-tabs
• data-height
• data-small-header
• data-hide-cover
• data-show-facepile

Besonderheiten

Google Analytics

Der von Google gelieferte Code muss in eine eigene Funktion COIB_googlenalytics gelegt werden.
Zusätzlich muss eine Funktion gaOptout für den OptOut definiert werden.
Beide Funktionen müssen auf allen (Unter-)Seiten zur Verfügung stehen!

Beispiel

<script>
	  function COIB_googleanalytics() {
		  var gaProperty = "UA-XXXXXX-1"; // <-- WICHTIG! Hier die Property-ID eintragen
		  document.cookie = "ga-disable-" + gaProperty + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', gaProperty]); 
		  _gaq.push(['_gat._anonymizeIp']);
		  _gaq.push(['_trackPageview']);
		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();
	  }
	</script>
	<script>// <![CDATA[
	// Set to the same value as the web property used on the site
	var gaProperty = 'UA-XXXXXX-1'; // <-- WICHTIG! Hier die Property-ID eintragen

	// Disable tracking if the opt-out cookie exists.
	var disableStr = 'ga-disable-' + gaProperty;
	if (document.cookie.indexOf(disableStr + '=true') > -1) {
	  window[disableStr] = true;
	}

	// Opt-out function
	function gaOptout() {
	  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
	  window[disableStr] = true;
	}
	</script>

Matomo

Für Matomo sind keine besonderen Anpassungen notwendig.

Matomo (ALT - FALSCH!)

Um Matomo auch wirklich erst nach Zustimmung auszuführen, muss die Einbindung (der Code-Schnipsel) angepasst werden. Dazu muss der Code-Schnipsel von Matomo um die folgenden Angaben OBEN ergänzt werden.

// require user consent before processing data
_paq.push(['requireConsent']);
_paq.push(['trackPageview']);
[...]

Der vollständige Code könnte also etwa so aussehen:

<!-- Matomo -->
<script type="text/javascript">
  var _paq = _paq || [];
  // require user consent before processing data
  _paq.push(['requireConsent']);
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://analytics.versicherungsmarkt.de/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '3']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->