Custom Integration
Der CF Cookie Manager ist nicht auf vordefinierte Services beschränkt. Du kannst eigene Services erstellen und beliebige Integrationen umsetzen. Diese Seite zeigt, wie du einen eigenen Service erstellst.
In 4 Schritten zum eigenen Service:
Schritt 1: Service im TYPO3 Backend anlegen
Name: Mein Custom Service
Identifier: my_custom_service
Provider: (youtube.com,youtu.be) //Liste von URLs die durch die middleware geblockt werden, und dem Identifier zugeordnet.
Kategorie: functional (oder eigene Kategorie)
Schritt 2: opt_in_code definieren
// JavaScript das bei Consent ausgeführt wird:
document.querySelectorAll(".my-blocked-content").forEach(el => el.style.display = "none");
document.querySelectorAll(".my-real-content").forEach(el => el.style.display = "block");
// Oder: Externes Script nachladen
var s = document.createElement("script");
s.src = "https://example.com/widget.js";
document.head.appendChild(s);
Schritt 3: opt_out_code definieren
// JavaScript das bei Consent-Widerruf ausgeführt wird:
document.querySelectorAll(".my-blocked-content").forEach(el => el.style.display = "block");
document.querySelectorAll(".my-real-content").forEach(el => el.style.display = "none");
// oder script cleanup & entfernen Logic.
Schritt 4: HTML mit Blocking vorbereiten
<!-- Für Script Blocking: -->
<script type="text/plain" data-service="my_custom_service">
// Wird erst nach Consent ausgeführt
</script>
<!-- Für Content Blocking: -->
<div class="my-blocked-content">
Bitte akzeptiere die Cookies...
</div>
<div class="my-real-content" style="display:none">
Eigentlicher Inhalt
</div>
Kombination: Script + Content Blocking
<!-- 1. Content Overlay (via opt_in_code/opt_out_code) -->
<div class="my-blocked-content">
<p>Widget blockiert</p>
<button data-cc="c-settings">Einstellungen</button>
</div>
<!-- 2. Script (via data-service) -->
<script type="text/plain" data-service="my_custom_service">
myCustomInitWidget({container: "#widget-area"});
</script>
<!-- 3. Widget Container -->
<div id="widget-area" class="my-real-content"
style="display:none"></div>