Benutzerdefinierter HTML-Code

Für jedes Design können Sie benutzerdefinierten HTML-Code hinzufügen. Der HTML-Code kann verwendet werden, um das Design der Einwilligungsschicht weiter anzupassen, indem neue Inhalte hinzugefügt werden. Ein gängiges Beispiel hierfür ist die Split-View-Einwilligung:

Im obigen Beispiel ist die linke Seite der Ebene die ursprüngliche Einwilligungs-Ebene. Die rechte Seite der Ebene ist benutzerdefinierter HTML-Code, der diesem Design hinzugefügt wurde.

Wie HTML-Code in die Einwilligungsschicht eingefügt wird

Die Einwilligungsschicht besteht in der Regel aus einem <div> Element für die äußere Ebene (CSS-Klasse cmpbox) und  <div> Element für den inneren Teil der Ebene (CSS-Klasse cmpboxinner). Wenn benutzerdefinierter HTML-Code verwendet wird, erstellt die CMP ein weiteres <div> innerhalb der äußeren Ebene und platziert sowohl die innere Ebene als auch den benutzerdefinierten HTML-Code darin.

Den Inhalt nebeneinander platzieren

Um die innere Ebene neben Ihrem benutzerdefinierten HTML zu platzieren, könnten Sie CSS verwenden display:flex auf dem <div> mit der CSS-Klasse cmpboxcontainer. Hier sehen Sie eine sehr einfache Konfiguration für eine Einwilligungsschicht mit Inhalten links/rechts:

Hinzufügen einer benutzerdefinierten Schaltfläche zum Akzeptieren

Wenn du lediglich eine Schaltfläche zum Akzeptieren/Ablehnen benötigst, die nicht alle Anbieter akzeptiert oder ablehnt, kannst du dies mithilfe von clientseitigen Konfigurationsvariablen erreichen. Das folgende Beispiel fügt der ersten Ebene eine Schaltfläche „Akzeptieren ohne verhaltensbasierte Werbung“ hinzu. Ein Klick auf die Schaltfläche aktiviert nur die IAB-TCF-Zwecke 1, 2, 7, 8 und 10 (die Zwecke 3, 4, 5, 6 und 9, die der Personalisierung dienen, werden nicht aktiviert).

 <script>
  window.cmp_custombutton = true;
  window.cmp_custombutton_name = 'Accept without Behavorial Advertising';
  window.cmp_custombutton_pos = 1;
  window.cmp_custombutton_purposes = [1,2,7,8,10];
 </script>

 

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!